#tailwind #css

Tailwind CSS – utility-first framework alternatywą dla Bootstrap

Avatar of Przemysław SpaczekPrzemysław Spaczek

Tailwind CSS grafika przewodnia

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.

strona główna Tailwind

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

plik Tailwind

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.

resety stylów Tailwind

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.

WYPRÓBUJ HOSTING

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.

Hello Tailwind tekst

Szczegóły konfiguracji poszczególnych opcji znajdziesz w dokumentacji Tailwind CSS.

dokumentacja Tailwind

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ą.

dokumentacja Tailwind

 

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.

Prefix
Minimalna szerokość
CSS
sm
640px
@media (min-width: 640px) { ... }
md
768px
@media (min-width: 768px) { ... }
lg
1024px
@media (min-width: 1024px) { ... }
xl
1280px
@media (min-width: 1280px) { ... }
2xl
1536px
@media (min-width: 1536px) { ... }

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.

Przemyslaw Spaczek

Autor artykułu: Przemysław Spaczek

Senior Frontend Developer – obecnie tworzy zaawansowane strony WWW i aplikacje w Vue.js. W wybranych projektach nadal z sentymentem sięga po WordPress jako backend, głównie jako headless CMS. Chętnie dzieli się swoją wiedzą w internecie i na meetupach.