Ez a bejegyzés bemutatja a sablon elérési útjainak konfigurálási eljárását a Tailwind CSS-ben.
Hogyan konfigurálhat sablon útvonalakat a Tailwind CSS-ben?
A ' tailwind.config.js ” konfigurációs fájl a sablon elérési útjainak konfigurálására szolgál, amelyekbe a felhasználó be szeretné ágyazni a Tailwind CSS-t. Alapértelmezés szerint nincs jelen, de létrehozható a projektben az „npm” csomagkezelő segítségével.
Ez a szakasz néhány alapvető lépést hajt végre a „tailwind.config.js” fájl sablonútvonalainak konfigurálásához.
jegyzet : A „Tailwind CSS” megvalósításához először telepítse a „ Node.js ' alkalmazás a rendszerében a megadott linken keresztül ' https://nodejs.org/en ” a parancsok végrehajtásához.
1. lépés: A „TailwindCSS” telepítése
Először hozzon létre egy új projektet „Project1” néven, és nyissa meg a kódszerkesztőben. Most nyissa meg az új terminált, és telepítse a „Tailwind CSS”-t a következő paranccsal:
npm install -D tailwindcss
A fenti parancsban: „ npm ” a csomóponti csomagkezelő, amely telepíti a „TailwindCSS”-t, az alábbiak szerint:
Itt a kimenet azt mutatja, hogy a „Tailwind CSS” és csomagjai sikeresen letöltöttek.
2. lépés: Hozza létre a Tailwind konfigurációs fájlt
Ezután hozza létre a Tailwind CSS konfigurációs fájlt ' tailwind.config.js ', hogy kibővítse funkcionalitását, például megadja a HTML-sablon útvonalait, a felhasználó által definiált osztályokat és sok mást ezzel a paranccsal:
A kimenet azt mutatja, hogy a megadott konfigurációs fájl létrejött. Most nézze meg a „ tailwind.config.js ” fájl:
3. lépés: Adja hozzá a Tailwind-irányelveket a fő CSS-fájlhoz
Most, hogy különleges funkciókat adjon a létrehozott Tailwind projekthez, adja hozzá a következő három, már meglévő tailwind direktívát a fő ' stílus.css ” fájl:
@tailwind alkatrészek;
@tailwind utilities;
A fenti kódblokkban:
- bázis : Ez a „Tailwind CSS” első rétege, amely alapértelmezés szerint módosítja a weboldal stílusát, például a háttérszínt, a szövegszínt vagy a betűtípuscsaládot.
- alkatrészek : Ez a második réteg a „tároló” osztályon belül érhető el, amely a böngésző méretének megfelelően növeli a szélességet. Ennek szekciójában a felhasználó saját készítésű külső komponenseket adhat hozzá.
- segédprogramok : Ez a harmadik réteg, amely szinte az összes stílusosztályt összeadja, mint például az árnyékok, a színek, a hozzáadás, a hajlítás és sok más osztály.
Ezek az irányelvek a következő ablakban láthatók:
4. lépés: A CSS létrehozása
Most készítse el a CSS-t a Tailwind CLI eszközzel a következő parancs végrehajtásával. Átvizsgálja az összes sablonfájlt, és létrehozza a CSS-t a „ dist/output.css ” fájl:
Megfigyelhető, hogy a fenti parancs sikeresen végrehajtásra került. Most a „projekt1” fájlszerkezete így néz ki:
5. lépés: Hozzon létre egy HTML-sablont, és konfigurálja az elérési utat
Hozzon létre egy HTML-sablont, amelybe a felhasználó be szeretné ágyazni a „Tailwind CSS-t”, majd konfigurálja az elérési utat a „ tailwind.config.js ”. Először nézzük meg a következő HTML-sablont ' index.html ”:
< link href = '/dist/output.css' rel = 'stíluslap' >
< / fej >
< test >
< h2 osztály = 'text-center font-bold text-white bg-orange-500' >Üdvözöljük a Linuxhintben!< / h2 >< br >
< h3 osztály = 'text-center font-bold text-blue-600 bg-pink-400' >Első oktatóanyag: Tailwind CSS Framework.< / h3 >< br >
< p osztály = 'text-center text-green-500' >A Tailwind CSS egy jól ismert CSS keretrendszer, amely segít az előre meghatározott CSS osztályok beállításában stílus a HTML-elemeidet.< / p >
< / test >
A fenti kódsorokban:
- A „fej” rész a „ ' címke a létrehozott/lefordított CSS-fájl összekapcsolásához ' /dist/output.css ' a meglévő HTML fájllal ' index.html ”.
- A „body” szakasz először meghatározza a „ ' címke, amely a Tailwind osztály használatával határozza meg az első alcímet ' Szöveg igazítás ', hogy állítsa be az igazítást a 'középen', ' Betűsúly ' a szöveg 'félkövérre szedéséhez', ' Szöveg szín ' a megadott szín hozzáadásához, és a ' Háttérszín ” az adott háttérszín alkalmazásához, ill.
- Ezután a „ ' és a ' ” címkék szintén a fent tárgyalt Tailwind osztályokat használják tartalmuk stílusához.
Konfigurálja a HTML-sablon elérési útját
Ezután nyissa meg a „ tailwind.config.js ', és adja hozzá a hivatkozásokat vagy elérési utat a HTML-sablonfájl 'content' részéhez, azaz: 'index.html':
Nyomja meg ' Ctrl+S ” az új módosítások mentéséhez.
6. lépés: Futtassa a HTML kódot
Végül futtassa az „index.html” HTML kódot az élő szerveren, és nézze meg a kimenetét:
Kimenet
Amint látható, a kimenet a stílusos HTML tartalmat jeleníti meg a Tailwind CSS segítségével.
Következtetés
A Tailwind CSS a „ tailwind.config.js ” konfigurációs fájlt a létrehozott HTML-sablon elérési útjainak konfigurálásához. Meghatározza a „ tartalom ” szakasz, amely tartalmazza az összes HTML-sablon pontos elérési útját, a Tailwind osztályneveket tartalmazó forrásfájlokat és a JavaScript-összetevőket. Ellenőrzi a megadott HTML-fájlt, majd a Tailwind CSS-t implementálja a tartalmába. Ez a bejegyzés bemutatta a Tailwind CSS-ben a sablon elérési útjainak konfigurálásának teljes eljárását.