Tailwind CSS je první nástroj CSS framework, který umožňuje vývojářům navrhovat vlastní webové komponenty bez přepínání na soubor CSS. V tomto tutoriálu se dozvíte, jak nainstalovat Tailwind CSS v Reactu a jak jej můžete použít k vytvoření jednoduché stránky React.

Proč používat Tailwind CSS?

Je jich už hodně CSS frameworky, které vývojářům zjednodušují návrh webových stránek. Proč byste tedy měli používat Tailwind CSS?

Rámce CSS, jako jsou Bootstrap a Foundation, jsou rámce s názorem, což znamená, že poskytují vývojářům předdefinované komponenty, které mají výchozí styly. To omezuje přizpůsobení i kreativitu a skončíte s weby, které vypadají spíše obecně.

Tailwind CSS, je však framework na prvním místě, který vám dává kreativní kontrolu při vytváření dynamických komponent. A na rozdíl od Bootstrapu si můžete návrhy snadno přizpůsobit, jak chcete.

Další výhodou použití Tailwind CSS je, že skončíte s malou velikostí balíčku CSS, protože odstraní všechny nepoužité CSS během procesu sestavování (což se liší od Bootstrap, protože zahrnuje všechny soubory CSS v stavět).

Zjistěte více o rozdíly mezi Tailwind CSS a Bootstrap z našeho článku na toto téma.

Nevýhody používání CSS Tailwind

Tailwind CSS má strmou křivku učení i pro zkušené vývojáře. Naučit se, jak plně používat pomocné třídy, nějakou dobu trvá a možná budete muset často nahlížet do dokumentace. Jakmile se však seznámíte s třídami, zjistíte, že je to jednodušší a rychlejší ve srovnání s prostým CSS.

Většina vývojářů se ráda řídí principem oddělení zájmů tak, že soubory CSS a HTML jsou zapsány v různých souborech. S Tailwind CSS zapisujete CSS přímo do značek HTML, což je pro někoho nevýhoda.

I přes tyto nevýhody je Tailwind CSS frameworkem, který byste měli vážně zvážit, pokud jste již s CSS spokojeni a chcete rychleji vytvářet návrhy.

Začínáme: Vytvořte projekt React

Spusťte v terminálu následující příkaz pro lešení a Reagovat pomocí aplikace create-react-app.

npx create-react-app reagovat-tailwind

create-react-app poskytuje snadný způsob, jak vytvořit aplikaci React bez konfigurace nástrojů pro vytváření, jako je webpack, babel nebo linters. To znamená, že během několika minut skončíte s funkčním prostředím React.

Výše uvedený příkaz vytvoří novou složku s názvem reagovat-zadní vítr. Přejděte do složky a otevřete ji pomocí preferovaného textového editoru.

cd reagovat-zadní vítr

Dále nainstalujte Tailwind CSS a nakonfigurujte jej tak, aby fungoval s aplikací React.

Použijte Tailwind CSS v Reactu

Nainstalujte Tailwind CSS a jeho závislosti pomocí tohoto příkazu:

npm nainstalovat autoprefixer tailwindcss postcss

PostCSS používá pluginy JavaScript, aby byly CSS kompatibilní s většinou prohlížečů. Zkontroluje prohlížeč, ve kterém aplikace běží, a určí polyfilly potřebné k bezproblémovému fungování vašeho CSS. Autoprefixer je plugin PostCSS, který používá hodnoty z caniuse.com pro automatické přidávání předpon dodavatele do pravidel CSS.

Inicializujte Tailwind CSS

Spusťte zadní vítr init příkaz ke generování výchozích konfiguračních souborů CSS Tailwind.

npx tailwindcss init

Toto vytváří tailwind.config.js v kořenové složce, kde jsou uloženy všechny konfigurační soubory Tailwind a obsahuje následující:

module.exports = {
 obsah: [],
 téma: {
 rozšířit: {},
 },
 pluginy: [],
}

