Таилвинд ЦСС је први услужни ЦСС оквир који омогућава програмерима да дизајнирају прилагођене веб компоненте без преласка на ЦСС датотеку. У овом водичу ћете научити како да инсталирате Таилвинд ЦСС у Реацт-у и како га можете користити да направите једноставну Реацт страницу.

Зашто користити Таилвинд ЦСС?

Већ их има много ЦСС оквири који поједностављују начин на који програмери дизајнирају веб странице. Па зашто би требало да користите Таилвинд ЦСС?

ЦСС оквири као што су Боотстрап и Фоундатион су оквири који имају своје мишљење, што значи да пружају програмерима унапред дефинисане компоненте које имају подразумеване стилове. Ово ограничава и прилагођавање и креативност, а на крају добијате веб странице које изгледају прилично генерично.

Таилвинд ЦСС, међутим, је оквир који је први услужни и који вам даје креативну контролу за креирање динамичких компоненти. И за разлику од Боотстрапа, можете лако прилагодити дизајн како желите.

Још једна предност коришћења Таилвинд ЦСС-а је та што ћете на крају имати малу величину ЦСС пакета јер уклања све неискоришћени ЦСС током процеса прављења (који се разликује од Боотстрап-а, пошто укључује све ЦСС датотеке у изградити).

Сазнајте више о разлике између Таилвинд ЦСС-а и Боотстрапа из нашег чланка на ову тему.

Недостаци коришћења Таилвинд ЦСС-а

Таилвинд ЦСС има стрму криву учења чак и за искусне програмере. Потребно је неко време да научите како да у потпуности користите услужне класе, а можда ћете морати често да се позивате на документацију. Међутим, након што се упознате са класама, биће вам лакше и брже у поређењу са обичним ЦСС-ом.

Већина програмера воли да прати принцип раздвајања брига тако да су ЦСС и ХТМЛ датотеке написане у различитим датотекама. Са Таилвинд ЦСС-ом, пишете ЦСС директно у ХТМЛ ознаци, што је за неке недостатак.

Чак и са овим недостацима, Таилвинд ЦСС је оквир који бисте требали озбиљно размотрити ако сте већ задовољни ЦСС-ом и желите брже да правите дизајн.

Почетак: Креирајте Реацт пројекат

Покрените следећу команду у терминалу да бисте поставили скелу а Реаговати апликација користећи цреате-реацт-апп.

нпк цреате-реацт-апп реацт-таилвинд

цреате-реацт-апп пружа једноставан начин за креирање Реацт апликације без конфигурисања алата за прављење као што су вебпацк, бабел или линтерс. То значи да ћете завршити са радним Реацт окружењем за неколико минута.

Горња команда креира нову фасциклу под називом реаговати-лећни ветар. Идите до фасцикле и отворите је користећи жељени уређивач текста.

цд реацт-таилвинд

Затим инсталирајте Таилвинд ЦСС и конфигуришите га да ради са Реацт апликацијом.

Користите Таилвинд ЦСС у Реацт-у

Инсталирајте Таилвинд ЦСС и његове зависности помоћу ове команде:

нпм инсталл таилвиндцсс постцсс аутопрефикер

ПостЦСС користи ЈаваСцрипт додатке да учини ЦСС компатибилним са већином претраживача. Он проверава прегледач у којем се апликација покреће и одређује полифиле потребне да би ваш ЦСС радио беспрекорно. Аутопрефикер је ПостЦСС додатак који користи вредности из цаниусе.цом да аутоматски додате префиксе добављача у ЦСС правила.

Иницијализујте Таилвинд ЦСС

Покренути таилвинд инит команда за генерисање Таилвинд ЦСС подразумеваних конфигурационих датотека.

нпк таилвиндцсс инит

Ово ствара таилвинд.цонфиг.јс у основној фасцикли која чува све Таилвинд-ове конфигурационе датотеке и садржи следеће:

модуле.екпортс = {
 садржај: [],
 тема: {
 проширити: {},
 },
 додаци: [],
}

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

Морате да кажете Таилвинд ЦСС-у датотеке које треба да провери да бисте видели које ЦСС класе се користе. Ово омогућава Таилвинду да идентификује и уклони неискоришћене класе и стога смањује величину генерисаног ЦСС-а.

