Jak korzystać z CSS Tailwind do szybkiego tworzenia odlotowych stron internetowych?

W miarę postępów jako programista jest bardziej prawdopodobne, że będziesz korzystać z technologii, które pomogą Ci zrobić więcej, pisząc mniej kodu. Solidny framework frontendowy, taki jak Tailwind CSS, jest jednym ze sposobów, aby to osiągnąć.

W tym artykule poznamy Tailwind CSS — platformę CSS, która pomaga w tworzeniu i projektowaniu stron internetowych. Zaczniemy od wyjaśnienia, jak zainstalować i zintegrować CSS Tailwind w projekcie, zapoznać się z praktycznymi aplikacjami, a także jak tworzyć niestandardowe style i wtyczki.

Podekscytowany? Zaczynajmy!

Co to jest CSS Tailwind?

Tailwind CSS to opracowana z myślą o narzędziach platforma CSS (kaskadowe arkusze stylów) ze wstępnie zdefiniowanymi klasami, których można używać do tworzenia i projektowania stron internetowych bezpośrednio w znacznikach. Pozwala pisać CSS w HTML w postaci predefiniowanych klas.

Zdefiniujemy, czym jest framework i co rozumiemy przez „narzędzie CSS na pierwszym miejscu”, aby pomóc Ci lepiej zrozumieć, o co chodzi w CSS Tailwind.

Co to jest framework?

W ogólnym ujęciu programistycznym framework to narzędzie, które zapewnia wielokrotnego użytku i gotowe komponenty zbudowane z funkcji już istniejącego narzędzia. Ogólnym celem tworzenia frameworków jest przyspieszenie rozwoju poprzez wykonanie mniejszej ilości pracy.

Teraz, gdy ustaliliśmy znaczenie struktury, powinno pomóc Ci zrozumieć, że Tailwind CSS to narzędzie oparte na funkcjach CSS. Wszystkie funkcjonalności frameworka pochodzą ze stylów CSS skomponowanych jako klasy.

Co to jest podstawowa struktura CSS?

Kiedy mówimy CSS na pierwszym miejscu, odnosimy się do klas w naszym znaczniku (HTML) z predefiniowanymi funkcjonalnościami. Oznacza to, że wystarczy napisać klasę z dołączonymi do niej predefiniowanymi stylami, a te style zostaną zastosowane do elementu.

W przypadku, gdy pracujesz z waniliowym CSS (CSS bez żadnego frameworka ani biblioteki), najpierw nadasz elementowi nazwę klasy, a następnie dołączysz do tej klasy różne właściwości i wartości, które z kolei zastosują stylizację do Twojego elementu .

Pokażemy Ci przykład. Tutaj utworzymy przycisk z zaokrąglonymi rogami i tekstem „Kliknij mnie”. Tak będzie wyglądał przycisk:

Najpierw zrobimy to za pomocą waniliowego CSS, a następnie użyjemy klas narzędziowych dostępnych w Tailwind CSS.

Z waniliowym CSS

 <button class="btn">Click me</button>

Dodaliśmy tagi przycisków do klasy btn , które będą stylizowane za pomocą zewnętrznego arkusza stylów. To jest:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Z CSS Tailwind

 <button class="bg-black p-2 rounded">Click me</button>

To wszystko jest wymagane, aby osiągnąć ten sam efekt, co w przykładzie z waniliowym CSS. Nie utworzono zewnętrznego arkusza stylów, w którym musisz wpisać style, ponieważ każda nazwa klasy, której użyliśmy, ma już predefiniowany styl.

Wymagania wstępne dotyczące korzystania z CSS Tailwind

Przed użyciem Tailwind CSS należy spełnić pewne wymagania wstępne, aby móc bezproblemowo korzystać z funkcji platformy. Oto kilka z nich:

• Dobra znajomość HTML, jego struktury i sposobu działania
• Solidne podstawy w CSS — zapytania o media, flexbox i system grid

Gdzie można używać CSS Tailwind?

Możesz używać CSS Tailwind we frontendowych projektach internetowych, w tym frameworkach JavaScript, takich jak React.js, Next.js, Laravel, Vite, Gatsby itp.

Plusy i minusy Tailwind CSS

Oto niektóre zalety korzystania z CSS Tailwind:

1. Szybszy proces rozwoju
2. Pomaga w ćwiczeniu CSS, ponieważ narzędzia są podobne
3. Wszystkie narzędzia i komponenty można łatwo dostosować
4. Całkowity rozmiar pliku do produkcji jest zwykle mały
5. Łatwy do nauczenia, jeśli znasz już CSS
6. Dobra dokumentacja do nauki

Niektóre wady korzystania z CSS Tailwind obejmują:

