Przewodnik dla początkujących po Tailwind CSS: praktyczny poradnik od zera do biegłości

Co to jest Tailwind CSS?

Tailwind CSS to framework CSS, który skupia się na funkcjonalności i ułatwia tworzenie dostosowanych interfejsów użytkownika dzięki wielu kombinowalnym klasom pomocniczym (utility classes). W odróżnieniu od frameworków typu Bootstrap, które oferują gotowe komponenty (np. przyciski, karty), Tailwind CSS nie zawiera żadnych wcześniej przygotowanych elementów. Zamiast tego dostarcza bardzo dokładnie określone klasy CSS, które można dowolnie łączyć, by tworzyć różne elementy interfejsu. .text-center、.bg-blue-500、.p-4 Itd. Te klasy odpowiadają bezpośrednio na pojedyncze atrybuty CSS. Programiści mogą “składać” wymagany styl poprzez łączenie tych klas bezpośrednio z elementami HTML, co daje im dużą swobodę w projektowaniu i możliwość maksymalnej personalizacji.

Jego podstawową filozofią jest “swoboda w ramach ograniczeń”. Oferuje dobrze zaprojektowany system wzorców, który obejmuje odstępy pomiędzy elementami, kolory, wielkość fontów, punkty przerwania itd. Wszystkie przydatne klasy są generowane na bazie tego systemu. Dzięki temu projekty zachowują wzorcową estetykę, a przy tym unikają problemów z nazawaniem elementów oraz nadmiernego rozmiaru kodu stylu, typowych dla tradycyjnego CSS. Nie trzeba już długo myśleć nad nazwą dla każdego elementu, ani często przemieszczać się pomiędzy plikami CSS i HTML.

Jak zacząć korzystać z Tailwind CSS?

Można na różne sposoby integrować Tailwind CSS do swojego projektu. Najzaleczonej metodą jest użycie oficjalnego pluginu PostCSS, który umożliwia włączenie zaawansowanych funkcji, takich jak rekomendowany moduł JIT (Just-In-Time compilation), co zapewnia najlepszą wydajność.

Polecamy lekturę. Przewodnik po Tailwind CSS: tworzenie współczesnych, responsywnych stron internetowych od zera。

Instalacja za pomocą PostCSS:

To jest najpopularniejszy i najpełniejszy sposób instalacji. Najpierw użyj npm lub yarn, by uruchomić projekt i zainstalować niezbędne zależności. Musisz zainstalować… tailwindcss Sam w sobie,postcss też autoprefixer。

Asystent tworzenia witryn internetowych na platformie WordPress.com.

Dostępność 99,9991% + odporność na awarie w różnych strefach, całodobowa pomoc techniczna oraz bezpłatne korzystanie z usługi AI przy zakupie pakietu blogowego w celu tworzenia witryn internetowych.

Bezpłatna nazwa domeny na jeden rok

Odwiedź witrynę WordPress.com, aby uzyskać pomoc w tworzeniu witryny internetowej →

Asystent w tworzeniu witryny internetowej UltaHost.

Ponad 900 darmowych, konfigurowalnych szablonów, które zapewnią ci wszystkie narzędzia SEO potrzebne do optymalnej widoczności w wyszukiwarkach internetowych.

Oferta 40%

Odwiedź witrynę UltaHost, aby uzyskać pomoc w tworzeniu strony internetowej →

npm install -D tailwindcss postcss autoprefixer

Następnie przygotuj plik konfiguracji dla Tailwind CSS. tailwind.config.js Konfiguracja pliku z PostCSS postcss.config.js。

npx tailwindcss init -p

Ten komend wygeneruje dwa pliki. tailwind.config.js Możesz dostosować temat, konfigurować dodatki itd. W wersji początkowej… content Pola są używane do określenia plików, które Tailwind ma skanować w poszukiwaniu nazw klas, co jest kluczowe w trybie JIT (Just-In-Time kompilacji). Konfigurację tych pol należy dostosować do struktury Twojego projektu, na przykład:

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