Konfigurace cest šablony

Musíte sdělit Tailwind CSS soubory, které má zkontrolovat, abyste viděli, jaké třídy CSS se používají. To umožňuje Tailwindu identifikovat a odstranit nepoužívané třídy, a tím snížit velikost generovaného CSS.

v tailwind.config.js, přidejte cesty šablony pod klíč obsahu.

module.exports = {
 obsah: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 téma: {
 rozšířit: {},
 },
 pluginy: [],
}

Inject Tailwind CSS do React

Dalším krokem je zahrnout Tailwind CSS do aplikace pomocí @tailwind směrnice.

Smazat vše v index.css a přidejte následující pro import základních stylů, komponent a obslužných programů.

@základna zadního větru;
komponenty @tailwind;
@tailwind utility;

Nakonec se přesvědčte index.css se dováží v index.js a Tailwind CSS budou připraveny k použití.

Použití Tailwind CSS ke stylování komponenty React

Níže vytvoříte jednoduchou webovou stránku a upravíte ji pomocí tříd obslužných programů Tailwind.

Tato stránka obsahuje dvě hlavní části: a navigační lištaa sekce hrdiny (která má nadpis a tlačítko).

Chcete-li ilustrovat, jak Tailwind CSS usnadňuje psaní CSS, zkuste webovou stránku upravit pomocí jednoduchých CSS a Tailwind CSS.

Začněte úpravou App.js v src složku pro odstranění nepotřebného kódu.

import './App.css'
function App() {
 vrátit se (



 );
}
exportovat výchozí aplikaci;

Dále přidejte obsah webové stránky do App.js.

import "./App.css";
function App() {
 vrátit se (







 Tailwind CSS usnadňuje stylování komponent React!



Začít






 );
}

Chcete-li použít prostý CSS, přidejte CSS do App.css.

nav {
 displej: flex;
 justify-content: mezera-mezi;
 výplň: 16px 36px;
 barva: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 velikost písma: 18px;
 váha písma: tučné;
}
ul {
 styl seznamu: žádný;
 displej: inline-flex;
}
ul li {
 margin-left: 16px;
 kurzor: ukazatel;
}
.hero {
 displej: flex;
 směr ohybu: sloupec;
 align-items: center;
 margin-top: 64px;
}
h1 {
 font-size: 36px;
 text-align: center;
}
.btn {
 barva pozadí: #000000;
 barva: #fff;
 odsazení: 10px;
 šířka: fit-content;
 margin-top: 36px;
}

S Tailwind CSS nemusíte psát pravidla CSS pro každou třídu. Místo toho použijete pomocné třídy. Jedná se o třídy zaměřené na jedinou vlastnost CSS. Například, pokud chcete vytvořit tlačítko s černým pozadím a bílou barvou textu, musíte použít bg-černá a text-bílý užitkové třídy.

App.js by měl vypadat takto.

function App() {
 vrátit se (







 Tailwind CSS usnadňuje stylování komponent React!




 Začít







 );
}

Nemusíte importovat App.css protože styly generované Tailwind CSS jsou uloženy v index.css do kterého jste importovali index.js dříve.

Ve srovnání s prostým CSS má tento přístup za následek méně kódu, který je snadno srozumitelný.

Stylový kód s Tailwind CSS

V tomto článku jste se dozvěděli o CSS Tailwind, jeho silných a nevýhodných stránkách a o tom, jak můžete použít jeho třídy nástrojů v aplikacích React. Kromě tříd nabízí Tailwind CSS také další doplňkové funkce včetně schopnosti vytvářet responzivní rozvržení a opakovaně použitelné komponenty.

Ale jak jsme již zmínili, Tailwind není zdaleka jediným CSS frameworkem na trhu. Které použijete pro svůj další projekt?

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

Při výběru CSS frameworku je důležité najít ten, který splňuje vaše požadavky.

Přečtěte si další

O autorovi