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

Защо да използвате Tailwind CSS?

Вече има много CSS рамки, които опростяват начина, по който разработчиците проектират уеб страници. И така, защо трябва да използвате Tailwind CSS?

CSS рамки като Bootstrap и Foundation са независими рамки, което означава, че предоставят на разработчиците предварително дефинирани компоненти, които имат стилове по подразбиране. Това ограничава както персонализирането, така и креативността и в крайна сметка получавате уебсайтове, които изглеждат доста общи.

Tailwind 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 проект

Изпълнете следната команда в терминала, за да поставите скеле a Реагирайте използване на приложението създаване-реагиране-приложение.

npx create-react-app react-tailwind

създаване-реагиране-приложение предоставя лесен начин за създаване на приложение React, без да конфигурирате инструменти за изграждане като webpack, babel или linters. Това означава, че в крайна сметка ще получите работеща React среда за минути.

Горната команда създава нова папка с име реагират-попътен вятър. Придвижете се до папката и я отворете с предпочитания от вас текстов редактор.

cd реакция-попътен вятър

След това инсталирайте Tailwind CSS и го конфигурирайте да работи с приложението React.

Използвайте Tailwind CSS в React

Инсталирайте Tailwind CSS и неговите зависимости с тази команда:

npm инсталира tailwindcss postcss autoprefixer

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

Инициализирайте Tailwind CSS

Изпълнете попътен вятър init команда за генериране на конфигурационни файлове по подразбиране на Tailwind CSS.

npx tailwindcss init

Това създава tailwind.config.js в основната папка, която съхранява всички конфигурационни файлове на Tailwind и съдържа следното:

module.exports = {
 съдържание: [],
 тема: {
 разшири: {},
 },
 плъгини: [],
}

Конфигуриране на пътя на шаблона

Трябва да кажете на Tailwind CSS файловете, които трябва да провери, за да види какви CSS класове се използват. Това позволява на Tailwind да идентифицира и премахва неизползваните класове и следователно намалява размера на генерирания CSS.

В tailwind.config.js, добавете пътищата на шаблона под ключа за съдържание.

module.exports = {
 съдържание: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 тема: {
 разшири: {},
 },
 плъгини: [],
}

Инжектирайте Tailwind CSS в React

Следващата стъпка е да включите Tailwind CSS в приложението чрез @попътен вятър директиви.

Изтрийте всичко вътре index.css и добавете следното, за да импортирате основните стилове, компоненти и помощни програми.

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

Накрая се уверете index.css се внася в index.js и Tailwind CSS ще бъде готов за използване.

Използване на Tailwind CSS за стилизиране на React компонент

Ще създадете простата уеб страница по-долу и ще я стилизирате с помощта на полезните класове на Tailwind.

Тази страница съдържа два основни раздела: a навигационна лента, и секцията герой (която има заглавие и бутон).

За да илюстрирате как Tailwind CSS улеснява писането на CSS, опитайте да стилизирате уеб страницата с помощта на обикновен CSS и Tailwind CSS.

Започнете, като промените App.js в src папка, за да премахнете ненужния код.

импортиране './App.css'
функция App() {
 връщане (



 );
}
експортиране на приложение по подразбиране;

След това добавете съдържанието на уеб страницата към App.js.

импортирайте "./App.css";
функция App() {
 връщане (







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



Първи стъпки






 );
}

За да използвате обикновен CSS, добавете CSS към App.css.

nav {
 дисплей: гъвкав;
 justify-content: пространство между;
 допълване: 16px 36px;
 цвят: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0.75);
}
.лого {
 размер на шрифта: 18px;
 шрифт-тегло: получер;
}
ул {
 списък-стил: няма;
 дисплей: inline-flex;
}
ul li {
 margin-left: 16px;
 курсор: показалец;
}
.hero {
 дисплей: гъвкав;
 flex-direction: колона;
 align-items: център;
 margin-top: 64px;
}
h1 {
 размер на шрифта: 36px;
 подравняване на текста: център;
}
.btn {
 цвят на фона: #000000;
 цвят: #fff;
 допълване: 10px;
 ширина: fit-content;
 margin-top: 36px;
}

С Tailwind CSS не е необходимо да пишете CSS правилата за всеки клас. Вместо това използвате помощни класове. Това са класове с обхват до едно свойство на CSS. Например, ако искате да създадете бутон с черен фон и бял цвят на текста, трябва да използвате бг-черен и текст-бял полезни класове.

App.js трябва да изглежда така.

функция App() {
 връщане (







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




 Първи стъпки







 );
}

Не е необходимо да импортирате App.css тъй като стиловете, генерирани от Tailwind CSS, се съхраняват в index.css в който сте импортирали index.js по-рано.

В сравнение с обикновения CSS, този подход води до по-малко код, който е лесен за разбиране.

Код в стил с Tailwind CSS

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

Но, както споменахме по-рано, Tailwind далеч не е единствената CSS рамка на пазара. Кое ще използвате за следващия си проект?

Tailwind CSS vs. Bootstrap: Коя е по-добра рамка?

При избора на CSS рамка е важно да намерите тази, която отговаря на вашите изисквания.

Прочетете Следващото

За автора