A potem, w twoim głównym pliku CSS (na przykład…) src/styles.css 或 src/index.cssW artykule wykorzystano @tailwind Instrukcje do wstawiania elementów w poszczególne warstwy frameworku Tailwind.

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

Na koniec upewnij się, że PostCSS jest poprawnie włączony do procesu budowy Twojego projektu (większość współczesnych frameworków front-end, takich jak Vite i Next.js, automatycznie go obsługuje). Po uruchomieniu komendy budowy Tailwind skanuje pliki projektu w poszukiwaniu konfiguracji stylów. content W zdefiniowanym pliku konfiguracji należy znaleźć wszystkie wykorzystane klasy pomocnicze, a następnie stworzyć plik CSS, który będzie zawierać tylko niezbędne elementy stylu, aby był jak najmniejszy.

Polecamy lekturę. Szybki przewodnik po Tailwind CSS: tworzenie nowoczesnego interfejsu frontendowego od podstaw.。

Wykorzystaj Play CDN do szybkiego prototypowania.

Do szybkiego projektowania prototypów, prezentacji lub prostych stron w formacie HTML statycznego można użyć Play CDN. Wystarczy tylko… <head> Dodaj jeden element wewnątrz tagu. <script> Wystarczy tylko użyć tych etykiet. Ten sposób nie wymaga żadnych procedur budowy („build”), ale nie zaleca się jego stosowania w środowisku produkcyjnym, ponieważ wydajność, stabilność oraz kompletność funkcji są gorsze w porównaniu z wersjami zbudowanymi („built”).

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    „Hello world!”
  </h1>
</body>
</html>

Podstawowe pojęcia i zastosowanie klas praktycznych

Klucz do zrozumienia Tailwind CSS polega na opanowaniu zasad nazewania elementów oraz systemu projektowego tego frameworku. Każdy praktyczny klas (ang. utility class) funkcjonuje jak funkcja – przyjmuje wartości zdefiniowane w systemie projektowym i generuje odpowiednią deklarację CSS.

System odległości i wymiarów

Tailwind używa jednolitego systemu liczbowego do kontrolowania marginesów wewnętrznych i zewnętrznych, szerokości, wysokości itd. Format nazw klas jest zwykle następujący: {属性}{方向}-{大小}Na przykład:
- .p-4 Wyraź to. padding: 1rem;(1rem = 16px; 4 oznacza 4 × 0.25rem).
- .mt-2 Wyraź to. margin-top: 0.5rem;。
- .mx-auto Oznacza, że marginy po bokach w poziomnej orientacji są ustawione automatycznie; często używa się to do centralizowania elementów blokowych.
- .w-64 Wyraź to. width: 16rem;。
- .h-screen Wyraź to. height: 100vh;。

Asystent tworzenia witryny Bluehost.

Oferujemy narzędzia do tworzenia witryn internetowych z wykorzystaniem sztucznej inteligencji, całodobową pomoc online i przez telefon, bezpłatną domenę na rok, darmową sieć CDN oraz gwarancję dostępności usług na poziomie 99,999% w ramach umowy SLA.

Odwiedź Bluehost.

Kolory i tło

Tailwind oferuje bardzo bogatą, hierarchiczną paletę kolorów. Nazwy klas kolorowych mają następujący format: {属性}-{颜色}-{深浅}。
- .text-gray-800 Oznacza to, że kolor tekstu jest szary o stopniu szarości 800.
- .bg-blue-500 Oznacza to, że kolor tła to niebieski o stopniu szarości 500.
- .border-red-300 Oznacza to, że kolor obramowania to czerwony kolor o stopniu intensywności 300.
Możesz też użyć… .hover:bg-blue-600 Aby dodać styl w stanie przeciągania kursora („hover”)…

Wzorowanie reaktywne i punkty przerwania (breakpoints)

