Jak skonfigurować ścieżki szablonów w Tailwind CSS

“ CSS wiatru w tył ” to dobrze znany wszechstronny framework CSS, który stylizuje zawartość HTML za pomocą wbudowanych i niestandardowych klas CSS. Przydatne jest również dostosowanie określonego szablonu do wymagań użytkownika. Cały proces wymaga skonfigurowania szablonów, w których użytkownik będzie korzystał z CSS Tailwind. Nie można zastosować CSS Tailwind, jeśli użytkownik nie skonfiguruje ścieżki szablonu. Tak więc konfiguracja ścieżek szablonów jest warunkiem wstępnym i obowiązkowym.

Ten post pokazuje procedurę konfigurowania ścieżek szablonów w CSS Tailwind.

Jak skonfigurować ścieżki szablonów w Tailwind CSS?

„ tailwind.config.js ” plik konfiguracyjny służy do konfiguracji ścieżek szablonu, w których użytkownik chce osadzić CSS Tailwind. Domyślnie nie jest obecny, ale można go utworzyć w projekcie za pomocą menedżera pakietów „npm”.

W tej sekcji przedstawiono kilka niezbędnych kroków w celu skonfigurowania ścieżek szablonów w pliku „tailwind.config.js”.

Notatka : Aby zaimplementować „Tailwind CSS”, najpierw zainstaluj „ Node.js ” aplikacja w twoim systemie przez podany link “ https://nodejs.org/en ”, aby wykonać polecenia.

Krok 1: Zainstaluj „TailwindCSS”
Najpierw utwórz nowy projekt o nazwie „Projekt1” i otwórz go w edytorze kodu. Teraz otwórz nowy terminal i zainstaluj „Tailwind CSS” za pomocą następującego polecenia:

npm install -D tailwindcss

W powyższym poleceniu „ np ” to menedżer pakietów węzłów, który instaluje „TailwindCSS” w następujący sposób:

Tutaj wynik pokazuje, że „Tailwind CSS” i jego pakiety zostały pomyślnie pobrane.

Krok 2: Utwórz plik konfiguracyjny Tailwind
Następnie utwórz plik konfiguracyjny CSS Tailwind „ tailwind.config.js ”, aby rozszerzyć jego funkcjonalność, taką jak określanie ścieżek szablonów HTML, klas zdefiniowanych przez użytkownika i wiele innych za pomocą tego polecenia:

npx tailwindcss init

Dane wyjściowe pokazują, że określony plik konfiguracyjny został utworzony. A teraz spójrz na „ tailwind.config.js ' plik:

Krok 3: Dodaj dyrektywy Tailwind do głównego pliku CSS
Teraz, aby dodać specjalną funkcjonalność do utworzonego projektu Tailwind, dodaj następujące trzy istniejące wcześniej dyrektywy Tailwind w głównym „ styl.css ' plik:

@podstawa tylnego wiatru;
komponenty @tailwind;
narzędzia @tailwind;

W powyższym bloku kodu:

baza : Jest to pierwsza warstwa „Tailwind CSS”, która domyślnie modyfikuje styl strony internetowej, np. kolor tła, kolor tekstu lub rodzinę czcionek.
składniki : Ta druga warstwa jest dostępna w klasie „kontener”, która dodaje szerokość zgodnie z rozmiarem przeglądarki. W jej sekcji użytkownik może dodawać stworzone przez siebie komponenty zewnętrzne.
media : Jest to trzecia warstwa, która sumuje prawie wszystkie klasy stylizacji, takie jak cienie, kolory, dodawanie, elastyczność i wiele innych klas.

Dyrektywy te można zobaczyć w następującym oknie:

Krok 4: Zbuduj CSS
Teraz zbuduj CSS za pomocą narzędzia Tailwind CLI, wykonując następujące polecenie. Przeskanuje wszystkie pliki szablonów i zbuduje CSS w „ dist/output.css ' plik:

npx tailwindcss -i . / styl .css -o . / dyst / wyjście.css --watch

Można zauważyć, że powyższe polecenie zostało wykonane pomyślnie. Teraz struktura plików „project1” wygląda następująco:

Krok 5: Utwórz szablon HTML i skonfiguruj jego ścieżkę
Utwórz szablon HTML, w którym użytkownik chce osadzić „Tailwind CSS”, a następnie skonfiguruj jego ścieżkę w „ tailwind.config.js ”. Najpierw spójrzmy na następujący szablon HTML „ indeks.html ”:

< głowa >
< połączyć href = '/dist/output.css' rel = „arkusz stylów” >
< / głowa >
< ciało >
< h2 klasa = „tekst-centralna czcionka-pogrubiony tekst-biały bg-pomarańczowy-500” >Witamy w Linuxhint!< / h2 >< br >
< h3 klasa = „tekst-centralna czcionka-pogrubiony tekst-niebieski-600 bg-różowy-400” >Pierwszy samouczek: framework CSS Tailwind.< / h3 >< br >
< P klasa = „tekst-centrum tekst-zielony-500” >Tailwind CSS to dobrze znany framework CSS, który pomaga w ustawianiu predefiniowanych klas CSS styl Twoje elementy HTML.< / P >
< / ciało >

W powyższych liniach kodu:

Sekcja „head” używa „ <łącze> ” tag do połączenia utworzonego/skompilowanego pliku CSS „ /dist/output.css ” z istniejącym plikiem HTML „ indeks.html ”.
Sekcja „treść” najpierw określa „
” tag, który definiuje pierwszy podtytuł przy użyciu klasy Tailwind „ Wyrównaj tekst ”, aby dostosować jego wyrównanie do „środka”, „ Grubość czcionki ”, aby „pogrubić” tekst, „ Kolor tekstu ”, aby dodać określony kolor, a przycisk „ Kolor tła ”, aby odpowiednio zastosować dany kolor tła.
Następnie „
” i „
Tagi ” używają również omówionych powyżej klas Tailwind do stylizowania ich zawartości.

Skonfiguruj ścieżkę szablonu HTML
Następnie otwórz „ tailwind.config.js ” i dodaj linki lub ścieżkę w sekcji „content” pliku szablonu HTML, np. „index.html”:

treść : [ './indeks.html' ]

Naciskać ' Ctrl+S ”, aby zapisać nowe zmiany.

Krok 6: Wykonaj kod HTML
Na koniec wykonaj kod HTML „index.html” na działającym serwerze i zobacz jego dane wyjściowe:

Wyjście

Jak widać, dane wyjściowe przedstawiają stylizowaną treść HTML za pomocą CSS Tailwind.

Wniosek

CSS Tailwind używa „ tailwind.config.js ” plik konfiguracyjny, aby skonfigurować utworzone ścieżki szablonów HTML. określa „ treść ”, która zawiera dokładną ścieżkę wszystkich szablonów HTML, pliki źródłowe zawierające nazwy klas Tailwind oraz komponenty JavaScript. Skanuje określony plik HTML, a następnie implementuje w jego treści CSS Tailwind. Ten post ilustruje pełną procedurę konfigurowania ścieżek szablonów w CSS Tailwind.

Jak skonfigurować ścieżki szablonów w Tailwind CSS