Tailwind to framework CSS, który oferuje zestaw predefiniowanych wartości dla różnych właściwości, takich jak kolory, odstępy, rozmiary czcionek itp. Czasami jednak użytkownicy mogą chcieć użyć wartości, której nie ma w domyślnej konfiguracji, np. kolor lub określony margines. W tej sytuacji mogą użyć dowolnych wartości.

W tym artykule wyjaśnimy metodę używania dowolnych wartości w CSS Tailwind.

Jak wykorzystać arbitralne wartości w Tailwind?

Wartości arbitralne to wartości niestandardowe, które można zapisać bezpośrednio w atrybucie HTML class bez definiowania ich w pliku konfiguracyjnym Tailwind. Są poprzedzone notacją nawiasów kwadratowych, np. [24px], [2.5rem] itd. Aby wykorzystać dowolne wartości w Tailwind, użyj notacji nawiasów kwadratowych i podaj dowolną wartość niestandardową, aby dynamicznie generować klasy narzędzi.

Zapoznaj się z poniższymi krokami, aby lepiej zrozumieć:

Krok 1: Użyj dowolnych wartości w programie HTML

Utwórz program HTML i użyj notacji nawiasów kwadratowych z dowolną niestandardową wartością, aby utworzyć żądane klasy. Na przykład wykorzystaliśmy tzw „bg-[#e9e516]”, „w-[600px]”, „h-[400px]”, „p-[13px]”, i inne klasy:

Tutaj:

• „bg-[#e9e516]” class ustawia kolor tła elementu
  na „#e9e516” (żółty).
• „w-[600px]” class ustawia szerokość elementu
  na 600 pikseli.
• „h-[400px]” class stosuje wysokość 400 pikseli do elementu
  .
• „p-[13px]” class ustawia dopełnienie elementu
  na 13 pikseli.
• „m-[19px]” class ustawia margines elementu
  na 19 pikseli.

• „tekst-[30px]” class ustawia rozmiar czcionki elementu

  na 30 pikseli.

• „tekst-[#7405ab]” class ustawia kolor tekstu elementu

  na fioletowy (#7405ab).

• „śledzenie-[0,5 rem]” class stosuje odstępy między literami do 0,5 rem do elementu

  .

Krok 2: Sprawdź dane wyjściowe

Aby upewnić się, że dowolne wartości działają poprawnie, wyświetl stronę HTML:

Powyższe dane wyjściowe wskazują, że dowolne wartości działają poprawnie, tak jak zostały zdefiniowane.

Wniosek

Aby wykorzystać dowolne wartości w Tailwind, użyj notacji w nawiasach kwadratowych z dowolną niestandardową wartością w programie HTML, aby dynamicznie generować klasy. Użytkownicy mogą używać wartości dla dowolnej właściwości, która akceptuje wartość liczbową lub kolor, taką jak rozmiar czcionki, kolor, szerokość, wysokość, margines, dopełnienie itp. W tym artykule wyjaśniono metodę używania dowolnych wartości w CSS Tailwind.