Ако желите да стилизујете своје апликације помоћу брзог, флексибилног и поузданог оквира, Таилвинд ЦСС је одлична опција. Таилвинд је ЦСС оквир који вам помаже да дизајнирате прилагођене веб компоненте. Можете дизајнирати компоненте без потребе да се пребацујете између ХТМЛ и ЦСС датотека.

За разлику од Боотстрапа, Таилвинд нема унапред дефинисане класе. Уместо тога, можете да прилагодите своје. Са Таилвинд-ом, можете да правите сложене компоненте са примитивним услужним програмима, функцијама и директивама.

Научите како да инсталирате и користите Таилвинд за креирање невероватних корисничких интерфејса у вашим Нект.јс пројектима.

Инсталирајте Таилвинд ЦСС у Нект.јс

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

Иди на Таилвинд ЦСС инсталација страна. Затим идите на Фрамеворк Гуидес

одељак и изаберите Нект.јс. Овај одељак садржи сва упутства која су вам потребна да бисте подесили Таилвинд у вашем Нект.јс пројекту.

Да бисте инсталирали Таилвинд преко нпм, ЈаваСцрипт менаџер пакета, покрените ове две терминалне команде:

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

Ове команде креирају две конфигурационе датотеке под називом таилвинд.цонфиг.јс и постцсс.цонфиг.јс у основној фасцикли пројекта. Ове датотеке указују на то да је ТаилвиндЦСС успешно инсталиран. Такође можете инсталирати Таилвинд ЦСС преко Таилвинд ЦЛИ или као ПостЦСС додатак.

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

Након инсталације, морате да конфигуришете путање шаблона дате у водичу за инсталацију до конфигурационе датотеке апликације. Додајте следећи код у таилвинд.цонфиг.јс фајл:

/** @тип {импорт('таилвиндцсс').Цонфиг}*/
модул.екпортс = {
 садржај: [ 
„./апп/**/*.{јс, тс, јск, тск}“,
„./пагес/**/*.{јс, тс, јск, тск}“,
„./цомпонентс/**/*.{јс, тс, јск, тск}“,
// Или ако користите `срц` директоријум: 
„./срц/**/*.{јс, тс, јск, тск}“,
 ],
 тема: { 
 проширити: {},
 },
 додаци: [],
}

Додајте Директиву о задњим ветровима у апликацију

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

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

Покрените процес изградње

Сада, на терминалу, покрените ЦЛИ алат са следећом командом:

нпм рун дев

Ова команда скенира ваше датотеке шаблона за класе и прави ваш ЦСС. Отвориће порт за преглед претраживача.

Сада, ако одете до сервера на http://localhost: 3000 видећете своју апликацију. Требало би да приметите малу промену у садржају. Ово указује да је процес инсталације успешан, а Таилвинд ЦСС је активан.

Користите Таилвинд у пројекту

Затим, хајде да тестирамо Таилвинд ЦСС функције применом класа на ваш пројекат. На пример, имате апликацију са текстом „Хелло Таилвинд“. Желите да му дате црвену боју са светло плавом позадином.

Створити Хоме.тск датотеку, а затим додајте следећи код:

извозУобичајенофункцијаКућа() {
повратак (
"бг-блуе-300">
'тект-ред-900'>Здраво Таилвинд ЦСС</h1>
 </body>
 );
} 

Сада, када одете до претраживача, видећете да је текст промењен у црвену, а позадина је плава.

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

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

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

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