Ин таилвинд.цонфиг.јс, додајте путање шаблона испод кључа садржаја.

модуле.екпортс = {
 садржај: [
 "./срц/**/*.{јс, јск, тс, тск}",
 ],
 тема: {
 проширити: {},
 },
 додаци: [],
}

Убаците Таилвинд ЦСС у Реацт

Следећи корак је да укључите Таилвинд ЦСС у апликацију користећи @ветар у леђа директиве.

Избришите све унутра индек.цсс и додајте следеће да бисте увезли основне стилове, компоненте и услужне програме.

@таилвинд басе;
@таилвинд компоненте;
@таилвинд утилитиес;

Коначно, уверите се индек.цсс се увози у индек.јс а Таилвинд ЦСС ће бити спреман за употребу.

Коришћење Таилвинд ЦСС-а за стилизовање Реацт компоненте

Направићете једноставну веб страницу испод и стилизовати је користећи Таилвиндове услужне класе.

Ова страница садржи два главна одељка: а трака за навигацију, и одељак херој (који има наслов и дугме).

Да бисте илустровали како Таилвинд ЦСС олакшава писање ЦСС-а, покушајте да стилизујете веб страницу користећи обичан ЦСС и Таилвинд ЦСС.

Започните тако што ћете променити Апп.јс у срц фолдер да бисте уклонили непотребан код.

увоз './Апп.цсс'
фунцтион Апп() {
 повратак (



 );
}
извоз подразумеване апликације;

Затим додајте садржај веб странице у Апп.јс.

импорт "./Апп.цсс";
фунцтион Апп() {
 повратак (







 Таилвинд ЦСС олакшава стилизовање Реацт компоненти!



Почети






 );
}

Да бисте користили обичан ЦСС, додајте ЦСС у Апп.цсс.

нав {
 дисплеј: флек;
 јустифи-цонтент: простор-између;
 паддинг: 16пк 36пк;
 боја: #000;
 бок-схадов: 0пк 2пк 5пк 0пк ргба (168, 168, 168, 0,75);
}
.лого {
 фонт-сизе: 18пк;
 фонт-веигхт: болд;
}
ул {
 стил листе: ниједан;
 дисплеј: инлине-флек;
}
ул ли {
 маргин-лефт: 16пк;
 курсор: показивач;
}
.јунак {
 дисплеј: флек;
 флек-дирецтион: колона;
 алигн-итемс: центар;
 маргин-топ: 64пк;
}
х1 {
 фонт-сизе: 36пк;
 тект-алигн: центар;
}
.бтн {
 бацкгроунд-цолор: #000000;
 боја: #ффф;
 паддинг: 10пк;
 ширина: фит-цонтент;
 маргин-топ: 36пк;
}

Са Таилвинд ЦСС-ом, не морате да пишете ЦСС правила за сваку класу. Уместо тога, користите услужне класе. Ово су класе обухваћене једним ЦСС својством. На пример, ако желите да креирате дугме са црном позадином и белом бојом текста, морате да користите бг-црна и текст-бело комуналне класе.

Апп.јс требало би да изгледа овако.

фунцтион Апп() {
 повратак (







 Таилвинд ЦСС олакшава стилизовање Реацт компоненти!




 Почети







 );
}

Не морате да увозите Апп.цсс пошто се стилови које генерише Таилвинд ЦСС чувају у индек.цсс које сте увезли индек.јс раније.

У поређењу са обичним ЦСС-ом, овај приступ резултира мање кода који је лако разумети.

Код у стилу са Таилвинд ЦСС

У овом чланку сте научили о Таилвинд ЦСС-у, његовим предностима, недостацима и како можете користити његове услужне класе у Реацт апликацијама. Осим часова, Таилвинд ЦСС нуди и друге додатне функције, укључујући могућност креирања прилагодљивих изгледа и компоненти за вишекратну употребу.

Али, као што смо раније споменули, Таилвинд је далеко од јединог ЦСС оквира на тржишту. Шта ћете користити за свој следећи пројекат?

Таилвинд ЦСС вс. Боотстрап: који је бољи оквир?

Када бирате ЦСС оквир, важно је пронаћи онај који испуњава ваше захтеве.

Реад Нект

О аутору