Начало работы с Tailwind CSS

Tailwind CSS работает, сканируя все ваши HTML-файлы, компоненты JavaScript и любые другие шаблоны в поисках имён классов, создавая соответствующие стили и записывая их в статический CSS-файл.

Это быстро, гибко и надёжно — без кода, выполняемого во время работы приложения.

Установка

С помощью Vite
С помощью PostCSS
Tailwind CLI
Руководства по фреймворкам
Play CDN

Установка Tailwind CSS в качестве плагина Vite

Установка Tailwind CSS в качестве плагина Vite — самый простой способ интегрировать его с такими фреймворками, как Laravel, SvelteKit, React Router, Nuxt и SolidJS.

Создайте проект

Для начала создайте новый проект Vite, если вы ещё не создали его. Чаще всего для этого используют Create Vite.

npm create vite@latest my-project
cd my-project

Установите Tailwind CSS

Установите tailwindcss и @tailwindcss/vite с помощью npm.

npm install tailwindcss @tailwindcss/vite

Настройте плагин Vite

Добавьте плагин @tailwindcss/vite в конфигурацию Vite.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Импортируйте Tailwind CSS

Добавьте @import в CSS-файл, чтобы импортировать Tailwind CSS.

@import "tailwindcss";

Запустите процесс сборки

Запустите процесс сборки с помощью npm run dev или любой другой команды, настроенной в файле package.json.

npm run dev

Начните использовать Tailwind в HTML

Убедитесь, что скомпилированный CSS подключён в <head> (возможно, ваш фреймворк сделает это за вас), а затем используйте utility-классы 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>

Не получается? Настройка Tailwind с Vite может немного отличаться в зависимости от используемых инструментов сборки. Ознакомьтесь с нашими руководствами по фреймворкам: возможно, там есть более подробные инструкции для вашей конфигурации.

Ознакомиться с руководствами по фреймворкам

Начало работы с Tailwind CSS

Установка

С помощью Vite

С помощью PostCSS

Tailwind CLI

Руководства по фреймворкам