Ha alkalmazásait gyors, rugalmas és megbízható keretrendszerrel szeretné stílusossá tenni, a Tailwind CSS nagyszerű lehetőség. A Tailwind egy CSS-keretrendszer, amely segít egyedi webkomponensek tervezésében. Úgy tervezhet összetevőket, hogy nem kell oda-vissza váltania a HTML- és CSS-fájlok között.

A Bootstrap-pel ellentétben a Tailwind nem rendelkezik előre meghatározott osztályokkal. Ehelyett testreszabhatja a sajátját. A Tailwind segítségével összetett összetevőket hozhat létre primitív segédprogramokkal, függvényekkel és direktívákkal.

Tanulja meg, hogyan telepítheti és használhatja a Tailwind alkalmazást, amellyel lenyűgöző felhasználói felületeket hozhat létre Next.js projektjeiben.

Telepítse a Tailwind CSS-t a Next.js-be

Kezdje a Tailwind telepítésével egy Next.js alkalmazásba. A folyamat hasonló a a Tailwind telepítése egy React alkalmazásba, egy kis eltéréssel a konfigurációs folyamatban.

Menj a Tailwind CSS telepítés oldalon. Ezután menjen a Keret-útmutatók szakaszt, és válassza ki Next.js. Ez a szakasz tartalmazza a Tailwind Next.js projektben történő beállításához szükséges összes utasítást.

A Tailwind telepítéséhez a következőn keresztül npm, a JavaScript csomagkezelő, futtassa ezt a két terminálparancsot:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Ezek a parancsok két nevű konfigurációs fájlt hoznak létre tailwind.config.js és postcss.config.js a gyökérprojekt mappában. Ezek a fájlok azt jelzik, hogy a TailwindCSS telepítése sikeres volt. A Tailwind CSS-t a Tailwind CLI-n keresztül vagy PostCSS-bővítményként is telepítheti.

Sablonok konfigurálása

A telepítés után konfigurálnia kell az alkalmazás konfigurációs fájljának telepítési útmutatójában megadott sablonútvonalakat. Adja hozzá a következő kódot a tailwind.config.js fájl:

/** @típus {import('tailwindcss').Config}*/
modul.exports = {
 tartalom: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Vagy ha `src` könyvtárat használ: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 téma: { 
 kiterjeszt: {},
 },
 bővítmények: [],
}

Adja hozzá a Tailwind Direktívát az alkalmazáshoz

Ezután adja hozzá a következő Tailwind direktívákat az alkalmazás CSS-fájljához. Ez a nevű fájl global.css. Törölje a global.css fájl tartalmát, és adja hozzá a Tailwind direktívákat.

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

Futtassa az összeállítási folyamatot

Most a terminálon futtassa a CLI eszközt a következő paranccsal:

npm futás dev

Ez a parancs megkeresi a sablonfájlokat osztályokért, és létrehozza a CSS-t. Megnyílik egy port, ahol megtekintheti a böngészőt.

Most, ha a címen található szerverre navigál http://localhost: 3000 látni fogja az alkalmazást. Kisebb változást kell észrevennie a tartalomban. Ez azt jelzi, hogy a telepítési folyamat sikeres volt, és a Tailwind CSS él.

Használja a Tailwind funkciót a projektben

Ezután teszteljük a Tailwind CSS funkcióit osztályok alkalmazásával a projektben. Például van egy alkalmazásod a „Hello Tailwind” szöveggel. Piros színt szeretne adni világoskék háttérrel.

Hozzon létre egy Home.tsx fájlt, majd adja hozzá a következő kódot:

exportalapértelmezettfunkcióitthon() {
Visszatérés (
"bg-blue-300">
"text-red-900">Hello Tailwind CSS</h1>
 </body>
 );
} 

Most, amikor navigál a böngészőbe, látni fogja, hogy a szöveg pirosra vált, a háttér pedig kék.

Fedezzen fel más Tailwind CSS-funkciókat, hogy stílust alakítson ki az alkalmazás egyéb összetevőiből. A feltételes módosítók lehetővé teszik olyan reaktív állapotok létrehozását, mint a lebegtetés és a fókusz. Az oldalakat a felhasználó preferenciái szerint sötét és világos módra is szabhatja.

A Tailwind CSS használatának előnyei

Az Adam Wathan által 2017-ben készített Tailwind CSS sok tekintetben különbözik a többi CSS-könyvtártól. Üzemideje nulla, így villámgyors. És könnyen telepíthető. A Tailwind minden HTML-fájlt és JavaScript-összetevőt megvizsgál az alkalmazás osztályneveinek keresésére. Ezután létrehozza a megfelelő stílusokat, amelyek az elemeket tervezik.

A Tailwind CSS lehetővé teszi összetett összetevők tervezését primitív segédprogramokból. A stílusokat újra felhasználhatja az összetevők között, és módosítókat használhat a reszponzív felhasználói felületek stílusához. Az itt található lépések segítségével megtudhatja, hogyan telepítheti és használhatja a Tailwind CSS-t a márkájának megfelelő alkalmazások testreszabásához.