Этот пост — руководство для начинающих о том, как установить Tailwind CSS с помощью Tailwind CLI. Существует множество способов установки Tailwind CSS, и все зависит от того, над каким проектом вы работаете.
Прежде чем мы начнем, есть несколько моментов, которые вам необходимо знать:
-
Если вы хотите попробовать Tailwind CSS, то Tailwind Play и Play CDN — это самый быстрый способ.
-
При установке Tailwind CSS на фреймворк могут быть некоторые различия. Проверьте раздел «Руководства по фреймворкам», чтобы найти установку для вашего фреймворка.
-
TLDR: https://tailwindcss.com/docs/installation
¯_(ツ)_/¯
.
Установка Tailwind CSS с помощью Tailwind CLI
Первое, что нам понадобится, это npm
. NPM — это менеджер пакетов для JavaScript. Думайте о менеджере пакетов как о способе управления чужим кодом внутри вашего проекта. Он нужен нам для того, чтобы мы могли использовать пакет tailwindcss
в нашем проекте.
Установите Node.js и npm
Чтобы иметь npm, нам нужно установить его через установку Node.js. Сначала нам нужно проверить, установлены ли у нас Node.js и npm. Откройте командную строку (или PowerShell/Terminal/etc.) и введите следующее:
node -v
Если система покажет вам номер версии node, значит, node уже установлен. То же самое можно сделать для проверки установки npm:
npm -v
Если вы не получили номер версии для node и npm, значит, вам необходимо установить Node.js. Перейдите на сайт nodejs.org и, в зависимости от вашей операционной системы, установите версию LTS.
Создайте директорию проекта
На рабочем столе создайте папку website
. Внутри папки website
создайте папку src
, которую мы будем использовать для хранения файлов нашего сайта.
Установите пакет tailwindcss
.
Используя командную строку, перейдите в каталог проекта (папка website
). В моем случае я введу cd .Desktopwebsite
:
Введите следующее, чтобы установить пакет tailwindcss
:
npm install -D tailwindcss
Первые два слова npm install
будут использовать npm для установки пакета. Флаг -D
указывает npm устанавливать пакет только в разработке, но не в производстве. Последняя часть tailwindcss
— это имя пакета.
Если мы откроем папку проекта в VS Code, там появится новая папка node_modules
. В папке node_modules
будут сохранены все внешние пакеты. Если мы заглянем в папку, то увидим, что там есть папка tailwindcss
, которая содержит код tailwindcss
. Хорошей новостью является то, что мы ничего не меняем в этой папке, а все изменения происходят с помощью команд npm.
Также создаются файлы package.json
и package-lock.json
. Файл package.json
содержит информацию о проекте с пакетами, которые он использует. package-lock.json
содержит пакеты с точными номерами установленных версий.
Файл конфигурации Tailwind CSS
Далее создайте файл конфигурации Tailwind CSS с помощью следующей команды:
npx tailwindcss init
npx
похож на npm
, но мы используем его для выполнения пакетов. Команда, которую мы выполнили, создала новый файл конфигурации под названием tailwind.config.js
. Конфигурационный файл содержит шаблон конфигурации Tailwind CSS. Внутри файла config у нас есть объект JavaScript с несколькими свойствами.
С помощью файла config мы можем настроить множество вещей. На данный момент единственной важной частью файла конфигурации является свойство content
. Свойство content
— это способ указать tailwindcss
, какие файлы искать, когда он хочет создать наш CSS файл.
В нашем случае мы хотим, чтобы tailwindcss
сканировал все файлы .html
в папке src
. Синтаксисом для этого будет строка "./src/**/*.html"
. Давайте разберем путь, чтобы вы понимали, что здесь происходит:
Итак, вот окончательный код нашего конфигурационного файла:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.html"],
theme: {
extend: {},
},
plugins: [],
}
Директивы Tailwind CSS
Директивы — это различные части Tailwind CSS. Мы также можем регистрировать новые директивы с помощью плагинов. Существуют три основные директивы:
В папке src/
создайте файл с именем style.css
. Имя файла не имеет значения. Tailwind CSS использует этот файл в качестве входных данных для создания фактического CSS-файла, содержащего необходимые нам CSS-стили.
Внутри файла style.css
добавьте директивы Tailwind CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
Создание файла CSS
Используя командную строку, введите следующее:
npx tailwindcss -i ./src/style.css -o ./src/css/main.css
Давайте разберемся с этим:
Проверьте файлы проекта, и мы увидим, что наш файл main.css
был создан. Это тот файл, который мы будем импортировать в наш HTML-файл. Сейчас main.css
содержит только стили base
. Это происходит потому, что у нас нет HTML-страницы, которую Tailwind мог бы просканировать и добавить используемые классы компонентов или утилит.
Использование выходного файла Tailwind CSS в HTML
Внутри папки src/
создайте файл index.html
. Импортируйте файл main.css
и добавьте простую кнопку с некоторыми классами Tailwind CSS для тестирования:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<button class="text-lg text-red-500 bg-red-200">CodeProMax</button>
</body>
</html>
Сохраните файл и проверьте результат. Если у вас, как и у меня, установлено расширение live server, вы можете открыть файл с помощью live server.
Кнопка не получила ни одного из стилей, которые мы применили. Если мы проверим файл main.css
, то увидим, что он не содержит классов утилит, которые мы применили к кнопке. Это происходит потому, что каждый раз, когда мы вносим изменения в классы, Tailwind CSS необходимо создать файл main.css
с последним обновлением.
Чтобы лучше понять процесс, вот как работает Tailwind CSS:
Чтобы сгенерировать классы, нам нужно снова выполнить команду build:
npx tailwindcss -i ./src/style.css -o ./src/css/main.css
Если мы сейчас проверим страницу, то увидим, что к нашей кнопке были применены стили:
Выполнение одной и той же команды сборки для каждого изменения — не очень хорошая схема. Мы можем автоматизировать это, добавив флаг --watch
в команду сборки. Вот команда сборки с флагом --watch
:
npx tailwindcss -i ./src/style.css -o ./src/css/main.css --watch
Вы можете заметить, что командная строка не завершилась и не остановилась, она все еще активна. Флаг watch
сохраняет командную строку активной и «следит» за файлами на предмет изменений. Как только она обнаружит изменения, она автоматически выполнит команду сборки.
Пока командная строка все еще активна, добавим новый класс font-extrabold
к кнопке:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind CSS</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<button class="text-lg text-red-500 bg-red-200 font-extrabold">CodeProMax</button>
</body>
</html>
Сохраним файл, обновим и увидим новые изменения.
Если проверить файл mian.css
, мы увидим, что класс font-extrabold
теперь добавлен в файл.
Tailwind CSS Flow
То, что мы рассмотрели в этой заметке, не является повседневной работой с Tailwind CSS. В большинстве случаев вы запускаете команду сборки с флагом watch
и продолжаете работать над своим проектом.