Tailwind CSS je prvi pomožni okvir CSS, ki razvijalcem omogoča oblikovanje spletnih komponent po meri, ne da bi preklopili na datoteko CSS. V tej vadnici se boste naučili, kako namestiti Tailwind CSS v React in kako ga lahko uporabite za izdelavo preproste strani React.

Zakaj uporabljati Tailwind CSS?

Veliko jih je že CSS ogrodja, ki poenostavljajo, kako razvijalci oblikujejo spletne strani. Zakaj bi torej morali uporabljati Tailwind CSS?

Okvirja CSS, kot sta Bootstrap in Foundation, so samozavestna okvirja, kar pomeni, da razvijalcem zagotavljajo vnaprej določene komponente, ki imajo privzete sloge. To omejuje tako prilagajanje kot ustvarjalnost, na koncu pa dobite spletna mesta, ki so videti precej generična.

Tailwind CSS, vendar je okvir, ki je v prvi vrsti uporabni, ki vam omogoča ustvarjalni nadzor za ustvarjanje dinamičnih komponent. In za razliko od Bootstrapa, lahko preprosto prilagodite načrte, kot želite.

Druga prednost uporabe Tailwind CSS je, da na koncu dobite majhno velikost paketa CSS, saj odstrani vse neuporabljen CSS med postopkom gradnje (kar se razlikuje od Bootstrapa, saj vključuje vse datoteke CSS v zgraditi).

Izvedite več o razlike med Tailwind CSS in Bootstrapom iz našega članka na to temo.

Slabosti uporabe Tailwind CSS

Tailwind CSS ima strmo krivuljo učenja tudi za izkušene razvijalce. Traja nekaj časa, da se naučite v celoti uporabljati pomožne razrede in morda se boste morali pogosto sklicevati na dokumentacijo. Ko pa se seznanite z razredi, vam bo v primerjavi z navadnim CSS lažje in hitreje.

Večina razvijalcev rada sledi načelu ločevanja pomislekov, tako da sta datoteki CSS in HTML napisani v različnih datotekah. S Tailwind CSS pišete CSS neposredno v oznaki HTML, kar je za nekatere pomanjkljivost.

Tudi s temi pomanjkljivostmi je Tailwind CSS okvir, o katerem bi morali resno razmisliti, če vam je CSS že prijeten in želite hitreje graditi zasnove.

Kako začeti: ustvarite projekt React

Zaženite naslednji ukaz v terminalu za oder a Reagirajte uporabo aplikacije ustvari-reagiraj-aplikacijo.

npx create-react-app react-tailwind

ustvari-reagiraj-aplikacijo ponuja preprost način za ustvarjanje aplikacije React brez konfiguriranja orodij za gradnjo, kot so webpack, babel ali linters. To pomeni, da boste v nekaj minutah končali z delovnim okoljem React.

Zgornji ukaz ustvari novo mapo z imenom reagirati-veter. Pomaknite se do mape in jo odprite z želenim urejevalnikom besedil.

cd react-tailwind

Nato namestite Tailwind CSS in ga konfigurirajte za delo z aplikacijo React.

Uporabite Tailwind CSS v Reactu

Namestite Tailwind CSS in njegove odvisnosti s tem ukazom:

npm install tailwindcss postcss autoprefixer

PostCSS uporablja vtičnike JavaScript, da je CSS združljiv z večino brskalnikov. Preveri brskalnik, v katerem se aplikacija izvaja, in določi polifile, ki so potrebna za nemoteno delovanje vašega CSS. Autoprefixer je vtičnik PostCSS, ki uporablja vrednosti iz caniuse.com za samodejno dodajanje predpon ponudnika pravilom CSS.

Inicializirajte Tailwind CSS

Zaženite hrbtni veter init ukaz za ustvarjanje privzetih konfiguracijskih datotek Tailwind CSS.

npx tailwindcss init

To ustvarja tailwind.config.js v korenski mapi, ki shranjuje vse konfiguracijske datoteke Tailwinda in vsebuje naslednje:

module.exports = {
 vsebina: [],
 tema: {
 razširiti: {},
 },
 vtičniki: [],
}

