Tailwind CSS on utiliidi esimene CSS-raamistik, mis võimaldab arendajatel kujundada kohandatud veebikomponente ilma CSS-failile lülitumata. Sellest õpetusest saate teada, kuidas installida Tailwind CSS-i Reacti ja kuidas saate seda kasutada lihtsa Reacti lehe koostamiseks.

Miks kasutada Tailwindi CSS-i?

Neid on juba palju CSS raamistikud, mis lihtsustavad arendajate veebilehtede kujundamist. Miks peaksite kasutama Tailwindi CSS-i?

CSS-i raamistikud, nagu Bootstrap ja Foundation, on arvamusega raamistikud, mis tähendab, et need pakuvad arendajatele vaikestiilidega eelnevalt määratletud komponente. See piirab nii kohandamist kui ka loovust ning lõpuks saate veebisaidid, mis näevad välja üsna üldised.

Tailtuule CSS, on aga utiliidipõhine raamistik, mis annab teile loomingulise kontrolli dünaamiliste komponentide loomiseks. Ja erinevalt Bootstrapist saate kujundusi hõlpsalt vastavalt soovile kohandada.

Teine Tailwind CSS-i kasutamise eelis on see, et teil on väike CSS-i komplekt, kuna see eemaldab kõik ehitamise ajal kasutamata CSS (mis erineb Bootstrapist, kuna sisaldab kõiki CSS-i faile ehitada).

Lisateavet erinevused Tailwind CSS-i ja Bootstrapi vahel meie selleteemalisest artiklist.

Tailwind CSS-i kasutamise puudused

Tailwind CSS-il on järsk õppimiskõver isegi kogenud arendajatele. Utiliidiklasside täieliku kasutamise õppimine võtab veidi aega ja võib-olla peate sageli dokumentatsioonile viitama. Kuid pärast klassidega tutvumist on see tavalise CSS-iga võrreldes lihtsam ja kiirem.

Enamikule arendajatele meeldib järgida probleemide eraldamise põhimõtet, nii et CSS- ja HTML-failid kirjutatakse erinevatesse failidesse. Tailwind CSS-iga kirjutate CSS-i otse HTML-i märgistusse – see on mõne jaoks puudus.

Isegi nende puudustega on Tailwind CSS raamistik, mida peaksite tõsiselt kaaluma, kui olete CSS-iga juba rahul ja soovite kujundusi kiiremini luua.

Alustamine: looge reageerimisprojekt

Käivitage terminalis järgmine käsk, et tellida a Reageerige rakendust kasutades loo-reageeri rakendus.

npx Create-React-app React-Tailwind

loo-reageeri rakendus pakub lihtsat viisi Reacti rakenduse loomiseks ilma ehitustööriistu, nagu veebipakett, babel või linter, konfigureerimata. See tähendab, et saate mõne minuti jooksul töötava Reacti keskkonna.

Ülaltoodud käsk loob uue kausta nimega reageerida-taganttuul. Liikuge kausta ja avage see eelistatud tekstiredaktoriga.

cd react-tailwind

Järgmisena installige Tailwind CSS ja konfigureerige see töötama rakendusega React.

Kasutage Reactis Tailwind CSS-i

Installige Tailwind CSS ja selle sõltuvused selle käsuga:

npm installige tailwindcss postcss automaatprefikser

PostCSS kasutab JavaScripti pluginaid, et muuta CSS enamiku brauseritega ühilduvaks. See kontrollib brauserit, milles rakendus töötab, ja määrab teie CSS-i sujuvaks toimimiseks vajalikud polütäited. Autoprefixer on PostCSS-i pistikprogramm, mis kasutab väärtusi alates caniuse.com et CSS-i reeglitele automaatselt lisada hankija eesliited.

Käivitage Tailwind CSS

Käivitage taganttuul init käsk Tailwind CSS-i vaikekonfiguratsioonifailide genereerimiseks.

npx tailwindcss init

See loob tailwind.config.js juurkaustas, mis salvestab kõik Tailwindi konfiguratsioonifailid ja sisaldab järgmist:

module.exports = {
 sisu: [],
 teema: {
 pikendada: {},
 },
 pluginad: [],
}

Konfigureerige malliteed

