Tailwind-only стилизация

<!-- ✅ Хорошо -->
<template>
  <div class="flex items-center gap-4 p-4 bg-default rounded-lg">
    <span class="text-lg font-medium text-default">Заголовок</span>
  </div>
</template>

<script setup lang="ts">
// логика
</script>

<!-- ❌ Плохо -->
<template>
  <div class="container">
    <span class="title">Заголовок</span>
  </div>
</template>

<script setup lang="ts">
// логика
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: 0.5rem;
}

.title {
  font-size: 1.125rem;
  font-weight: 500;
}
</style>

app/assets/css/
├── main.css          # точка входа
├── base.css          # базовые reset-стили
└── fonts.css         # @font-face

/* app/assets/css/vendor/quill.css */
.ql-editor {
  min-height: 200px;
}

<template>
  <!-- По категориям: layout → spacing → sizing → typography → colors → effects -->
  <div
    class="
      flex items-center justify-between
      p-4 gap-4
      w-full max-w-md
      text-sm font-medium
      bg-default text-default border-default
      rounded-lg shadow-sm
      transition-colors hover:bg-muted
    "
  >
    Контент
  </div>
</template>

<!-- ❌ ЗАПРЕЩЕНО: класс не попадёт в бандл -->
<template>
  <div :class="`bg-${color}-500`">
  <div :class="`text-${size}`">
  <div :class="`p-${spacing}`">
</template>

<script setup>
const color = ref('red')    // bg-red-500 не будет в CSS!
const size = ref('lg')      // text-lg не будет в CSS!
const spacing = ref('4')    // p-4 не будет в CSS!
</script>

<!-- ✅ ПРАВИЛЬНО: полные имена классов -->
<template>
  <div :class="colorClass">
  <div :class="sizeClass">
</template>

<script setup>
const colorClass = computed(() => {
  const colors = {
    red: 'bg-red-500',
    blue: 'bg-blue-500',
    green: 'bg-green-500',
  }
  return colors[color.value]
})

const sizeClass = computed(() => {
  const sizes = {
    sm: 'text-sm p-2',
    md: 'text-base p-4',
    lg: 'text-lg p-6',
  }
  return sizes[size.value]
})
</script>

<template>
  <!-- Простое условие -->
  <div :class="{ 'opacity-50': isDisabled }">

  <!-- Несколько условий -->
  <div
    :class="[
      'base-class',
      isActive && 'bg-primary text-white',
      isDisabled && 'opacity-50 pointer-events-none',
    ]"
  >

  <!-- Computed для сложной логики -->
  <div :class="statusClasses">
</template>

<script setup lang="ts">
const statusClasses = computed(() => {
  const base = 'px-2 py-1 rounded text-sm font-medium'

  switch (status.value) {
    case 'success':
      return `${base} bg-success/10 text-success`
    case 'error':
      return `${base} bg-error/10 text-error`
    default:
      return `${base} bg-muted text-muted`
  }
})
</script>

<template>
  <!-- Родитель с class="group" -->
  <a href="/order/123" class="group block p-4 rounded-lg hover:bg-muted">
    <h3 class="font-medium group-hover:text-primary">Заказ #123</h3>
    <p class="text-muted group-hover:text-default">Подробнее →</p>
    <UIcon
      name="i-lucide-arrow-right"
      class="opacity-0 group-hover:opacity-100 transition-opacity"
    />
  </a>
</template>

<template>
  <div class="group/card p-4 hover:bg-muted">
    <div class="group/header flex items-center">
      <h3 class="group-hover/header:underline">Заголовок</h3>
    </div>
    <p class="group-hover/card:text-primary">Контент карточки</p>
  </div>
</template>

<template>
  <div>
    <!-- Input с class="peer" -->
    <input type="email" class="peer" placeholder="Email" />

    <!-- Сообщение появляется при невалидном input -->
    <p class="invisible peer-invalid:visible text-error text-sm">
      Введите корректный email
    </p>

    <!-- Label поднимается при focus -->
    <label class="peer-focus:-translate-y-6 peer-focus:text-primary transition-all">
      Email
    </label>
  </div>
</template>

<template>
  <!-- Карточка подсвечивается если внутри checked checkbox -->
  <label class="block p-4 border rounded-lg has-[:checked]:border-primary has-[:checked]:bg-primary/5">
    <input type="checkbox" class="mr-2" />
    Выбрать этот вариант
  </label>

  <!-- Форма показывает рамку если внутри есть focus -->
  <form class="p-4 rounded-lg has-[:focus]:ring-2 has-[:focus]:ring-primary">
    <input type="text" placeholder="Имя" />
    <input type="email" placeholder="Email" />
  </form>
</template>

<!-- components/StatusBadge.vue -->
<template>
  <span :class="classes">
    <slot />
  </span>
</template>

<script setup lang="ts">
const props = defineProps<{
  variant: 'success' | 'error' | 'warning' | 'info'
}>()

const classes = computed(() => {
  const base = 'px-2 py-1 rounded text-xs font-medium'
  const variants = {
    success: 'bg-success/10 text-success',
    error: 'bg-error/10 text-error',
    warning: 'bg-warning/10 text-warning',
    info: 'bg-info/10 text-info',
  }
  return `${base} ${variants[props.variant]}`
})
</script>

/* app/assets/css/base.css */
@layer components {
  .btn-base {
    @apply px-4 py-2 rounded font-medium transition-colors;
  }
}