Jeśli chcesz stylizować swoje aplikacje za pomocą szybkiego, elastycznego i niezawodnego środowiska, Tailwind CSS to świetna opcja. Tailwind to framework CSS, który pomaga projektować niestandardowe komponenty internetowe. Możesz projektować komponenty bez konieczności przełączania się między plikami HTML i CSS.

W przeciwieństwie do Bootstrap, Tailwind nie ma predefiniowanych klas. Zamiast tego możesz dostosować własne. Dzięki Tailwind możesz tworzyć złożone komponenty za pomocą prymitywnych narzędzi, funkcji i dyrektyw.

Dowiedz się, jak zainstalować Tailwind i używać go do tworzenia niesamowitych interfejsów użytkownika w projektach Next.js.

Zainstaluj CSS Tailwind w Next.js

Zacznij od zainstalowania Tailwind w aplikacji Next.js. Proces jest podobny do instalowanie Tailwind w aplikacji React, z niewielką różnicą w procesie konfiguracji.

Idź do Instalacja CSS Tailwind strona. Następnie przejdź do

Przewodniki ramowe sekcję i wybierz Następny.js. Ta sekcja zawiera wszystkie instrukcje potrzebne do skonfigurowania Tailwind w projekcie Next.js.

Aby zainstalować Tailwind przez npm, menedżer pakietów JavaScript, uruchom te dwa polecenia terminala:

npm install -D tailwindcss autoprefiks postcss
npx tailwindcss init -p

Te polecenia tworzą dwa pliki konfiguracyjne o nazwie tailwind.config.js I postcss.config.js w głównym folderze projektu. Te pliki wskazują, że TailwindCSS został pomyślnie zainstalowany. Możesz także zainstalować Tailwind CSS przez interfejs CLI Tailwind lub jako wtyczkę PostCSS.

Skonfiguruj szablony

Po instalacji musisz skonfigurować ścieżki szablonów podane w przewodniku instalacji do pliku konfiguracyjnego aplikacji. Dodaj następujący kod do pliku plik tailwind.config.js:

/** @typ {import('tailwindcss').Config}*/
moduł.eksport = {
 treść: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./komponenty/**/*.{js, ts, jsx, tsx}",
// Lub jeśli używasz katalogu `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 temat: { 
 rozszerzyć: {},
 },
 wtyczki: [],
}

Dodaj dyrektywę Tailwind do aplikacji

Następnie dodaj następujące dyrektywy Tailwind do pliku CSS aplikacji. To jest plik o nazwie global.css. Należy usunąć zawartość pliku global.css i dodać dyrektywy Tailwind.

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

Uruchom proces kompilacji

Teraz na terminalu uruchom narzędzie CLI za pomocą następującego polecenia:

npm uruchom dev

To polecenie skanuje pliki szablonów w poszukiwaniu klas i buduje CSS. Otworzy port, aby wyświetlić przeglądarkę.

Teraz, jeśli przejdziesz do serwera pod adresem http://localhost: 3000 zobaczysz swoją aplikację. Powinieneś zauważyć niewielką zmianę w treści. Oznacza to, że proces instalacji zakończył się sukcesem, a CSS Tailwind jest aktywny.

Użyj Tailwind w projekcie

Następnie przetestujmy funkcje Tailwind CSS, stosując klasy do twojego projektu. Na przykład masz aplikację z tekstem „Hello Tailwind”. Chcesz nadać mu czerwony kolor z jasnoniebieskim tłem.

Stwórz Strona główna.tsx plik, a następnie dodaj następujący kod:

eksportdomyślnyfunkcjonowaćDom() {
powrót (
"bg-niebieski-300">
„tekst-czerwony-900”>Cześć CSS Tailwind</h1>
 </body>
 );
} 

Teraz, gdy przejdziesz do przeglądarki, zobaczysz, że tekst zmienił się na czerwony, a tło jest niebieskie.

Możesz eksplorować inne funkcje CSS Tailwind, aby stylizować inne komponenty swojej aplikacji. Modyfikatory warunkowe umożliwiają tworzenie stanów reaktywnych, takich jak najechanie kursorem i skupienie. Możesz także dostosować swoje strony do trybu ciemnego i jasnego zgodnie z preferencjami użytkownika.

Zalety korzystania z CSS Tailwind

Stworzony przez Adama Wathana w 2017 roku Tailwind CSS różni się od innych bibliotek CSS na wiele sposobów. Ma zerowy czas pracy, co czyni go błyskawicznym. I jest łatwy w instalacji. Tailwind skanuje wszystkie pliki HTML i komponenty JavaScript w poszukiwaniu nazw klas w Twojej aplikacji. Następnie generuje odpowiednie style, które projektują elementy.

Tailwind CSS pozwala projektować złożone komponenty z prymitywnych narzędzi. Możesz ponownie używać stylów w różnych komponentach i używać modyfikatorów do stylizowania responsywnych interfejsów użytkownika. Wykonaj poniższe czynności, aby dowiedzieć się, jak zainstalować CSS Tailwind i używać go do dostosowywania aplikacji pasujących do Twojej marki.