A Tailwind egy CSS-keretrendszer, amely előre definiált értékeket kínál különféle tulajdonságokhoz, például színekhez, térközökhöz, betűméretekhez stb. Előfordulhat azonban, hogy a felhasználók olyan értékeket szeretnének használni, amelyek nem szerepelnek az alapértelmezett konfigurációban, például egyéni szín vagy egy meghatározott margó. Ebben a helyzetben tetszőleges értékeket használhatnak.

Ez a cikk ismerteti a tetszőleges értékek használatának módszerét a Tailwind CSS-ben.

Hogyan hasznosítsuk az önkényes értékeket a Tailwindben?

A tetszőleges értékek azok az egyéni értékek, amelyek közvetlenül a HTML osztály attribútumába írhatók anélkül, hogy meghatároznák őket a Tailwind konfigurációs fájlban. Előtagjuk szögletes zárójellel van ellátva, például [24px], [2.5rem] stb. A Tailwind tetszőleges értékeinek felhasználásához használjon szögletes zárójelet, és adjon meg bármilyen egyéni értéket a hasznossági osztályok dinamikus generálásához.

Tekintse meg az alábbi lépéseket a jobb megértés érdekében:

1. lépés: Használjon tetszőleges értékeket a HTML programban

Készítsen HTML programot, és használja a szögletes zárójelet bármilyen egyéni értékkel a kívánt osztályok létrehozásához. Használtuk például a „bg-[#e9e516]”, „w-[600px]”, „h-[400px]”, „p-[13px]”, és egyéb osztályok:

Itt:

• „bg-[#e9e516]” osztály a
  háttérszínét állítja be „#e9e516” (sárga).
• 'w-[600px]' osztály a
  szélességét 600 képpontra állítja.
• 'h-[400px]' osztály a 400 pixeles magasságot alkalmazza a
  elemre.
• „p-[13px]” osztály a
  kitöltését 13 képpontra állítja.
• „m-[19px]” osztály a
  margóját 19 képpontra állítja.

• „text-[30px]” osztály a

  elem betűméretét 30 képpontra állítja.

• 'szöveg-[#7405ab]' osztály a

  elem szövegszínét lilára állítja (#7405ab).

• „tracking-[0.5rem]” osztály a 0,5 rem betűközt alkalmazza a

  elemre.

2. lépés: Ellenőrizze a kimenetet

A tetszőleges értékek megfelelő működésének biztosításához tekintse meg a HTML weboldalt:

A fenti kimenet azt jelzi, hogy a tetszőleges értékek megfelelően működnek, ahogyan meghatározták őket.

Következtetés

A Tailwind tetszőleges értékeinek felhasználásához használjon szögletes zárójelet bármilyen egyéni értékkel a HTML programban az osztályok dinamikus generálásához. A felhasználók értéket használhatnak minden olyan tulajdonsághoz, amely elfogadja a numerikus vagy színértékeket, például a betűméretet, színt, szélességet, magasságot, margót, kitöltést stb.