Peate ütlema Tailwind CSS-ile failid, mida ta peaks kontrollima, et näha, milliseid CSS-i klasse kasutatakse. See võimaldab Tailwindil tuvastada ja eemaldada kasutamata klassid ning vähendab seega loodud CSS-i suurust.

sisse tailwind.config.js, lisage malliteed sisuvõtme alla.

module.exports = {
 sisu: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 teema: {
 pikendada: {},
 },
 pluginad: [],
}

Sisesta Reactisse Tailwind CSS

Järgmine samm on Tailwind CSS-i kaasamine kasutatavasse rakendusse @tailtuul direktiivid.

Kustuta kõik sisse index.css ja lisage põhistiilide, komponentide ja utiliitide importimiseks järgmised andmed.

@tailwind base;
@tailwind komponendid;
@tailwind kommunaalteenused;

Lõpuks veenduge index.css imporditakse sisse index.js ja Tailwind CSS on kasutamiseks valmis.

Tailwind CSS-i kasutamine React-komponendi stiili kujundamiseks

Loote allpool oleva lihtsa veebilehe ja kujundate selle Tailwindi utiliidiklasside abil.

Sellel lehel on kaks peamist osa: a navigeerimisribaja kangelase sektsioon (millel on pealkiri ja nupp).

Et illustreerida, kuidas Tailwind CSS muudab CSS-i kirjutamise lihtsamaks, proovige kujundada veebileht tavalise CSS-i ja Tailwind CSS-i abil.

Alustamiseks muutke App.js aastal src kausta mittevajaliku koodi eemaldamiseks.

import './App.css'
function App() {
 tagasi (



 );
}
ekspordi vaikerakendus;

Järgmisena lisage veebilehe sisu App.js.

import "./App.css";
function App() {
 tagasi (







 Tailwind CSS muudab Reacti komponentide kujundamise lihtsamaks!



Alustama






 );
}

Tavalise CSS-i kasutamiseks lisage CSS-i App.css.

nav {
 ekraan: flex;
 õigusta-sisu: tühik-vahel;
 polsterdus: 16px 36px;
 värv: #000;
 kast-vari: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 fondi suurus: 18 pikslit;
 fondi kaal: paks;
}
ul {
 loendi stiil: puudub;
 ekraan: inline-flex;
}
ul li {
 veeris vasak: 16 pikslit;
 kursor: kursor;
}
.hero {
 ekraan: flex;
 paindesuund: veerg;
 joonda-elemendid: keskel;
 ülemine veeris: 64 pikslit;
}
h1 {
 fondi suurus: 36 pikslit;
 teksti joondamine: keskel;
}
.btn {
 taustavärv: #000000;
 värv: #fff;
 polster: 10px;
 laius: sobiv-sisu;
 ülemine veeris: 36 pikslit;
}

Tailwind CSS-iga ei pea te iga klassi jaoks CSS-i reegleid kirjutama. Selle asemel kasutate utiliidiklasse. Need on klassid, mis on hõlmatud ühele CSS-i atribuudile. Näiteks kui soovite luua musta tausta ja valge tekstivärviga nuppu, peate kasutama nuppu bg-must ja tekst-valge kommunaalklassid.

App.js peaks välja nägema selline.

function App() {
 tagasi (







 Tailwind CSS muudab Reacti komponentide kujundamise lihtsamaks!




 Alustama







 );
}

Te ei pea importima App.css kuna Tailwind CSS-i loodud stiilid on salvestatud index.css mille importisite index.js varem.

Võrreldes tavalise CSS-iga annab see lähenemisviis vähem hõlpsasti mõistetavat koodi.

Kood stiilis Tailwind CSS-iga

Sellest artiklist õppisite tundma Tailwind CSS-i, selle tugevusi, puudusi ning selle utiliidiklasse Reacti rakendustes. Lisaks klassidele pakub Tailwind CSS ka muid lisafunktsioone, sealhulgas võimalust luua reageerivaid paigutusi ja korduvkasutatavaid komponente.

Kuid nagu me varem mainisime, pole Tailwind kaugeltki ainus CSS-i raamistik turul. Millist te oma järgmise projekti jaoks kasutate?

Tailwind CSS vs. Bootstrap: milline on parem raamistik?

CSS-i raamistiku valimisel on oluline leida see, mis vastab teie nõuetele.

Loe edasi

Autori kohta