Установка

Самый простой и быстрый способ начать работу с Tailwind CSS с нуля — использовать инструмент командной строки Tailwind. Интерфейс командной строки также доступен в виде автономного исполняемого файла, если вы хотите использовать его без установки Node.js.

Установите Tailwind CSS
Установите tailwindcss через npm и создайте файл tailwind.config.js .
Terminal
```
npm install -D tailwindcssnpx tailwindcss init
```

Настройте пути к шаблонам

Добавьте пути ко всем вашим файлам шаблонов в файл tailwind.config.js.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Добавьте директивы Tailwind в свой CSS
Добавьте директивы @tailwind для каждого макета Tailwind в свой основной файл CSS.
src/input.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Запустите процесс сборки Tailwind CLI
Запустите инструмент CLI, чтобы просканировать файлы шаблонов на предмет классов и создать свой CSS.
Terminal
```
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
```

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

Добавьте свой скомпилированный файл CSS в <head> и начните использовать классы утилиты Tailwind для стилизации вашего контента.

src/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Привет мир!
  </h1>
</body>
</html>

Что читать дальше

Познакомьтесь с некоторыми из основных концепций, которые отличают Tailwind CSS от написания традиционного CSS.

Основы Utility-First
Использование рабочего процесса «сначала утилиты» для создания сложных компонентов из ограниченного набора примитивных утилит.
Адаптивный дизайн
Создавайте полностью отзывчивые пользовательские интерфейсы, которые адаптируются к любому размеру экрана, с помощью адаптивных модификаторов.
Наведение, фокус и другие состояния
Стилизуйте элементы в интерактивных состояниях, таких как наведение, фокус и т. д., с помощью условных модификаторов.
Темный режим
Оптимизируйте свой сайт для темного режима прямо в своем HTML с помощью модификатора темного режима.
Повторное использование стилей
Управляйте дублированием и поддерживайте свои проекты в сопровождении, создавая многократно используемые абстракции.
Настройка фреймворка
Настройте фреймворк в соответствии с вашим брендом и дополните его своими собственными стилями.

Начните работу с Tailwind CSS