Установка
Tailwind CSS работает путем сканирования всех ваших HTML-файлов, JavaScript-компонентов и любых других шаблонов на наличие классов, генерации соответствующих стилей и последующей записи их в статический CSS-файл.
Он быстрый, гибкий и надежный — без необходимости использования runtime.
Самый простой и быстрый способ начать работу с Tailwind CSS с нуля — использовать инструмент Tailwind CLI. CLI также доступен как автономный исполняемый файл, если вы хотите использовать его без установки Node.js.
Install tailwindcss and @tailwindcss/cli via npm.
npm install tailwindcss @tailwindcss/cliДобавьте импорт @import "tailwindcss"; в ваш основной файл CSS.
@import "tailwindcss";Запустите инструмент CLI, чтобы просканировать исходные файлы на наличие классов и создать CSS.
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watchДобавьте скомпилированный файл CSS в <head> и начните использовать классы утилиты Tailwind для стилизации своего контента.
<!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"> Hello world! </h1></body></html>