Konfigurirajte poti predlog

Tailwind CSS morate povedati datoteke, ki jih mora preveriti, da vidi, kateri razredi CSS se uporabljajo. To omogoča Tailwindu, da prepozna in odstrani neuporabljene razrede in tako zmanjša velikost ustvarjenega CSS-ja.

V tailwind.config.js, dodajte poti predloge pod ključ vsebine.

module.exports = {
 vsebina: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 razširiti: {},
 },
 vtičniki: [],
}

Vnesite Tailwind CSS v React

Naslednji korak je vključitev Tailwind CSS v aplikacijo z uporabo @rebni veter direktive.

Izbriši vse v index.css in dodajte naslednje za uvoz osnovnih slogov, komponent in pripomočkov.

@osnova za zadnji veter;
@komponente zadnjega vetra;
@tailwind pripomočki;

Končno se prepričajte index.css je uvožen v index.js in Tailwind CSS bo pripravljen za uporabo.

Uporaba Tailwind CSS za oblikovanje React komponente

Ustvarili boste preprosto spletno stran spodaj in jo oblikovali z uporabo Tailwindovih uporabnih razredov.

Ta stran vsebuje dva glavna razdelka: a navigacijsko vrsticoin razdelek junakov (ki ima naslov in gumb).

Če želite ponazoriti, kako Tailwind CSS olajša pisanje CSS, poskusite oblikovati spletno stran z navadnim CSS in Tailwind CSS.

Začnite tako, da spremenite App.js v src mapo, da odstranite nepotrebno kodo.

uvoz './App.css'
funkcija App() {
 vrnitev (



 );
}
izvoz privzete aplikacije;

Nato dodajte vsebino spletne strani v App.js.

uvoz "./App.css";
funkcija App() {
 vrnitev (







 Tailwind CSS olajša oblikovanje komponent React!



Začeti






 );
}

Če želite uporabiti navaden CSS, dodajte CSS v App.css.

nav {
 zaslon: flex;
 justify-content: prostor-med;
 padding: 16px 36px;
 barva: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 velikost pisave: 18px;
 teža pisave: krepko;
}
ul {
 slog seznama: brez;
 zaslon: inline-flex;
}
ul li {
 rob-levo: 16px;
 kazalec: kazalec;
}
.hero {
 zaslon: flex;
 flex-direction: stolpec;
 align-items: center;
 rob-vrh: 64px;
}
h1 {
 velikost pisave: 36px;
 poravnava besedila: središče;
}
.btn {
 barva ozadja: #000000;
 barva: #fff;
 padding: 10px;
 širina: fit-content;
 rob-vrh: 36px;
}

S Tailwind CSS vam ni treba pisati pravil CSS za vsak razred. Namesto tega uporabite razrede uporabnosti. To so razredi, omejeni na eno lastnost CSS. Na primer, če želite ustvariti gumb s črnim ozadjem in belo barvo besedila, morate uporabiti bg-črna in besedilo-belo uporabni razredi.

App.js bi moral izgledati takole.

funkcija App() {
 vrnitev (







 Tailwind CSS olajša oblikovanje komponent React!




 Začeti







 );
}

Ni vam treba uvoziti App.css saj so slogi, ki jih ustvari Tailwind CSS, shranjeni v index.css v katerega ste uvozili index.js prej.

V primerjavi z navadnim CSS ima ta pristop manj kode, ki je lahko razumljiva.

Koda v slogu s Tailwind CSS

V tem članku ste izvedeli za Tailwind CSS, njegove prednosti, slabosti in kako lahko uporabite njegove uporabne razrede v aplikacijah React. Poleg razredov Tailwind CSS ponuja tudi druge dodatne funkcije, vključno z možnostjo ustvarjanja odzivnih postavitev in komponent za večkratno uporabo.

Toda, kot smo že omenili, Tailwind še zdaleč ni edini okvir CSS na trgu. Katerega boste uporabili za svoj naslednji projekt?

Tailwind CSS vs. Bootstrap: Kateri je boljši okvir?

Pri izbiri ogrodja CSS je pomembno najti tisto, ki ustreza vašim zahtevam.

Preberite Naprej

O avtorju