Tailwind CSS je prvý nástroj CSS framework, ktorý umožňuje vývojárom navrhovať vlastné webové komponenty bez prepínania na súbor CSS. V tomto návode sa naučíte, ako nainštalovať Tailwind CSS v Reacte a ako ho môžete použiť na vytvorenie jednoduchej stránky React.

Prečo používať štýl CSS Tailwind?

Je ich už veľa CSS frameworky, ktoré zjednodušujú spôsob, akým vývojári navrhujú webové stránky. Prečo by ste teda mali používať CSS Tailwind?

Rámce CSS, ako sú Bootstrap a Foundation, sú rámce s názorom, čo znamená, že poskytujú vývojárom preddefinované komponenty, ktoré majú predvolené štýly. To obmedzuje prispôsobenie aj kreativitu a skončíte s webovými stránkami, ktoré vyzerajú dosť všeobecne.

Tailwind CSS, je však nástrojom na prvom mieste, ktorý vám dáva kreatívnu kontrolu na vytváranie dynamických komponentov. A na rozdiel od Bootstrapu si môžete jednoducho prispôsobiť dizajn, ako chcete.

Ďalšou výhodou používania Tailwind CSS je, že skončíte s malou veľkosťou balíka CSS, pretože odstráni všetky nepoužité CSS počas procesu zostavovania (čo sa líši od Bootstrap, pretože obsahuje všetky súbory CSS v stavať).

Zistite viac o rozdiely medzi Tailwind CSS a Bootstrap z nášho článku na túto tému.

Nevýhody používania Tailwind CSS

Tailwind CSS má strmú krivku učenia aj pre skúsených vývojárov. Naučiť sa, ako plne používať pomocné triedy, nejaký čas trvá a možno budete musieť často nazerať do dokumentácie. Po oboznámení sa s triedami to však zistíte jednoduchšie a rýchlejšie v porovnaní s obyčajným CSS.

Väčšina vývojárov sa rada riadi princípom oddelenia záujmov tak, že súbory CSS a HTML sú napísané v rôznych súboroch. S Tailwind CSS píšete CSS priamo v značke HTML, čo je pre niektorých nevýhoda.

Aj s týmito nevýhodami je Tailwind CSS rámec, ktorý by ste mali vážne zvážiť, ak už máte skúsenosti s CSS a chcete rýchlejšie vytvárať návrhy.

Začíname: Vytvorte projekt React

Spustite nasledujúci príkaz v termináli na lešenie a Reagovať pomocou aplikácie create-react-app.

npx create-react-app response-tailwind

create-react-app poskytuje jednoduchý spôsob, ako vytvoriť aplikáciu React bez konfigurácie nástrojov na zostavovanie, ako sú webpack, babel alebo linters. To znamená, že v priebehu niekoľkých minút skončíte s funkčným prostredím React.

Vyššie uvedený príkaz vytvorí nový priečinok s názvom reagovať-zadný vietor. Prejdite do priečinka a otvorte ho pomocou preferovaného textového editora.

cd reagovať-zadný vietor

Ďalej nainštalujte Tailwind CSS a nakonfigurujte ho tak, aby fungoval s aplikáciou React.

Použite Tailwind CSS v React

Nainštalujte Tailwind CSS a jeho závislosti pomocou tohto príkazu:

npm nainštalovať autoprefixer tailwindcss postcss

PostCSS používa JavaScript pluginy na zabezpečenie kompatibility CSS s väčšinou prehliadačov. Kontroluje prehliadač, v ktorom je aplikácia spustená, a určuje polyfilly potrebné na bezproblémové fungovanie CSS. Autoprefixer je doplnok PostCSS, ktorý používa hodnoty z caniuse.com automaticky pridávať predpony dodávateľov do pravidiel CSS.

Inicializujte štýl CSS Tailwind

Spustite zadný vietor init príkaz na vygenerovanie predvolených konfiguračných súborov CSS Tailwind.

npx tailwindcss init

Toto vytvára tailwind.config.js v koreňovom priečinku, v ktorom sú uložené všetky konfiguračné súbory Tailwind a obsahuje nasledovné:

module.exports = {
 obsah: [],
 téma: {
 predĺžiť: {},
 },
 pluginy: [],
}

Nakonfigurujte cesty k šablóne

