Tailwind CSS yra pirmoji pagalbinė CSS sistema, leidžianti kūrėjams kurti pasirinktinius žiniatinklio komponentus neperjungiant į CSS failą. Šiame vadove sužinosite, kaip „React“ įdiegti „Tailwind CSS“ ir kaip galite jį naudoti kurdami paprastą „React“ puslapį.

Kodėl verta naudoti Tailwind CSS?

Jau yra daug CSS sistemos, kurios supaprastina kūrėjų tinklalapių kūrimą. Taigi kodėl turėtumėte naudoti Tailwind CSS?

CSS sistemos, pvz., „Bootstrap“ ir „Fondon“, yra sistemos, kurių nuomonė yra pagrįsta, o tai reiškia, kad jos kūrėjams suteikia iš anksto apibrėžtus komponentus, turinčius numatytuosius stilius. Tai apriboja pritaikymą ir kūrybiškumą, o jūs gaunate svetaines, kurios atrodo gana bendro pobūdžio.

Tailwind CSS, tačiau tai yra visų pirma naudingumo sistema, kuri suteikia jums kūrybiškumo valdymą kuriant dinaminius komponentus. Ir skirtingai nei „Bootstrap“, galite lengvai pritaikyti dizainą, kaip jums patinka.

Kitas Tailwind CSS naudojimo pranašumas yra tai, kad jūs gaunate mažą CSS paketo dydį, nes jis pašalina visus nenaudojamas CSS kūrimo proceso metu (kuris skiriasi nuo Bootstrap, nes apima visus CSS failus statyti).

Sužinokite daugiau apie skirtumai tarp Tailwind CSS ir Bootstrap iš mūsų straipsnio šia tema.

Tailwind CSS naudojimo trūkumai

Tailwind CSS turi staigią mokymosi kreivę net patyrusiems kūrėjams. Užtrunka šiek tiek laiko, kol išmoksite visapusiškai naudotis paslaugų klasėmis, todėl gali tekti dažnai peržiūrėti dokumentus. Tačiau susipažinę su klasėmis, tai bus lengviau ir greičiau, palyginti su paprastu CSS.

Dauguma kūrėjų mėgsta vadovautis rūpesčių atskyrimo principu, kad CSS ir HTML failai būtų įrašyti į skirtingus failus. Naudodami Tailwind CSS, CSS rašote tiesiai į HTML žymėjimą – kai kuriems tai yra trūkumas.

Net ir nepaisant šių trūkumų, „Tailwind CSS“ yra sistema, kurią turėtumėte rimtai apsvarstyti, jei jau esate patenkinti CSS ir norite greičiau kurti dizainus.

Darbo pradžia: sukurkite „React“ projektą

Paleiskite šią komandą terminale, kad pastoliai būtų a Reaguoti naudojant programą kurti-reaguoti-programėlę.

npx create-react-app react-tailwind

kurti-reaguoti-programėlę yra paprastas būdas sukurti „React“ programą nekonfigūruojant kūrimo įrankių, pvz., „Webpack“, „Babel“ ar „Linters“. Tai reiškia, kad per kelias minutes atsiras darbinė React aplinka.

Aukščiau pateikta komanda sukuria naują aplanką pavadinimu reaguoti-užpakalinis vėjas. Eikite į aplanką ir atidarykite jį naudodami pageidaujamą teksto rengyklę.

cd react-tailwind

Tada įdiekite „Tailwind CSS“ ir sukonfigūruokite jį, kad jis veiktų su „React“ programa.

Naudokite „Tailwind CSS“ programoje „React“.

Įdiekite Tailwind CSS ir jo priklausomybes naudodami šią komandą:

npm įdiegti tailwindcss postcss automatinį prefikserį

PostCSS naudoja JavaScript papildinius, kad CSS būtų suderinamas su dauguma naršyklių. Ji patikrina naršyklę, kurioje veikia programa, ir nustato polifilius, kurių reikia, kad CSS veiktų sklandžiai. „Autoprefixer“ yra „PostCSS“ papildinys, kuris naudoja reikšmes iš caniuse.com automatiškai įtraukti tiekėjo priešdėlius į CSS taisykles.

Inicijuoti Tailwind CSS

Paleiskite galinis vėjas init komandą, kad sukurtų Tailwind CSS numatytuosius konfigūracijos failus.

npx tailwindcss init

Tai sukuria tailwind.config.js šakniniame aplanke, kuriame saugomi visi „Tailwind“ konfigūracijos failai ir yra:

module.exports = {
 turinys: [],
 tema: {
 išplėsti: {},
 },
 papildiniai: [],
}

Konfigūruokite šablonų kelius

