Home-theater-designers
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.
MAKEUSEOF A NAP VIDEÓJA
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.
oké google lenne egy kérdésem
Telepítse a Tailwind CSS-t a Next.js fájlba
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:
D4CC874C158D9005DBCB6474723F8993EDC9E47Ezek 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 :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
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 components;
@tailwind utilities;
Futtassa az összeállítási folyamatot
Most a terminálon futtassa a CLI eszközt a következő paranccsal:
miért alszik tovább a számítógépem?
npm run 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:
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='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.
hallgat rád a telefonod
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.