Tailwind używa systemu punktów przerw (breakpoints) z preferencją dla urządzeń mobilnych. Standardowe klasy przydatne są zaprojektowane z myślą o urządzeniach mobilnych, a aby zastosować odpowiednie style na większych ekranach, konieczne jest dodanie odpowiedniego prefiksu punktu przerw przed nazwą klasy. Format tego prefiksu to: {断点}:{类名}Standardowe punkty przerwania to:
- sm: (640 px)
- md: (768 pikseli)
- lg: (1024 px)
- xl: (1280 px)
- 2xl: (1536 px)

Na przykład,<div class="text-center md:text-left lg:text-2xl"> Tekst ma być wycięty w centralnej pozycji na urządzeniach mobilnych, a na ekranach o średnim rozmiarze i większych tekst musi być wyświetlony z lewej strony. Na ekranach dużych rozmiaru należy użyć większego rozmiaru fontu.

Polecamy lekturę. Opanowanie kluczowych funkcji Tailwind CSS: od biblioteki komponentów do praktycznych porad dotyczących projektowania responsywnego。

Zaawansowane wskazówki i najlepsze praktyki

Gdy już opanujesz zasady, następujące techniki pomogą ci używać Tailwind CSS efektywniej.

Wyodróżnienie klas componentów, które można ponownie użyć.

Choć Tailwind zachęca do bezpośredniego używania przydatnych klas w HTML, w przypadku złożonych kombinacji stylów, które pojawiają się często w projekcie, można zastosować inne metody. @apply Poleczenie umożliwia wyciągnięcie tego elementu i umieszczenie go w pliku CSS w postaci klasy dostosowanej do potrzeb. To pomaga zachować prostotę struktury HTML.

hosting.com

Darmowy SSL, Cloudflare CDN, WAF, ponad 40 dostępnych na całym świecie centrów danych, mniejsze opóźnienia dzięki lokalizacji, wsparcie serwisowe 24/7/365, a teraz możliwość zaoszczędzenia nawet 671 TB miesięcznie, a także wsparcie w zakresie tworzenia aplikacji opartych na sztucznej inteligencji i optymalizacji SEO.

Odwiedź hosting.com.

W twoim pliku CSS można to napisać w następujący sposób:

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

A potem użyj tego bezpośrednio w HTML. <button class="btn-primary">To dobry sposób na osiągnięcie balansu pomiędzy zasadą “prioritety praktycznych rozwiązań” a tradycyjnym stylem CSS.

Tematy z możliwością głębokiej personalizacji

Poprzez… tailwind.config.js Dokumenty theme.extend Można częściowo dostosować konfigurację, co umożliwia łatwe rozszerzenie lub zmianę standardowego systemu projektowego. Na przykład można dodać własne kolory, fonty, odstępy pomiędzy elementami czy inne elementy wyglądu.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Po konfiguracji możesz używać narzędzi typu… .text-brand-blue 和 .w-128 Taka klasa.

Wady i zalety stosowania modelu JIT

