LETUNOFF DOCS

Library. Tailwind

🧱 Суть

Tailwind CSS – это utility-first CSS-фреймворк, который позволяет создавать стили прямо через готовые классы в разметке.

Например:

<div className="flex items-center gap-4">

📦 Проблема

CSS порой повторяется из проекта в проект и дублировать классы не всегда удобно.

✅ Решение

Вместо написания отдельных CSS-правил используются готовые утилитарные классы.

💻 Код

Установка

Сначала устанавливаем Tailwind CSS и необходимые зависимости:

npm install -D tailwindcss postcss autoprefixer

Создание конфигурации

Создаём файлы конфигурации:

npx tailwindcss init -p

Команда создаст:

tailwind.config.js
postcss.config.js

tailwind.config.js отвечает за настройки Tailwind, а postcss.config.js – за обработку CSS через PostCSS.

Настройка путей

В tailwind.config.js необходимо указать файлы, где Tailwind должен искать используемые классы:

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Параметр content нужен для того, чтобы Tailwind мог найти все используемые классы и удалить неиспользуемые при сборке.

Подключение Tailwind в CSS

Создай основной CSS-файл, например:

src/index.css

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

@tailwind base;
@tailwind components;
@tailwind utilities;

Они подключают:

  • base – базовые стили и reset;
  • components – компонентные классы;
  • utilities – все utility-классы Tailwind.

Импорт стилей

Подключи CSS-файл в главный файл приложения:

import './index.css';

После этого Tailwind-классы будут доступны во всём проекте.

🎯 Вывод

  • Tailwind CSS устанавливается через tailwindcss, postcss и autoprefixer.
  • Конфигурация хранится в tailwind.config.js.
  • В content указываются файлы, где используются классы.
  • Директивы @tailwind подключают функциональность Tailwind.
  • Prettier с prettier-plugin-tailwindcss помогает автоматически сортировать классы.

🔗 Связано

Обратные ссылки