Tailwind CSS — это первая служебная среда CSS, которая позволяет разработчикам создавать собственные веб-компоненты, не переключаясь на файл CSS. В этом руководстве вы узнаете, как установить Tailwind CSS в React и как вы можете использовать его для создания простой страницы React.

Зачем использовать Tailwind CSS?

Есть уже много CSS фреймворки, которые упрощают разработку веб-страниц разработчиками. Так почему же вам следует использовать Tailwind CSS?

Фреймворки CSS, такие как Bootstrap и Foundation, являются самоуверенными фреймворками, то есть они предоставляют разработчикам предварительно определенные компоненты со стилями по умолчанию. Это ограничивает как настройку, так и творчество, и в итоге вы получаете веб-сайты, которые выглядят довольно стандартно.

Попутный ветер CSS, однако, это инфраструктура, ориентированная на утилиты, которая дает вам творческий контроль над созданием динамических компонентов. И в отличие от Bootstrap, вы можете легко настроить дизайн по своему усмотрению.

Еще одно преимущество использования Tailwind CSS заключается в том, что вы получаете небольшой размер пакета CSS, поскольку он удаляет все неиспользуемый CSS во время процесса сборки (который отличается от Bootstrap, поскольку он включает все файлы CSS в строить).

Узнайте больше о различия между Tailwind CSS и Bootstrap из нашей статьи по теме.

Недостатки использования Tailwind CSS

Tailwind CSS имеет крутую кривую обучения даже для опытных разработчиков. Требуется некоторое время, чтобы научиться в полной мере использовать служебные классы, и вам, возможно, придется часто обращаться к документации. Однако, ознакомившись с классами, вы обнаружите, что это проще и быстрее по сравнению с простым CSS.

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

Несмотря на эти недостатки, Tailwind CSS — это фреймворк, который вам следует серьезно рассмотреть, если вы уже знакомы с CSS и хотите быстрее создавать проекты.

Начало работы: создание проекта React

Запустите следующую команду в терминале, чтобы создать шаблон Реагировать приложение, использующее создать-реагировать-приложение.

npx создать-реагировать-приложение реагировать-попутный ветер

создать-реагировать-приложение предоставляет простой способ создать приложение React без настройки инструментов сборки, таких как webpack, babel или linters. Это означает, что вы получите рабочую среду React в течение нескольких минут.

Приведенная выше команда создает новую папку с именем реагировать на попутный ветер. Перейдите к папке и откройте ее с помощью предпочитаемого текстового редактора.

cd реакция-попутный ветер

Затем установите Tailwind CSS и настройте его для работы с приложением React.

Используйте CSS Tailwind в React

Установите Tailwind CSS и его зависимости с помощью этой команды:

npm установить автопрефиксер tailwindcss postcss

PostCSS использует плагины JavaScript, чтобы сделать CSS совместимым с большинством браузеров. Он проверяет браузер, в котором запущено приложение, и определяет полифиллы, необходимые для бесперебойной работы вашего CSS. Autoprefixer — это плагин PostCSS, который использует значения из caniuse.com для автоматического добавления префиксов поставщиков в правила CSS.

Инициализировать CSS Tailwind

Запустите попутный ветер Команда для создания файлов конфигурации Tailwind CSS по умолчанию.

инициализация npx tailwindcss

Это создает хвостовой ветер.config.js в корневой папке, в которой хранятся все файлы конфигурации Tailwind и содержится следующее:

модуль.экспорт = {
 содержание: [],
 тема: {
 продлевать: {},
 },
 плагины: [],
}

Настройка путей к шаблонам

Вам нужно указать Tailwind CSS файлы, которые он должен проверять, чтобы увидеть, какие классы CSS используются. Это позволяет Tailwind идентифицировать и удалять неиспользуемые классы и, следовательно, уменьшает размер создаваемого CSS.

В хвостовой ветер.config.js, добавьте пути к шаблонам под ключом содержимого.

модуль.экспорт = {
 содержание: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 тема: {
 продлевать: {},
 },
 плагины: [],
}

Добавьте CSS Tailwind в React

Следующим шагом является включение Tailwind CSS в приложение с помощью @tailwind директивы.

Удалить все в index.css и добавьте следующее, чтобы импортировать базовые стили, компоненты и утилиты.

база @tailwind;
компоненты @tailwind;
утилиты @tailwind;

Наконец, убедитесь, index.css импортируется в index.js и Tailwind CSS будет готов к использованию.

Использование Tailwind CSS для стилизации компонента React

Вы создадите простую веб-страницу ниже и стилизуете ее, используя служебные классы Tailwind.

Эта страница содержит два основных раздела: Панель навигациии главный раздел (с заголовком и кнопкой).

Чтобы проиллюстрировать, как Tailwind CSS упрощает написание CSS, попробуйте оформить веб-страницу с помощью простого CSS и Tailwind CSS.

Начните с изменения App.js в источник папку, чтобы удалить ненужный код.

импортировать './App.css'
приложение функции () {
 вернуть (



 );
}
экспортировать приложение по умолчанию;

Затем добавьте содержимое веб-страницы в App.js.

импортировать "./App.css";
приложение функции () {
 вернуть (







 Tailwind CSS упрощает стилизацию компонентов React!



Начать






 );
}

Чтобы использовать простой CSS, добавьте CSS в App.css.

навигация {
 дисплей: гибкий;
 выравнивание содержимого: пробел между;
 отступ: 16px 36px;
 цвет: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.лого {
 размер шрифта: 18px;
 вес шрифта: полужирный;
}
ул {
 стиль списка: нет;
 дисплей: встроенный гибкий;
}
уль ли {
 поле слева: 16px;
 курсор: указатель;
}
.герой {
 дисплей: гибкий;
 flex-направление: столбец;
 выравнивание элементов: по центру;
 поле сверху: 64px;
}
ч1 {
 размер шрифта: 36px;
 выравнивание текста: по центру;
}
.btn {
 цвет фона: #000000;
 цвет: #fff;
 отступ: 10 пикселей;
 ширина: подгонка содержимого;
 поле сверху: 36px;
}

С Tailwind CSS вам не нужно писать правила CSS для каждого класса. Вместо этого вы используете служебные классы. Это классы, ограниченные одним свойством CSS. Например, если вы хотите создать кнопку с черным фоном и белым цветом текста, вам нужно использовать бг-черный а также текст-белый служебные классы.

App.js должно выглядеть так.

приложение функции () {
 вернуть (







 Tailwind CSS упрощает стилизацию компонентов React!




 Начать







 );
}

Вам не нужно импортировать App.css так как стили, сгенерированные Tailwind CSS, хранятся в index.css который вы импортировали в index.js ранее.

По сравнению с простым CSS этот подход приводит к меньшему количеству кода, который легко понять.

Стильный код с помощью Tailwind CSS

В этой статье вы узнали о Tailwind CSS, его преимуществах и недостатках, а также о том, как вы можете использовать его служебные классы в приложениях React. Помимо классов, Tailwind CSS также предлагает другие дополнительные функции, включая возможность создавать адаптивные макеты и повторно используемые компоненты.

Но, как мы упоминали ранее, Tailwind — далеко не единственный CSS-фреймворк на рынке. Что вы будете использовать для вашего следующего проекта?

Попутный ветер CSS против. Bootstrap: какой фреймворк лучше?

При выборе CSS-фреймворка важно найти тот, который соответствует вашим требованиям.

Читать дальше

Об авторе