Od wersji Tailwind CSS v2.1 wprowadzony został tryb JIT (Just-In-Time), który znacząco zmienia sposób działania tego narzędzia. Już nie generuje się wszystkich możliwych wersji kodu CSS zawsze na początku, lecz tylko te, które są rzeczywiście potrzebne w trakcie procesu rozwoju. To oznacza, że:
1. Prędkość budowy i rozwoju aplikacji jest wyjątkowo duża, niezależnie od złożoności konfiguracji.
2. Możesz używać dowolnych wartości, na przykład… .top-[-113px] 或 .bg-[#1da1f2]I to bez konieczności wcześniejszej konfiguracji.
3. Utworzony plik CSS ma maksymalnie ograniczony rozmiar w środowisku produkcyjnym.
Od wersji v3.0 i późniejszych tryb JIT (Just-In-Time) jest ustawiony jako standardowy i jedyny dostępny tryb działania silnika, więc nie trzeba go dodatkowo aktywować, by czerpać z niego wszystkie korzyści.

Podsumowanie.

Tailwind CSS oferuje rewolucyjne wzrosty wydajności i elastyczności w rozwoju front-end aplikacji dzięki swojej metodologii opartej na funkcjonalnych klasach. Eliminuje koszty związane z koniecznością częstego przekraczania granic pomiędzy CSS a HTML, a dzięki sprawdzonemu systemowi projektowania zapewnia wzorcową estetykę całego projektu. Może być używany zarówno do tworzenia prostych prototypów, jak i złożonych aplikacji na poziomie biznesowym. Opanowanie jego kluczowych conceptów, wzorów projektowania reaktywnego oraz zaawansowanych technik personalizacji pozwoli ci szybko tworzyć wysokiej jakości interfejsy użytkownika, które są zarówno estetyczne, jak i unikalne. Choć na początku może być konieczne zapamiętanie kilku nazw klas, po zrozumieniu zasad ich nazawania szybkość rozwoju aplikacji znacząco przewyższy metodę pisania klas w tradycyjnym CSS.

FAQ – najczęściej zadawane pytania.

Czy pliki CSS generowane przez Tailwind CSS mogą być dużych rozmiarów?

Nie, zwłaszcza w środowisku produkcyjnym. Za pomocą swojego silnika JIT (Just-In-Time compilation) Tailwind dokładnie skanuje pliki projektu i generuje tylko te style CSS, które są faktycznie potrzebne. Dzięki temu plik CSS, który powstaje w wyniku tego procesu, jest zwykle bardzo mały – czasami nawet mniejszy niż wiele plików CSS napisanych ręcznie. Narzędzia do budowy projektów (np. PurgeCSS), które są wdrożone w silnik JIT, usuwają wszystkie nie używane elementy stylu.

W projektach zespołowych kod HTML często staje się zbyt powiększonym i złożonym, co może utrudnić jego utrzymanie i aktualizację.

To rzeczywiście powszechny zmartwienie. Doświadczenie pokazuje, że można go złagodzić poprzez dobrą modularizację – niezależnie od tego, czy używa się frameworków do tworzenia komponentów takich jak React czy Vue, czy innych metod. @apply Wykluczanie powtarzających się kombinacji stylów umożliwia skuteczne zarządzanie złożonością kodu. “Zbyt duża objętość” kodu HTML jest kompensowana przewidywalnością stylów oraz znacząco mniejszym obowiązkiem ich nazawania. Zespoły mogą łatwiej osiągnąć spójność w stosowaniu stylów, ponieważ wszystkie używają tych samych elementów wzorców (odstępy, kolory itd.). Wiele zespołów stwierdziło, że ogólne koszty utrzymania kodu w rzeczywistości spadły.

Czy mogę to używać w połączeniu z istniejącymi frameworkami CSS lub UI, np. Bootstrap?

Można to zrobić, ale nie zaleca się mieszania różnych technologii CSS. Można w jednym projekcie używać zarówno Tailwind CSS, jak i innych stylów CSS, ale trzeba uważać na możliwe konflikty wynikające z różnych priorytetów stylów (specyfiki). Zwykle lepszym rozwiązaniem jest stopniowe przenoszenie elementów kodu na bazę Tailwind CSS lub używanie tej technologii wyłącznie w nowych funkcjach, zachowując przy tym stare style. Tailwind CSS oferuje narzędzia, które pomagają w organizacji i zarządzaniu kodem stylu. prefix Można ustawić opcję konfiguracji, aby do wszystkich klas praktycznych dodawano określony prefiks. tw-To może skutecznie uniknąć konfliktów nazw klas.

Jak przećiąć lub dodać własne style?

Istnieje kilka głównych metod: 1. Używanie… @apply W CSS instrukcje kombinują klasy praktyczne, aby stworzyć nowe klasy. 2. tailwind.config.js 的 theme.extend System rozszerzalnego projektowania w języku „Chinese”. 3. W… tailwind.config.js 的 theme Można bezpośrednio zastąpić wartości domyślone (nie zaleca się tego, chyba że to konieczne). 4. Można też używać dowolnych wartości w HTML. bg-[#yourcolor]Napisz tradycyjny kod CSS i użyj go do nadpisania poprzez ustawienie wyższego priorytetu, ale powinno to być rozwiązanie awaryjne.