A Tailwind CSS az első olyan CSS-keretrendszer, amely lehetővé teszi a fejlesztők számára, hogy egyéni webes összetevőket tervezzenek CSS-fájlra váltás nélkül. Ebből az oktatóanyagból megtudhatja, hogyan telepítheti a Tailwind CSS-t a React alkalmazásban, és hogyan használhatja fel egy egyszerű React oldal létrehozására.

Miért érdemes Tailwind CSS-t használni?

Már nagyon sok van CSS keretrendszerek, amelyek leegyszerűsítik a fejlesztők weboldalak tervezését. Tehát miért érdemes Tailwind CSS-t használni?

A CSS-keretrendszerek, mint például a Bootstrap és a Foundation, véleményes keretrendszerek, ami azt jelenti, hogy előre meghatározott összetevőket biztosítanak a fejlesztőknek, amelyeknek alapértelmezett stílusuk van. Ez korlátozza mind a testreszabást, mind a kreativitást, és a végén olyan webhelyeket kap, amelyek meglehetősen általánosnak tűnnek.

Hátszél CSS, azonban egy segédprogram-első keretrendszer, amely kreatív irányítást biztosít a dinamikus összetevők létrehozásához. És a Bootstrap-pel ellentétben könnyen testreszabhatja a terveket, ahogy tetszik.

A Tailwind CSS használatának másik előnye, hogy kis CSS-csomagméretet kap, mivel eltávolítja az összes a felépítési folyamat során nem használt CSS (ami különbözik a Bootstrap-től, mivel tartalmazza az összes CSS fájlt épít).

Tudjon meg többet a különbségek a Tailwind CSS és a Bootstrap között a témában írt cikkünkből.

A Tailwind CSS használatának hátrányai

A Tailwind CSS még a tapasztalt fejlesztők számára is meredek tanulási görbével rendelkezik. Időbe telik, amíg megtanulod, hogyan kell teljes mértékben használni a segédprogram-osztályokat, és előfordulhat, hogy gyakran át kell olvasnod a dokumentációt. Az osztályok megismerése után azonban könnyebbnek és gyorsabbnak fogod találni a sima CSS-hez képest.

A legtöbb fejlesztő szereti követni az aggodalmak szétválasztásának elvét, vagyis a CSS- és HTML-fájlokat különböző fájlokban írják. A Tailwind CSS használatával a CSS-t közvetlenül a HTML-jelölésbe írja be – ez egyesek számára hátrány.

A Tailwind CSS még ezekkel a hátrányokkal is egy olyan keretrendszer, amelyet komolyan meg kell fontolnia, ha már kényelmes a CSS-szel, és gyorsabban szeretne terveket készíteni.

Első lépések: Hozzon létre egy React projektet

Futtassa a következő parancsot a terminálban az állvány a Reagál alkalmazás segítségével alkalmazás létrehozása-reagálása.

npx create-react-app react-tailwind

alkalmazás létrehozása-reagálása egyszerű módot kínál a React alkalmazás létrehozására az olyan összeállítási eszközök, mint a webpack, a babel vagy a Linters konfigurálása nélkül. Ez azt jelenti, hogy perceken belül működőképes React környezetet kap.

A fenti parancs egy új mappát hoz létre, melynek neve react-hátszél. Keresse meg a mappát, és nyissa meg a kívánt szövegszerkesztővel.

cd react-tailwind

Ezután telepítse a Tailwind CSS-t, és konfigurálja úgy, hogy működjön a React alkalmazással.

Használja a Tailwind CSS-t a Reactban

Telepítse a Tailwind CSS-t és függőségeit ezzel a paranccsal:

npm telepítse a tailwindcss postcss automatikus prefixert

PostCSS JavaScript beépülő modulokat használ, hogy a CSS-t kompatibilissé tegye a legtöbb böngészővel. Ellenőrzi, hogy az alkalmazás melyik böngészőben fut, és meghatározza a CSS zökkenőmentes működéséhez szükséges polikitöltéseket. Az Autoprefixer egy PostCSS beépülő modul, amely a következőtől származó értékeket használja caniuse.com a szállítói előtagok automatikus hozzáadásához a CSS-szabályokhoz.

Inicializálja a Tailwind CSS-t

Futtassa a hátszél init parancs a Tailwind CSS alapértelmezett konfigurációs fájlok létrehozásához.

npx tailwindcss init

Ez létrehozza tailwind.config.js a gyökérmappában, amely a Tailwind összes konfigurációs fájlját tárolja, és a következőket tartalmazza:

