Установка Tailwind CSS с PostCSS

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

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

Он быстрый, гибкий и надежный — без необходимости использования runtime.

Установка

Установка Tailwind CSS как плагина PostCSS — наиболее простой способ его интеграции с такими фреймворками, как Next.js и Angular.

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

Установите tailwindcss, @tailwindcss/postcss и postcss через npm.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Добавьте Tailwind в конфигурацию PostCSS

Добавьте @tailwindcss/postcss в файл postcss.config.mjs или в любое место в вашем проекте, где настроен PostCSS.

postcss.config.mjs

export default {  plugins: {    "@tailwindcss/postcss": {},  }}

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

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

CSS

@import "tailwindcss";

Начните процесс сборки

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

Terminal

npm run dev

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

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

HTML

<!doctype html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="/dist/styles.css" rel="stylesheet"></head><body>  <h1 class="text-3xl font-bold underline">    Hello world!  </h1></body></html>

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

Изучите наши руководства по фреймворкам

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