Single-file компоненты Vue + Tailwind: компактный вайбкодинг без боли

Vue-разработчик открывает очередной `.vue`, видит простыню из классов Tailwind — и мысленно откладывает рефакторинг. Single-file компоненты Vue + Tailwind решают задачу скорости, но часто рождают хаос. Как превратить хаос в компактный вайбкодинг и при этом сэкономить время?

• Оптимизируем сборку Vite так, чтобы PurgeCSS не трогал динамические классы.
• Храним только смыслинные утилиты через `@apply`, не превращая SFC в CSS-файл.
• Автоматизируем повторное использование цветовых токенов через CSS vars.
• Разносим логику, стиль и доступность на слой props и модификаторов.
• Готовим «карманный» линтер для запрета inline-магии.

Как настроить минимальный стек за 5 минут?

Вчера на проекте стартапа нужно было поднять прототип до демо. Я открыл пустой репозиторий, создал SFC и засекаю: пять минут, чтобы собрать Vue 3, Vite и Tailwind так, чтобы первый билд весил < 50 KB. Задача реальна, если избегать лишних плагинов и не звать PostCSS-монстров.

1. `npm create vue@latest my-sfc` — шаблон с Vite внутри.
2. `npm i -D tailwindcss postcss autoprefixer` и `npx tailwindcss init -p`.
3. В `tailwind.config.js` добавьте `content: [‘./index.html’, ‘./src/*/.{vue,js,ts}’]`.
4. Создайте `src/assets/tailwind.css` с `@tailwind base; @tailwind components; @tailwind utilities;`.
5. Импортируйте файл в `main.ts`.
6. Запустите `npm run dev` и убедитесь, что билд < 50 KB.

# vite.config.ts
import { defineConfig } from ‘vite’;
import vue from ‘@vitejs/plugin-vue’;
export default defineConfig({
 plugins: [vue()],
 css: {
   postcss: {
     plugins: [require(‘tailwindcss’), require(‘autoprefixer’)],
   },
 },
});

Мини-вывод: базовый стек стартует за кофе-брейк, если держать конфиг минимальным и не пугаться CLI-магии.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

Как держать Tailwind-классы под контролем внутри SFC?

Ваш компонент «Card.vue» стремительно обрастает `px-4 py-2 bg-gray-800 text-white rounded-lg shadow` — читаемость падает. Что делать? Сложность лечится семантическими слотами, вычисляемыми классами и директивами.

1. Создавайте предикаты по props вместо копипаста классов.
2. Прячьте повторяющиеся утилиты в `@apply` внутри `<style scoped>`.
3. Маппинг состояний (`isActive`, `isError`) через `computed` — один источник правды.
4. Используйте `:class=»tw(() => [base, hover, disabled])»` с `tailwind-merge`.
5. Линтер `eslint-plugin-tailwindcss` — красная лампа для хаоса.

<script setup lang=»ts»>
import { twMerge } from ‘tailwind-merge’;
const props = defineProps<{ kind: ‘primary’|’ghost’; disabled?: boolean }>();
const cls = computed(() => twMerge([
 ‘px-4 py-2 text-sm rounded transition’,
 props.kind===’primary’ && ‘bg-indigo-600 text-white hover:bg-indigo-700’,
 props.kind===’ghost’ && ‘border border-indigo-600 text-indigo-600’,
 props.disabled && ‘opacity-40 pointer-events-none’,
]));
</script>

<template>
 <button :class=»cls»><slot /></button>
</template>

<style scoped>
.btn-base {@apply font-medium inline-flex items-center;}
</style>

Мини-вывод: семантика + `twMerge` режут количество классов втрое, а линтер не даёт расслабиться.

Как ускорить команду через композицию шаблонов?

Команда из четырёх человек тратит часы на согласование отступов. Решение — выделить макро-компоненты и снимать когнитивную нагрузку. Шаблон «Layout-shell» + «Content-slot» раз и навсегда описывает внутренние бордюры.

1. Создаём `Shell.vue` с фиксированными grid-зонами.
2. Пропускаем Tailwind-константы через provide/inject как CSS vars.
3. Генерируем дизайн-токены из Figma плагином «Tokens Studio».
4. Документируем в Storybook автогенерацией.
5. Подключаем `@tailwindcss/typography` для rich-text без боли.
6. Проверяем Lighthouse — целимся в 95+ perf.

<!— Shell.vue —>
<template>
 <div class=»min-h-screen grid grid-rows-header-content-footer»>
   <header class=»row-start-1″><slot name=»header» /></header>
   <main class=»row-start-2 p-safe»> <slot /></main>
   <footer class=»row-start-3″><slot name=»footer» /></footer>
 </div>
</template>

Мини-вывод: композиция шаблонов избавляет от «синхронизации отступов» и даёт общий язык между дизайнерами и девами.

Попробуйте вынести один общий `Shell.vue` уже сегодня и расскажите коллеге, сколько строк вы вычеркнули.

Финальный чек-лист: внедряем Vue SFC + Tailwind за вечер

—

Теперь у вас в руках компактный рецепт: пять шагов — и Single-file компоненты Vue + Tailwind превращаются из хаоса в вайбкодинг.