Tailwind CSS to framework, który umożliwia tworzenie layoutu strony z poziomu template HTML, bez konieczności tworzenia arkuszy stylów.
W przeciwieństwie do takich narzędzi jak Bootstrap, opisuje on element wizualnie, a nie funkcjonalnie. W przypadku Bootstrap dla przycisku użyjesz klasy btn, która opisuje padding, border-radius i pozostałe aspekty wizualne Twojego elementu. Dla Tailwind CSS musisz znaleźć klasy CSS odpowiadające za poszczególne własności wizualne, np. px-1 py-0.5 rounded. Można by nawet stwierdzić, że Tailwindowi bliżej jest do inline’owych stylów HTML.
W ramach tego poradnika utworzysz projekt HTML i CSS, do którego dodasz Tailwind CSS. Dowiesz się też, jak z jego pomocą tworzyć nowoczesne strony WWW z poziomu HTML.
Do kogo kierowany jest ten poradnik?
Poradnik kierowany jest do osób pracujących z technologiami frontendowymi, które chcą uporządkować swój kod CSS i przyspieszyć tworzenie nowoczesnych stron WWW.
Czego potrzebujesz?
- Zainstalowanego Node.js i terminala (konsoli).
- Edytora kodu. Osobiście korzystam z WebStorm, ale Ty możesz wybrać dowolny edytor. Jeżeli nie masz własnych preferencji, możesz skorzystać z darmowego Visual Code Studio.
Czego się nauczysz?
Dzięki niniejszemu poradnikowi dowiesz się, jak dodać Tailwind CSS do projektu przy użyciu PostCSS. Następnie pokażę Ci, jak skonfigurować i zoptymalizować produkcyjną wersję Tailwinda. W tym poradniku nie zakodujesz żadnego komponentu, to będzie Twoje zadanie domowe.
Tailwind nie jest kolejnym Bootstrapem
W czasach kiedy Vue, React, Angular nie były tak popularne, a w świecie raczkującego frontendu królowało jQuery, kawałek tortu popularności przypadł także Bootstrapowi.
Bootstrap dostarcza zbiór gotowych ostylowanych komponentów UI. Znajdziesz w nim kontrolki formularzy, alerty, cardy, modale i wiele, wiele innych elementów interfejsu. Użytkownik chcąc dodać alert do strony WWW korzysta z klas alert alert-primary
<div class="alert alert-primary"></div>
Gdyby chcieć użyć przycisku, byłaby to klasa btn btn-primary.
Bootstrap sprawdza się, jeżeli „na szybko” chcesz stworzyć panel administratora lub prostą stronę WWW. Znacznie gorzej wygląda to w przypadku nowoczesnych stron WWW z rozbudowanym designem.
Tu na scenę wkracza Tailwind CSS, który można porównać do pisania inline’owych stylów w HTML. W przeciwieństwie do nich, ma on jednak znacznie większe możliwości i jest bardziej przyjazny użytkownikowi.
Tailwind jest zbiorem klas, dzięki któremu zarządzasz właściwościami CSS z poziomu HTMLa.
Co to oznacza?
W przypadku Bootstrapa przycisk tworzysz korzystając z klas btn btn-primary. Tworząc style dla przycisku w Tailwind napiszesz następujący kod:
<button class=”py-1 px-0.5 rounded-md bg-blue-500 hover:bg-blue-600”></button>
Przy użyciu Tailwind CSS opiszesz, jak ma wyglądać nasz przycisk, a nie jak w Bootstrap, gdzie określisz go jako .btn
Na pierwszy rzut oka widać, że kod z użyciem Tailwinda będzie dłuższy, jednak w świecie nowoczesnego frontendu przycisk i tak będzie jakimś komponentem, który będzie używany wielokrotnie.
Dodatek Tailwind CSS IntelliSense do VS Code
Korzystając z Visual Code Studio zainstaluj dodatek Tailwind CSS IntelliSense. Przyśpieszy on pracę z Tailwind dzięki funkcji podpowiadania nazw klas.
Dodatek Tailwind CSS IntelliSense potrafi także podświetlić potencjalne błędy w CSS i HTML oraz rozwijać implementację css wybranej klasy.
Edytory kodu od JetBrains (WebStorm, PhpStorm) obsługują Tailwind CSS bez konieczności instalacji dodatków.
Krok 1 – Struktura projektu
Na potrzeby poradnika stworzysz bardzo prosty projekt, w którym skorzystasz z Tailwind CSS. Utwórz katalog tailwind, a następnie dodaj do niego pliki index.html, style.css i postcss.config.js.
W projekcie będziesz używać npm. Otwórz terminal i utwórz plik package.json wpisując w terminalu:
$npm init
Struktura Twoje katalogu powinna wyglądać następująco:
index.html
package.json
postscss.config.js
styles.css
Przed przejściem do kolejnego kroku dodaj do pliku .html następujący kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="tailwind.css" rel="stylesheet">
<title>Tailwind CSS</title>
</head>
<body>
</body>
</html>
Krok 2 – Instalacja Tailwind CSS
Tailwind CSS jest dostępny jako paczka npm. Otwórz terminal i zainstaluj tailwindcss wpisując:
$npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
Przy okazji instalacji tailwindcss zainstalowana została też paczka postcss. Otwórz plik postscss.config.js, który utworzony został w kroku 1 i dodaj do niego następujący kod w celu konfiguracji narzędzia PostCSS:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Zanim zaczniesz korzystać z Tailwinda, musisz go jeszcze dodać do pliku style.css, otwórz ten plik i dodaj do niego następujący kod:
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind CSS dzięki PostCSS zamieni ten kod na CSS.
Uwaga: W trakcie instalacji tailwindcss, npm utworzy plik package-lock.json. Jest on generowany automatycznie i nie należy w nim dokonywać zmian ręcznie.
Krok 3 – Kompilacja Tailwind CSS
Tailwind CSS korzysta z narzędzia PostCSS. Ja na co dzień w projektach korzystam z Webpacka, jednak na potrzeby tego poradnika, pokażę Ci jak zrobić to w postcss-cli.
Otwórz terminal i zainstaluj postcss-cli wpisując:
$npm i -D postcss-cli
Nie zamykaj terminala. Użyj postcss-cli, żeby zamienić kod z dyrektywami Tailwind CSS na zrozumiały dla przeglądarek kod CSS wpisując w terminalu:
npx postcss style.css -o tailwind.css
Uwaga: Zauważ, że korzystasz z komendy npx, a nie npm do uruchomienia postcss. npx jest domyślnie instalowany z npm i pozwala uruchamiać polecenia ze zdalnego lub lokalnego pakietu npm.
W projekcie powinien pojawić się plik tailwind.css ze wszystkimi dostępnymi klasami CSS.
Bonus. Otwórz plik package.json. Znajdź sekcję scripts i umieść w niej skrypt build:
"scripts": {
"build": "postcss style.css -o tailwind.css"
},
Otwórz terminal i zbuduj ponownie plik tailwind.css wpisując:
$npm run build
Krok 4 – Optymalizacja Tailwind CSS
Plik tailwind.css zawiera teraz wszystkie dostępne klasy CSS i ma rozmiar około 4,03 MB, co raczej nie jest zalecane w kontekście optymalizacji stron WWW. Oczywiście jako nowoczesne narzędzie Tailwind CSS może zostać poddany optymalizacji.
Otwórz terminal i utwórz plik konfiguracyjny tailwind.config.js wpisując:
$ npx tailwindcss init
W katalogu projektu pojawi się plik tailwind.config.js. Do sekcji purge dodaj ‘./*.html’. Dzięki temu Tailwind przeszuka pliki html i zbuduje plik tailwind.css tylko z użytymi przez Ciebie klasami.
module.exports = {
purge: [
'./*.html'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Otwórz terminal i zbuduj plik tailwind.css wpisując:
$npm run build
Niestety plik nadal zawiera wszystkie klasy CSS. Dzieje się tak dlatego, że opcja purge działa tylko w trybie produkcyjnym.
Otwórz terminal i zainstaluj paczkę cross-env wpisując:
$npm i -D cross-env
Otwórz plik package.json i skonfiguruj sekcję scripts:
"scripts": {
"build": "postcss style.css -o tailwind.css",
"production": "cross-env NODE_ENV=production postcss style.css -o tailwind.css"
}
Otwórz terminal i zbuduj plik tailwind.css wpisując:
$npm run production
W pliku tailwind.css powinny znaleźć się wyłącznie tak zwane „resety” stylów, które nadpisują style przeglądarki.
Tailwind CSS daje Ci nieograniczone możliwości tworzenia szablonów i ponownego ich używania w kolejnych projektach. Dzięki temu szybko i łatwo zbudujesz kolejną stronę i jeszcze jedną, i jeszcze.
Wybierając Elastyczny Web Hosting nie musisz martwić się o zasoby na utrzymanie kolejnych witryn. Otrzymasz wysokie parametry gwarantowane, czyli 1 GHz CPU, 2 GB RAM oraz 50 GB NVMe, a jeśli w którymkolwiek momencie Twoje strony będą potrzebować więcej, opcja elastycznego skalowania automatycznie, bez konieczności kontaktu z supportem, przydzieli Ci dodatkowe zasoby. Zapewnią one dostępność wszystkich Twoich witryn niezależnie od ich obciążenia.
Krok 5 – Konfiguracja Tailwinds CSS
Otwórz plik tailwind.config.js. Poza znaną Ci już sekcją purge znajdziesz tu też sekcję theme. W sekcji theme możesz nadpisywać i dodawać nowe wartości do Tailwind CSS.
W sekcji theme dodaj nowy kolor regal-blue o wartości #2435a
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
}
}
}
Otwórz terminal i zbuduj plik tailwind.css wpisując:
$npm run build
Otwórz plik index.html i przywitaj się z Tailwind CSS:
<body>
<h1 class="text-regal-blue">Hello Tailwind CSS</h1>
</body>
Otwórz plik index.html w przeglądarce, która powinna wyrenderować tekst w kolorze regal-blue.
Szczegóły konfiguracji poszczególnych opcji znajdziesz w dokumentacji Tailwind CSS.
Krok 6 – Praca z Tailwind CSS
Tailwind CSS jest zbyt obszernym narzędziem, żeby opisać je dokładnie w ramach poradnika, dlatego zaprzyjaźnij się z dokumentacją tego frameworka. Korzystaj z wyszukiwarki, żeby znaleźć zarówno nazwy klas jak i informacje o wartościach, jakie dostarczają.
Pracując z Tailwind CSS musisz znać kilka podstawowych koncepcji.
Responsive Design
Warto wiedzieć, że Tailwind to framework Mobile First, dlatego korzystając z jego klas bez prefixu definiujesz wartość dostępną dla wszystkich szerokości ekranu.
W przypadku, jeżeli chcesz żeby, np. tekst w kontenerze był wyrównany do środka dla mobile, a dla średnich urządzeń zaczynał się od lewej, musisz skorzystać z prefixu md:
<p class=”text-center md:text-left”></p>
Tailwind dostarcza kilka break pointów. Pamiętaj, że zawsze możesz je nadpisać lub dopisać zupełnie nowe break pointy.
Focus, Hover i pozostałe stany
Obsługa stanów focus, hover, itp. w Tailwind bazuje na tym samym wzorcu co Responsive Design. W przypadku, jeżeli chcesz dopisać jakąś klasę dla stanu hover, używasz prefixu hover:
<button class=”bg-purple-600 hover:bg-purple-700”></button>
Dark mode
Dark mode to opcja, która w ostatnim czasie zyskała na funkcjonalności. Tailwind dostarcza wsparcie poprzez prefix dark:
<div class=”bg-white dark:bg-gray-800”>
<p class=”text-gray-800 dark:text-white”></p>
</div>
Tryb ciemny jest wyłączony w projekcie prezentowanym w poradniku. Otwórz plik tailwind.config.js i znajdź sekcję darkMode
darkMode: 'media',
Ustawienie darkMode na media sprawi, że Tailwind skorzysta z media queries dla prefers-color-scheme.
Krok 7 – @apply
Jeżeli piszesz style CSS i korzystasz z jakiejś metodologii, np. BEM (Block Element Modifier), to pisanie stylów przy użyciu klas w HTML może do Ciebie nie przemawiać.
Tailwind wychodzi naprzeciw takim osobom i umożliwia importowanie swoich klas do już istniejących. Wszystko to dzięki dyrektywie @apply
.button {
@apply font-bold py-2 px-4;
}
.button--rounded {
@apply rounded;
}
Podsumowanie
Tailwind CSS to niezwykle ciekawy sposób na pisanie stylów. Nawet, jeżeli takie podejście do ich pisania nie przemawia do Ciebie, to warto wykorzystać go chociażby w projekcie „po godzinach”. Zwłaszcza, gdy tworzymy go w jakimś frameworku pozwalającym reużywać wytworzonych komponenty.
W poradniku celowo nie umieściłem przykładów użycia Tailwinda. Zakładam, że potrafisz pisać style CSS i nie chcę odbierać Ci przyjemności ze stworzenia swojego pierwszego komponentu. Jeżeli nadal masz otwarty edytor kodu, to nie czekaj tylko koduj.