1. Twoje znaczniki mogą wyglądać na niezorganizowane w przypadku dużych projektów, ponieważ wszystkie style znajdują się w plikach HTML.
2. Nie jest łatwo się nauczyć, jeśli nie rozumiesz dobrze CSS.
3. Jesteś zmuszony do zbudowania wszystkiego od podstaw, w tym elementów wejściowych. Po zainstalowaniu Tailwind CSS usuwa wszystkie domyślne style CSS.
4. CSS Tailwind nie jest najlepszą opcją, jeśli chcesz zminimalizować czas spędzony na rozwijaniu frontendu swojej witryny i skupiając się głównie na logice backendu.

Kiedy używać CSS Tailwind

CSS Tailwind najlepiej nadaje się do przyspieszenia procesu programowania poprzez pisanie mniejszej ilości kodu. Jest wyposażony w system projektowania, który pomaga zachować spójność różnych wymagań projektowych, takich jak dopełnienie, odstępy i tak dalej; dzięki temu nie musisz się martwić o tworzenie swoich systemów projektowych.

Możesz również użyć CSS Tailwind, jeśli chcesz korzystać z frameworka, który można łatwo konfigurować, ponieważ nie zmusza Cię do korzystania z komponentów (pasków nawigacyjnych, przycisków, formularzy itp.) w ten sam sposób przez cały czas; możesz wybrać, jak powinny wyglądać twoje komponenty. Ale nigdy nie powinieneś używać Tailwind, jeśli nie nauczyłeś się i nie przećwiczyłeś CSS.

Podobieństwa i różnice między CSS Tailwind a innymi frameworkami CSS

Oto kilka podobieństw:

1. Pomagają szybciej wykonać pracę.
2. Pochodzą z predefiniowanymi klasami.
3. Zostały zbudowane na zasadach CSS.
4. Oba są łatwe do nauczenia i używania dzięki praktycznej znajomości CSS.

Przyjrzyjmy się teraz niektórym różnicom:

1. Tailwind różni się od większości frameworków, ponieważ musisz tworzyć swoje komponenty. Na przykład Bootstrap zawiera komponenty, takie jak paski nawigacyjne, przyciski itd., ale w Tailwind musisz to wszystko zbudować samodzielnie.
2. Niektóre frameworki, takie jak Bootstrap, nie są łatwe do dostosowania, więc jesteś zmuszony do korzystania z ich wzorców projektowych. W Tailwind kontrolujesz przepływ wszystkiego.
3. Do korzystania z Tailwind wymagana jest dogłębna znajomość CSS. Pisanie nazw klas nie wystarczy, ponieważ musisz połączyć je tak, jakbyś pisał waniliowy CSS, aby osiągnąć ten sam wynik. Wszystko, co musisz wiedzieć w większości innych frameworków, to jaki komponent zostanie zbudowany, gdy użyjesz nazwy klasy.

Jak zacząć korzystać z CSS Tailwind

Przed zainstalowaniem Tailwind CSS i zintegrowaniem go z projektem upewnij się, że:

1. Masz zainstalowany Node.js na swoim komputerze, aby korzystać z menedżera pakietów Node (npm) w terminalu.
2. Twój projekt jest skonfigurowany z utworzonymi plikami.

Tak wygląda w tej chwili nasza struktura projektu:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Następnie uruchom terminal dla swojego projektu i uruchom następujące polecenia:

 npm install -D tailwindcss

Powyższe polecenie zainstaluje strukturę CSS Tailwind jako zależność. Następnie wygeneruj plik tailwind.config.js, uruchamiając poniższe polecenie:

 npm install -D tailwindcss

Plik tailwind.config.js będzie pusty po utworzeniu, więc musimy dodać kilka wierszy kodu:

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

Ścieżki plików podane w tablicy zawartości umożliwią Tailwindowi wyczyszczenie/usunięcie wszelkich nieużywanych stylów w czasie kompilacji.

Następną rzeczą do zrobienia jest dodanie dyrektyw „@tailwind” do pliku CSS w folderze src — w tym miejscu Tailwind generuje dla Ciebie wszystkie predefiniowane style narzędzi:

 @tailwind base; @tailwind components; @tailwind utilities;

Ostatnią rzeczą do zrobienia jest rozpoczęcie procesu budowania poprzez uruchomienie tego polecenia w terminalu:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

W powyższym kodzie informujemy Tailwind, że naszym plikiem wejściowym jest arkusz stylów w folderze src i że wszystkie użyte style muszą być wbudowane w plik wyjściowy w folderze publicznym. --watch pozwala Tailwind obserwować plik pod kątem zmian w automatycznym procesie kompilacji; pominięcie go oznacza, że ​​musimy uruchamiać ten skrypt za każdym razem, gdy chcemy zbudować nasz kod i zobaczyć pożądane dane wyjściowe.

Korzystanie z CSS Tailwind

Teraz, gdy zainstalowaliśmy i skonfigurowaliśmy CSS Tailwind dla naszego projektu, zobaczmy kilka przykładów, aby w pełni zrozumieć jego zastosowanie.

Przykład Flexbox

Aby użyć flex w Tailwind CSS, musisz dodać klasę flex, a następnie kierunek elementów flex:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Użycie funkcji flex-row-reverse odwróci kolejność, w jakiej pojawiają się przyciski.