Turite nurodyti Tailwind CSS failus, kuriuos jis turėtų patikrinti, kad pamatytų, kokios CSS klasės naudojamos. Tai leidžia Tailwind nustatyti ir pašalinti nenaudojamas klases, todėl sumažėja sugeneruoto CSS dydis.

Į tailwind.config.js, pridėkite šablono kelius po turinio raktu.

module.exports = {
 turinys: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 išplėsti: {},
 },
 papildiniai: [],
}

Įveskite Tailwind CSS į React

Kitas žingsnis yra įtraukti Tailwind CSS į programą naudojant @tailwind direktyvas.

Ištrinkite viską index.css ir pridėkite toliau nurodytus elementus, kad importuotumėte pagrindinius stilius, komponentus ir priemones.

@tailwind bazė;
@tailwind komponentai;
@tailwind komunalinės paslaugos;

Galiausiai įsitikinkite index.css yra importuotas index.js ir Tailwind CSS bus paruoštas naudoti.

Tailwind CSS naudojimas React komponento stiliui sukurti

Toliau sukursite paprastą tinklalapį ir sukursite jo stilių naudodami Tailwind naudingumo klases.

Šiame puslapyje yra dvi pagrindinės dalys: a Naršymo juosta, ir herojaus skiltį (kurioje yra antraštė ir mygtukas).

Norėdami parodyti, kaip Tailwind CSS palengvina CSS rašymą, pabandykite sukurti tinklalapio stilių naudodami paprastą CSS ir Tailwind CSS.

Pradėkite modifikuodami App.js viduje src aplanką, kad pašalintumėte nereikalingą kodą.

importuoti „./App.css“
function App() {
 grįžti (



 );
}
eksportuoti numatytąją programą;

Tada pridėkite tinklalapio turinį App.js.

importuoti "./App.css";
function App() {
 grįžti (







 Tailwind CSS palengvina React komponentų stilių!



Pradėti






 );
}

Norėdami naudoti paprastą CSS, pridėkite CSS prie App.css.

nav {
 ekranas: lankstus;
 pateisinti-turinys: tarpas-tarp;
 pamušalas: 16px 36px;
 spalva: #000;
 langelis-šešėlis: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 šrifto dydis: 18 pikselių;
 šrifto svoris: paryškintas;
}
ul {
 sąrašo stilius: nėra;
 ekranas: inline-flex;
}
ul li {
 paraštė kairėje: 16 pikselių;
 žymeklis: rodyklė;
}
.herojus {
 ekranas: lankstus;
 lankstumo kryptis: stulpelis;
 sulyginti elementus: centre;
 paraštė viršuje: 64 pikseliai;
}
h1 {
 šrifto dydis: 36 pikseliai;
 teksto lygiavimas: centre;
}
.btn {
 fono spalva: #000000;
 spalva: #fff;
 pamušalas: 10px;
 plotis: tinka-turinys;
 paraštė viršuje: 36 pikseliai;
}

Naudojant Tailwind CSS, nereikia rašyti CSS taisyklių kiekvienai klasei. Vietoj to, jūs naudojate naudingumo klases. Tai klasės, apimančios vieną CSS nuosavybę. Pavyzdžiui, jei norite sukurti mygtuką su juodu fonu ir balta teksto spalva, turite naudoti bg-juoda ir tekstas-baltas komunalinių paslaugų klasės.

App.js turėtų atrodyti taip.

function App() {
 grįžti (







 Tailwind CSS palengvina React komponentų stilių!




 Pradėti







 );
}

Jums nereikia importuoti App.css nes Tailwind CSS sukurti stiliai yra saugomi index.css į kurią importavote index.js anksčiau.

Palyginti su paprastu CSS, šis metodas leidžia naudoti mažiau kodo, kurį lengva suprasti.

Kodas stiliaus su Tailwind CSS

Šiame straipsnyje sužinojote apie „Tailwind CSS“, jo pranašumus, trūkumus ir kaip galite naudoti jo naudingumo klases „React“ programose. Be klasių, „Tailwind CSS“ taip pat siūlo kitų papildomų funkcijų, įskaitant galimybę kurti reaguojančius išdėstymus ir daugkartinio naudojimo komponentus.

Tačiau, kaip minėjome anksčiau, „Tailwind“ toli gražu nėra vienintelė CSS sistema rinkoje. Kurį naudosite kitam savo projektui?

Tailwind CSS vs. „Bootstrap“: kuris yra geresnis pagrindas?

Renkantis CSS sistemą svarbu rasti tą, kuri atitinka jūsų reikalavimus.

Skaitykite toliau

Apie autorių