module.exports = {
 tartalom: [],
 téma: {
 kiterjeszt: {},
 },
 bővítmények: [],
}

Sablonútvonalak konfigurálása

Meg kell mondania a Tailwind CSS-nek, hogy milyen fájlokat kell ellenőriznie, hogy lássa, milyen CSS-osztályokat használ. Ez lehetővé teszi a Tailwind számára, hogy azonosítsa és eltávolítsa a nem használt osztályokat, és ezáltal csökkenti a generált CSS méretét.

Ban ben tailwind.config.js, adja hozzá a sablon elérési útjait a tartalomkulcs alá.

module.exports = {
 tartalom: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 téma: {
 kiterjeszt: {},
 },
 bővítmények: [],
}

Szúrja be a Tailwind CSS-t a Reactba

A következő lépés a Tailwind CSS felvétele az alkalmazásba @hátszél irányelveket.

Törölj ki mindent index.css és adja hozzá a következőket az alapstílusok, összetevők és segédprogramok importálásához.

@tailwind base;
@tailwind alkatrészek;
@tailwind utilities;

Végül győződjön meg róla index.css be van importálva index.js és a Tailwind CSS használatra kész lesz.

Tailwind CSS használata React komponens stílusának kialakításához

Létrehozza az alábbi egyszerű weboldalt, és stílust készít a Tailwind segédprogram osztályaival.

Ez az oldal két fő részből áll: a navigációs sáv, és a hős rész (amelynek van egy címsora és egy gombja).

Annak szemléltetésére, hogy a Tailwind CSS hogyan teszi könnyebbé a CSS írását, próbálja meg a weboldal stílusát egyszerű CSS és Tailwind CSS használatával.

Kezdje a módosításával App.js ban,-ben src mappát a szükségtelen kód eltávolításához.

"./App.css" importálása
function App() {
 Visszatérés (



 );
}
alapértelmezett alkalmazás exportálása;

Ezután adja hozzá a weboldal tartalmát App.js.

import "./App.css";
function App() {
 Visszatérés (







 A Tailwind CSS megkönnyíti a React összetevők stílusát!



Fogj neki






 );
}

Az egyszerű CSS használatához adja hozzá a CSS-t App.css.

nav {
 kijelző: flex;
 indokol-tartalom: szóköz-között;
 padding: 16px 36px;
 szín: # 000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 betűméret: 18 képpont;
 betűsúly: félkövér;
}
ul {
 lista-stílus: nincs;
 kijelző: inline-flex;
}
ul li {
 margó-bal: 16px;
 kurzor: pointer;
}
.hero {
 kijelző: flex;
 hajlítási irány: oszlop;
 align-ites: center;
 margó felső: 64 képpont;
}
h1 {
 betűméret: 36 képpont;
 szöveg igazítása: középre;
}
.btn {
 háttérszín: #000000;
 szín: #fff;
 padding: 10px;
 szélesség: illeszkedés-tartalom;
 margó felső: 36 képpont;
}

A Tailwind CSS használatával nem kell minden osztályhoz megírnia a CSS-szabályokat. Ehelyett hasznossági osztályokat használ. Ezek egyetlen CSS-tulajdonra ható osztályok. Ha például egy fekete hátterű és fehér szövegszínű gombot szeretne létrehozni, használja a bg-fekete és szöveg-fehér közüzemi osztályok.

App.js így kell kinéznie.

function App() {
 Visszatérés (







 A Tailwind CSS megkönnyíti a React összetevők stílusát!




 Fogj neki







 );
}

Nem kell importálnia App.css mivel a Tailwind CSS által generált stílusokat a rendszer tárolja index.css amibe importáltál index.js korábban.

A sima CSS-hez képest ez a megközelítés kevesebb, könnyen érthető kódot eredményez.

Kód stílusban Tailwind CSS-sel

Ebben a cikkben megismerte a Tailwind CSS-t, annak erősségeit, hátrányait, valamint azt, hogyan használhatja segédosztályait a React alkalmazásokban. Az osztályokon kívül a Tailwind CSS további kiegészítő funkciókat is kínál, beleértve az érzékeny elrendezések és újrafelhasználható összetevők létrehozásának lehetőségét.

De ahogy korábban említettük, a Tailwind messze nem az egyetlen CSS-keretrendszer a piacon. Melyiket fogod használni a következő projektedhez?

Tailwind CSS vs. Bootstrap: melyik a jobb keretrendszer?

A CSS-keretrendszer kiválasztásakor fontos megtalálni azt, amelyik megfelel az Ön követelményeinek.

Olvassa el a következőt

A szerzőről