Установка
Tailwind CSS работает путем сканирования всех ваших HTML-файлов, JavaScript-компонентов и любых других шаблонов на наличие классов, генерации соответствующих стилей и последующей записи их в статический CSS-файл.
Он быстрый, гибкий и надежный — без необходимости использования runtime.
Установка Tailwind CSS как плагина Vite — наиболее простой способ его интеграции с такими фреймворками, как Laravel, SvelteKit, React Router, Nuxt и SolidJS.
Начните с создания нового проекта Vite, если у вас его еще нет. Наиболее распространенный подход — использовать Create Vite.
npm create vite@latest my-projectcd my-project
Установите tailwindcss
и @tailwindcss/vite
через npm.
npm install tailwindcss @tailwindcss/vite
Добавьте плагин @tailwindcss/vite
в конфигурацию Vite.
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})
Добавьте @import
в свой CSS-файл, который импортирует Tailwind CSS.
@import "tailwindcss";
Запустите процесс сборки с помощью npm run dev
или любой другой команды, настроенной в файле package.json
.
npm run dev
Убедитесь, что ваш скомпилированный CSS включен в <head>
(ваша платформа может сделать это за вас), затем начните использовать классы утилиты Tailwind для стилизации вашего контента.
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/src/style.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>