Установка: ```bash npm install -D tailwindcss @tailwindcss/vite ``` ```javascript // vite.config.js import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ vue(), tailwindcss() ] }) ``` ```css /* src/styles/main.css */ @import 'tailwindcss'; ``` Использование в компонентах: ```vue ``` Динамические классы: ```vue ``` `@apply` для извлечения повторяющихся паттернов: ```vue ``` Тёмная тема с Tailwind: ```vue ``` ```javascript // tailwind.config.js export default { darkMode: 'selector', // Управляем через класс/атрибут на html // darkMode: 'media', // Или через prefers-color-scheme } ``` --- ## 📌 Реальные кейсы 🔹 **Быстрый прототип** -- Tailwind ускоряет вёрстку в 3-5 раз для стандартных UI 🔹 **Компонентная библиотека** -- `@apply` + props-based classes для переиспользуемых компонентов 🔹 **Responsive layout** -- `sm:`, `md:`, `lg:` breakpoints прямо в шаблоне --- ## Частые ошибки ```vue ``` --- ## Резюме | Что | Как | |---|---| | Статические классы | `class="px-4 py-2 bg-blue-500"` | | Динамические | Object map с полными строками | | Переиспользование | `@apply` в `

{{ title }}

Заголовок

Как использовать Tailwind CSS с Vue?