flex-col układa je jeden nad drugim. Oto przykład:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Podobnie jak w poprzednim przykładzie, flex-col-reverse odwraca kolejność.

Przykład siatki

Przy określaniu kolumn i wierszy w układzie siatki stosujemy inne podejście, przekazując liczbę, która określi, jak elementy zajmą dostępną przestrzeń:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

Zabarwienie

Tailwind ma wiele predefiniowanych kolorów. Każdy kolor ma zestaw różnych wariacji, przy czym najjaśniejsza wariacja to 50, a najciemniejsza to 900.

Oto zdjęcie wielu kolorów i ich kodów szesnastkowych HTML, aby to zilustrować

Podamy przykład, jak możesz to zrobić, używając czerwonego koloru powyżej, aby nadać elementowi przycisku kolor tła:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Ta składnia jest taka sama dla wszystkich kolorów w Tailwind z wyjątkiem czerni i bieli, które zapisuje się w ten sam sposób, ale bez użycia liczb: bg-black i bg-white .

Aby dodać kolor tekstu, użyj klasy text-{color} :

 <p class="text-yellow-600">Hello World</p>

Wyściółka

Tailwind ma już system projektowania, który pomoże Ci zachować spójną skalę we wszystkich projektach. Wszystko, co musisz wiedzieć, to składnia stosowania każdego narzędzia.

Poniżej znajdują się narzędzia do dodawania wypełnienia do twoich elementów:

• p oznacza wypełnienie w całym elemencie.
• py oznacza padding padding-top i padding-bottom.
• px oznacza padding-left i padding-right.
• pt oznacza padding-top.
• pr oznacza dopełnienie w prawo.
• pb oznacza padding-bottom.
• pl oznacza dopełnienie-lewo

Aby zastosować je do swoich elementów, musisz użyć odpowiednich liczb dostarczonych przez Tailwind — nieco podobnych do liczb reprezentujących warianty kolorystyczne w ostatniej sekcji. Oto, co mamy na myśli:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

Margines

Predefiniowane narzędzia do wypełniania i marginesu są bardzo podobne. Musisz zamienić p na m :

• m
• my
• mx
• mt
• mr
• mb
• ml

Jak utworzyć wtyczkę CSS Tailwind?

Mimo że Tailwind CSS zawiera wiele narzędzi i systemów projektowych, które zostały już dla Ciebie stworzone, nadal możliwe jest, że masz określoną funkcję, którą chcesz dodać, aby rozszerzyć możliwości korzystania z Tailwind. CSS Tailwind pozwala nam to zrobić, tworząc wtyczkę.

Ubrudźmy sobie ręce, tworząc wtyczkę, która dodaje kolor aqua i narzędzie do obracania, które obraca element 150 na osi X. Utworzymy te narzędzia w pliku tailwind.config.js przy użyciu odrobiny JavaScriptu.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Rozłóżmy to teraz. Pierwszą rzeczą, którą zrobiliśmy, było zaimportowanie funkcji wtyczki Tailwind:

 const plugin = require("tailwindcss/plugin");

Następnie przystąpiliśmy do tworzenia naszych wtyczek w tablicy wtyczek:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Po utworzeniu wtyczki może być konieczne ponowne uruchomienie skryptu kompilacji.

Teraz, gdy wtyczki są gotowe, możemy je przetestować:

 <button class="bg-aqua rotate-150deg">Click me</button>

Jeśli zrobiłeś wszystko dobrze, powinieneś mieć przycisk w kolorze aqua z tekstem obróconym do 150 na osi X.

Streszczenie

Frameworki są nieocenioną opcją, jeśli chodzi o przyspieszenie przepływu pracy. Pomagają budować dobrze wyglądające i profesjonalne strony internetowe przy zachowaniu spójności w projekcie. Tailwind CSS udostępnia wiele klas CSS, które pozwalają na przekazywanie narzędzi, które pomogą Ci przenieść projektowanie i programowanie stron internetowych na wyższy poziom.

Z tego artykułu dowiedzieliśmy się, czym jest CSS Tailwind i co sprawia, że ​​jest to framework. Następnie przyjrzeliśmy się procesowi instalacji i zobaczyliśmy kilka przykładów, które pokazały, jak możemy tworzyć nasze niestandardowe wtyczki, aby rozszerzyć istniejącą funkcjonalność.

Jeśli udało Ci się dotrwać do tego momentu, masz teraz podstawową, ale solidną wiedzę na temat działania Tailwind. Aby jednak lepiej posługiwać się takim frameworkiem zorientowanym na użyteczność, musisz dalej ćwiczyć i poszerzać swoją wiedzę na temat CSS, jeśli nie masz jeszcze solidnych podstaw.

Czy w przeszłości używałeś CSS Tailwind lub innej struktury CSS? Podziel się swoimi przemyśleniami w sekcji komentarzy!