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

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

Узнайте, как установить и использовать Tailwind для создания потрясающих пользовательских интерфейсов в ваших проектах Next.js.

Установите Tailwind CSS в Next.js

Начните с установки Tailwind в приложении Next.js. Процесс похож на установка Tailwind в приложение React, с небольшой разницей в процессе настройки.

Перейти к Установка попутного ветра CSS страница. Затем перейдите к Руководства по фреймворку

раздел и выберите Next.js. В этом разделе содержатся все инструкции, необходимые для настройки Tailwind в вашем проекте Next.js.

Чтобы установить Tailwind через npm, менеджер пакетов JavaScript, запустите эти две команды терминала:

npm install -D tailwindcss автопрефиксатор postcss
Инициализация npx tailwindcss -p

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

Настройка шаблонов

После установки вы должны настроить пути к шаблонам, указанные в руководстве по установке, в файле конфигурации вашего приложения. Добавьте следующий код в файл tailwind.config.js:

/** @тип {импорт ("tailwindcss"). Конфигурация}*/
модуль.экспорт = {
 содержание: [ 
«./приложение/**/*.{js, ts, jsx, tsx}»,
"./pages/**/*.{js, ts, jsx, tsx}",
"./компоненты/**/*.{js, ts, jsx, tsx}",
// Или, если используется каталог `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 тема: { 
 продлевать: {},
 },
 плагины: [],
}

Добавить директиву Tailwind в приложение

Затем добавьте следующие директивы Tailwind в CSS-файл вашего приложения. Это файл с именем глобальный.css. Вам следует удалить содержимое файла global.css и добавить директивы Tailwind.

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

Запустить процесс сборки

Теперь на терминале запустите инструмент CLI с помощью следующей команды:

нпм запустить разработчик

Эта команда сканирует ваши файлы шаблонов на наличие классов и создает ваш CSS. Он откроет порт для просмотра в браузере.

Теперь, если вы перейдете на сервер по адресу http://localhost: 3000 вы увидите свое приложение. Вы должны заметить небольшое изменение в содержании. Это означает, что процесс установки прошел успешно и Tailwind CSS работает.

Использование попутного ветра в проекте

Далее давайте проверим функции Tailwind CSS, применив классы к вашему проекту. Например, у вас есть приложение с текстом «Привет, попутный ветер». Вы хотите придать ему красный цвет со светло-голубым фоном.

Создать Home.tsx файл, затем добавьте следующий код:

экспортпо умолчаниюфункцияДом() {
возвращаться (
"бг-блю-300">
'текст-красный-900'>Привет, попутный ветер CSS</h1>
 </body>
 );
} 

Теперь, когда вы перейдете в браузер, вы увидите, что текст изменился на красный, а фон стал синим.

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

Преимущества использования Tailwind CSS

Tailwind CSS, созданный Адамом Ватаном в 2017 году, во многом отличается от других библиотек CSS. Он имеет нулевое время выполнения, что делает его молниеносным. И легко устанавливается. Tailwind сканирует все HTML-файлы и компоненты JavaScript на наличие имен классов в вашем приложении. Затем он генерирует соответствующие стили, которые оформляют элементы.

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