Jak używać ułamków ukośnych w CSS Tailwind

W tym artykule wyjaśniono, jak używać ułamków ukośnych w Tailwind.

Jak używać ułamków ukośnych w CSS Tailwind?

Klasa ułamków przekątnych w Tailwind to predefiniowany wariant czcionki numerycznej, który zmniejsza licznik i mianownik i oddziela je ukośnikiem. Dzięki temu numer ułamkowy wydaje się odróżniać od reszty tekstu.

Składnia

Składnia użycia „ ułamki diagonalne ” przedstawia się następująco:

Jak widać z powyższej składni, programista musi zapewnić „ ułamki diagonalne ' w ' klasa ” atrybut elementu.

Jako praktyczny przykład wykorzystajmy klasę „ułamki diagonalne”. W poniższej demonstracji użytkownik może zobaczyć różnicę między ułamkami normalnymi i ułamkami ukośnymi:

Wyjaśnienie powyższego kodu jest następujące:

• „ div ” jest tworzony i dostarczany jako kolor tła przy użyciu „ bg-{kolor}-{liczba} ' klasa.
• Następnie tekst jest pisany dużą czcionką i wyrównywany do środka elementu za pomocą przycisku „ tekst-lg ' I ' centrum tekstowe odpowiednio „zajęcia”.
• Następnie dwa „

  tworzone są elementy, przy czym drugi jest opatrzony „ ułamki diagonalne ' klasa.

Wyjście:

Różnicę między ułamkiem diagonalnym a ułamkiem normalnym można wyraźnie zobaczyć na powyższym wyjściu.

Używanie klasy ułamków diagonalnych z punktami przerwania

Punkty przerwania są używane jako zapytania o media w Tailwind. Istnieje pięć domyślnych punktów przerwania o określonych minimalnych szerokościach. Tych punktów przerwania można używać z dowolną klasą w Tailwind w celu tworzenia responsywnych i dynamicznych układów projektu.

Aby skorzystać z opcji „ ułamki diagonalne ” z punktem przerwania w Tailwind, używana jest następująca składnia:

Poniższa tabela przedstawia minimalną szerokość dla różnych punktów przerwania w Tailwind:

Używajmy punktów przerwania z „ ułamki diagonalne ”, aby praktycznie zrozumieć ich zastosowanie:

W powyższym kodzie element div znajduje się w „ md:ułamki-przekątne ”, która zmieni czcionkę ułamków numerycznych, gdy „ md ” Osiągnięto punkt przerwania.

Wyjście

Jak widać na wynikach, liczby ułamkowe są oznaczone czcionką ułamkową ukośną, gdy „ md ” Osiągnięto punkt przerwania:

Używanie klasy ułamka diagonalnego ze stanami tylnego wiatru

Tailwind zapewnia domyślne „ stwierdza ”, aby zapewnić właściwości projektowe elementowi po uruchomieniu tego konkretnego stanu. Dzięki temu układ projektu jest bardziej atrakcyjny i dynamiczny. Aby użyć klasy „ułamki diagonalne” ze stanem w Tailwind, używana jest następująca składnia:

Domyślny stan udostępniany przez Tailwind jest następujący:

• Unosić się: Gdy użytkownik najedzie kursorem na element.
• Centrum: Gdy użytkownik skupia się na elemencie, przechodząc do niego.
• Aktywny: Gdy użytkownik aktywuje element poprzez kliknięcie na niego.
• Wyłączyć: Gdy użytkownik nie może aktywować elementu.

Poniższa demonstracja stanowi praktyczny przykład użycia „ ułamki diagonalne ”klasa z” unosić się ” stan w Tailwind:

„ div ” w powyższym kodzie jest dostarczany przez „ najedź kursorem:ułamki ukośne ”, która zmieni czcionkę normalną liczb ułamkowych na czcionkę ułamkową ukośną.

Wyjście

Jak widać na wynikach, czcionka numeryczna liczby ułamkowej zmienia się, gdy użytkownik najedzie na nią kursorem myszy:

Chodzi o użycie klasy ułamków diagonalnych w CSS Tailwind.

Wniosek

Aby użyć ułamków przekątnych w CSS Tailwind, użyj „ ułamek diagonalny ' klasa. Ta klasa oddzieli licznik i mianownik ukośnikiem i zmniejszy je. Użytkownicy mogą również używać klasy „ułamki diagonalne” z domyślnymi punktami przerwania i stanami w Tailwind, aby uczynić projekt bardziej dynamicznym. W tym artykule opisano procedurę używania ułamków przekątnych w Tailwind.