Ако искате да стилизирате приложенията си с бърза, гъвкава и надеждна рамка, Tailwind CSS е страхотна опция. Tailwind е CSS рамка, която ви помага да проектирате персонализирани уеб компоненти. Можете да проектирате компоненти, без да се налага да превключвате напред и назад между HTML и CSS файлове.

За разлика от Bootstrap, Tailwind няма предварително дефинирани класове. Вместо това можете да персонализирате своя собствена. С Tailwind можете да създавате сложни компоненти с примитивни помощни програми, функции и директиви.

Научете как да инсталирате и използвате Tailwind, за да създавате невероятни потребителски интерфейси във вашите Next.js проекти.

Инсталирайте CSS на Tailwind в Next.js

Започнете, като инсталирате Tailwind в приложение Next.js. Процесът е подобен на инсталиране на Tailwind в приложение React, с малка разлика в процеса на конфигуриране.

Отидете на Tailwind CSS инсталация

страница. След това отидете на Ръководства за рамка раздел и изберете Next.js. Този раздел съдържа всички инструкции, от които се нуждаете, за да настроите Tailwind във вашия проект Next.js.

За да инсталирате Tailwind чрез npm, мениджърът на пакети на JavaScript, изпълнете тези две терминални команди:

npm инсталирайте -D tailwindcss postcss автопрефикс
npx tailwindcss init -p

Тези команди създават два конфигурационни файла с имена tailwind.config.js и postcss.config.js в основната папка на проекта. Тези файлове показват, че TailwindCSS е инсталиран успешно. Можете също да инсталирате Tailwind CSS чрез CLI на Tailwind или като PostCSS плъгин.

Конфигуриране на шаблони

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

/** @Тип {import('tailwindcss').Config}*/
модул.exports = {
 съдържание: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./страници/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Или ако използвате директория `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 тема: { 
 разшири: {},
 },
 добавки: [],
}

Добавете Tailwind Directive към приложението

След това добавете следните директиви на Tailwind към вашия CSS файл на приложението. Това е името на файла global.css. Трябва да изтриете съдържанието на файла global.css и да добавите директивите Tailwind.

@база за заден вятър;
@tailwind компоненти;
@tailwind помощни програми;

Стартирайте процеса на изграждане

Сега на терминала стартирайте CLI инструмента със следната команда:

npm стартиране dev

Тази команда сканира вашите шаблонни файлове за класове и изгражда вашия CSS. Той ще ви отвори порт за преглед на браузъра.

Сега, ако отидете до сървъра на http://localhost: 3000 ще видите вашето приложение. Трябва да забележите лека промяна в съдържанието. Това показва, че процесът на инсталиране е успешен и Tailwind CSS е активен.

Използвайте Tailwind в проекта

След това нека тестваме CSS функциите на Tailwind, като приложим класове към вашия проект. Например, имате приложение с текст „Hello Tailwind“. Искате да му придадете червен цвят със светлосин фон.

Създавам Home.tsx файл, след което добавете следния код:

износпо подразбиранефункцияУ дома() {
връщане (
"bg-blue-300">
'text-red-900'>Здравей Tailwind CSS</h1>
 </body>
 );
} 

Сега, когато навигирате до браузъра, ще видите текста, променен на червен, а фонът е син.

Можете да изследвате други CSS функции на Tailwind, за да стилизирате други компоненти на вашето приложение. Условните модификатори ви позволяват да създавате реактивни състояния като задържане и фокусиране. Можете също така да персонализирате страниците си в тъмен и светъл режим според предпочитанията на потребителя.

Предимства от използването на Tailwind CSS

Създаден от Адам Уатан през 2017 г., Tailwind CSS се различава от другите CSS библиотеки по много начини. Има нулево време за изпълнение, което го прави светкавично бърз. И е лесен за инсталиране. Tailwind сканира всички HTML файлове и JavaScript компоненти за имена на класове във вашето приложение. След това генерира съответните стилове, които проектират елементите.

Tailwind CSS ви позволява да проектирате сложни компоненти от примитивни помощни програми. Можете да използвате повторно стилове в различни компоненти и да използвате модификатори, за да стилизирате адаптивни потребителски интерфейси. Използвайте стъпките тук, за да научите как да инсталирате и използвате CSS на Tailwind, за да персонализирате приложения, които отговарят на вашата марка.