Musíte povedať Tailwind CSS o súboroch, ktoré má skontrolovať, aby ste videli, aké triedy CSS sa používajú. To umožňuje Tailwindu identifikovať a odstraňovať nepoužívané triedy, a preto znižuje veľkosť generovaného CSS.

In tailwind.config.js, pridajte cesty šablóny pod kľúč obsahu.

module.exports = {
 obsah: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 téma: {
 predĺžiť: {},
 },
 pluginy: [],
}

Inject Tailwind CSS do React

Ďalším krokom je zahrnutie CSS Tailwind do aplikácie pomocou @tailwind smernice.

Vymazať všetko v index.css a pridajte nasledujúce na import základných štýlov, komponentov a pomôcok.

@základňa zadného vetra;
@zadný vietor komponenty;
@tailwind utility;

Nakoniec sa presvedčte index.css sa dováža v index.js a Tailwind CSS budú pripravené na použitie.

Použitie Tailwind CSS na úpravu štýlu komponentu React

Nižšie vytvoríte jednoduchú webovú stránku a upravíte ju pomocou tried nástrojov Tailwind.

Táto stránka obsahuje dve hlavné časti: a navigačná lištaa sekciu hrdinu (ktorá má nadpis a tlačidlo).

Na ilustráciu toho, ako Tailwind CSS uľahčuje písanie CSS, skúste upraviť štýl webovej stránky pomocou jednoduchého CSS a Tailwind CSS.

Začnite úpravou súboru App.js v src priečinok na odstránenie nepotrebného kódu.

importovať „./App.css“
function App() {
 vrátiť (



 );
}
exportovať predvolenú aplikáciu;

Potom pridajte obsah webovej stránky do App.js.

importovať "./App.css";
function App() {
 vrátiť (







 Tailwind CSS uľahčuje štýlovanie komponentov React!



Začať






 );
}

Ak chcete použiť obyčajný CSS, pridajte CSS do App.css.

navigácia {
 displej: flex;
 justify-content: medzera-medzi;
 výplň: 16px 36px;
 farba: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 veľkosť písma: 18px;
 váha písma: tučné;
}
ul {
 štýl zoznamu: žiadny;
 displej: inline-flex;
}
ul li {
 ľavý okraj: 16px;
 kurzor: ukazovateľ;
}
.hero {
 displej: flex;
 smer ohybu: stĺpec;
 align-items: center;
 margin-top: 64px;
}
h1 {
 veľkosť písma: 36px;
 text-align: center;
}
.btn {
 farba pozadia: #000000;
 farba: #fff;
 výplň: 10px;
 šírka: fit-content;
 margin-top: 36px;
}

S Tailwind CSS nemusíte písať pravidlá CSS pre každú triedu. Namiesto toho používate pomocné triedy. Toto sú triedy s rozsahom pre jednu vlastnosť CSS. Napríklad, ak chcete vytvoriť tlačidlo s čiernym pozadím a bielou farbou textu, musíte použiť bg-black a text-biely úžitkové triedy.

App.js by mal vyzerať takto.

function App() {
 vrátiť (







 Tailwind CSS uľahčuje štýlovanie komponentov React!




 Začať







 );
}

Nemusíte importovať App.css pretože štýly generované Tailwind CSS sú uložené v index.css do ktorých ste importovali index.js skôr.

V porovnaní s obyčajným CSS má tento prístup za následok menej kódu, ktorý je ľahko pochopiteľný.

Kódujte štýlovo s Tailwind CSS

V tomto článku ste sa dozvedeli o Tailwind CSS, jeho silných stránkach, nevýhodách a o tom, ako môžete použiť jeho triedy nástrojov v aplikáciách React. Okrem tried ponúka Tailwind CSS aj ďalšie dodatočné funkcie vrátane možnosti vytvárať responzívne rozloženia a opakovane použiteľné komponenty.

Ale, ako sme už spomenuli, Tailwind nie je ani zďaleka jediný rámec CSS na trhu. Ktoré použijete pre svoj ďalší projekt?

Tailwind CSS vs. Bootstrap: Ktorý rámec je lepší?

Pri výbere CSS frameworku je dôležité nájsť ten, ktorý vyhovuje vašim požiadavkám.

Prečítajte si ďalej

O autorovi