Как установить Tailwind CSS: Объяснение!

Этот пост — руководство для начинающих о том, как установить 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
Enter fullscreen mode Выйти из полноэкранного режима

Если вы не получили номер версии для 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 и продолжаете работать над своим проектом.

Оцените статью
devanswers.ru
Добавить комментарий