Tailwind CSS — документация

Установка

Установка Tailwind CLI

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

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

Установите tailwindcss с помощью npm и создайте свой файл tailwind.config.js.
Терминал
```
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.
Терминал
```
npx tailwindcss -i ./src/input.css -o ./dist/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="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>
```

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

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

Основы подхода "утилиты прежде всего"

Использование подхода "утилиты прежде всего" для создания сложных компонентов из ограниченного набора основных утилит.
Реагирующий дизайн

Создавайте полностью адаптивные пользовательские интерфейсы, которые адаптируются к любому размеру экрана, используя модификаторы для адаптивности.
Состояния наведения, фокуса и другие

Стиль элементов в интерактивных состояниях, таких как наведение курсора, фокус и др., используя условные модификаторы.
Темный режим

Оптимизируйте свой сайт для темного режима непосредственно в вашем HTML, используя модификатор темного режима.
Переиспользование стилей

Управляйте дублированием и сохраняйте ваши проекты поддерживаемыми, создавая повторно используемые абстракции.
Настройка фреймворка

Настройте фреймворк в соответствии с вашим брендом и расширьте его своими собственными пользовательскими стилями.

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

Установка

Tailwind CLI

Использование PostCSS

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

Использование CDN

Установка Tailwind CLI

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

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

Добавить директивы Tailwind в ваш CSS

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

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

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

Основы подхода "утилиты прежде всего"

Реагирующий дизайн

Состояния наведения, фокуса и другие

Темный режим

Переиспользование стилей

Настройка фреймворка