Przewodnik po Tailwind CSS: Jak budować nowoczesne, responsywne interfejsy od zera

Co to jest Tailwind CSS?

Tailwind CSS to framework CSS, który skupia się na funkcjonalności. Pomaga programistom szybko tworzyć własne interfejsy użytkownika, dostarczając dużą liczbę kombinowanych, praktycznych klas (utility classes). W odróżnieniu od frameworków takich jak Bootstrap, które oferują gotowe komponenty, Tailwind CSS nie zawiera żadnych kompletnych elementów interfejsu – zamiast tego dostarcza drobnozmiarowe, atomowe klasy CSS, które można bezpośrednio używać w kodzie HTML do definiowania stylów.

Jego kluczowym princypem jest “praktyczność na pierwszym miejscu”. To oznacza, że nie musisz bez ustanku przechodzić pomiędzy plikami CSS a HTML, ani też długo myśleć nad nazwami klas dla komponentów. .card__header--activeMożesz zrealizować dowolny projekt, po prostu połączając kilka opisowych klas narzędziowych. Na przykład, aby stworzyć kartę z zaokrągłonymi krawędziami, wypełnionym interwalem i cieniem, wystarczy tylko napisać kod odpowiedniej kombinacji tych klas. class="rounded-lg p-6 shadow-md"Taki sposób znacząco poprawia efektywność rozwoju oprogramowania oraz utrzymuje spójność stylu w całym projekcie.

Ustawienie środowiska i podstawowe konfiguracje

Można zacząć korzystać z Tailwind CSS na różne sposoby, ale najpopularniejszy jest integracja z narzędziem linii polecywnej i procesem budowy projektów.

Polecamy lekturę. Rozblokowanie potencjalu Tailwind CSS: Praktyczny przewodnik od podstaw do zaawansowanych tematów。

Zainstaluj pakety podstawowe za pomocą npm.

Najpierw musisz zainstalować Tailwind CSS oraz jego zależności za pomocą narzędzia npm lub yarn. Wykonaj następujące poleczenie w katalogu głównym swojego projektu:

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
npx tailwindcss init

To zainstaluje Tailwind CSS, PostCSS do obsługi plików CSS oraz Autoprefixer, który automatycznie dodaje prefiksy do nazw elementów w różnych przeglądaczach.npx tailwindcss init Komenda wygeneruje plik konfiguracji standardowy. tailwind.config.js。

Konfiguracja ścieżki zawartości oraz generowanie pliku CSS

Następnie należy to konfigurować. tailwind.config.js W tym pliku określono, które pliki ma skanować narzędzie Tailwind, aby generować odpowiednie style. content Dodaj do arrayu ścieżkę do twojego pliku szablonu.

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

Następnie stworz file CSS główny (na przykład: main.css). src/input.cssDodaj instrukcje Tailwind CSS.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Na koniec uruchom proces budowy za pomocą linii poleceń, aby Twoje wejściowe pliki CSS zostały przetworzone w gotowe do użycia pliki z formatem stylów.

Polecamy lekturę. Biegła znajomość Tailwind CSS: praktyczny przewodnik od podstaw do zaawansowanych technik.。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Teraz możesz włączyć generowane elementy do kodu HTML. ./dist/output.css Możesz otworzyć plik i zacząć korzystać z przydatnych klas dostępnych w bibliotece Tailwind CSS.

Podstawowe klasy przydatne w programowaniu oraz projektowanie responsywne

Praktyczne klasy w Tailwind CSS obejmują niemalże wszystkie atrybuty CSS i są zgodne z wyjątkowo dobrze zorganizowaną sistemą nazewania oraz specjalnymi „tokenami” używanymi w projektowaniu.

Przegląd powszechnie używanych narzędzi

Nazwy narzędzi są zwykle bezpośrednio odnoszone do atrybutów CSS i zawierają skróty. Na przykład:
* 间距：p-4 padding: 1rem);, m-2 (margin: 0.5rem), space-x-4 (Rozstaw pionowy między elementami dziecięcymi).
* 排版：text-lg (Rozmiar fontu), font-bold (Gęstość fontu), text-center (Wyświetlenie tekstu).
* 颜色：bg-blue-500 (Kolory tła), text-gray-800 (Kolor tekstu), border-red-300 (Kolor obramowania).
* 布局：flex, items-center (align-items: center), justify-between (justify-content: space-between).
* 尺寸：w-64 (Łączna szerokość: 16rem), h-full (Wysokość: 100%).
* 效果：rounded (Rowki), shadow (Cienie), opacity-50 (Przyczepność).

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.

Implementowanie rozmiarowo dostosowanego layoutu (responsive layoutu)

Tailwind używa systemu 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 odpowiednich prefiksów responsywnych.
Przedziały przerw („breakpoints”) zawierają następujące prefiksy:sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px).

Na przykład, następny kod tworzy layout z elementami rozłożonymi w formie sterty (stacked) i umieszczonego obok siebie na ekranach o średnim rozmiarze:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4 bg-blue-100">Treść po lewej stronie.</div>
  <div class="w-full md:w-1/2 p-4 bg-green-100">Treść po prawej stronie.</div>
</div>

Poprzez połączenie tych prefiksów możesz łatwo stworzyć złożone, responsywne interfejsy, które będą dostosowane do wszystkich rozmiarów ekranów.

Polecamy lekturę. Światowy przewodnik po CSS Tailwind: od poznania podstaw do osiągnięcia mistrzostwa w tworzeniu nowoczesnych stron internetowych。

Praktyka: Tworzenie komponentu nawigacji

Połączmy to, co uczyliśmy się, tworząc typową nawigację responsywną. Na dużych ekranach ta nawigacja wyświetla się w formie poziomej, a na małych ekranach składa się w menu typu „hamburger”.

Napisz infrastrukturę i style.

Najpierw tworzymy szablon HTML dla nawigacji i aplikujemy do niej podstawowe style.

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.

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white font-bold text-xl">Moja marka</a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Strona główna</a>
          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">O nas</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">usługa</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Kontaktować</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化版） -->
          <span class="sr-only">Otworzyć główny menu</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

W tym momencie nawigacja na stronie desktopowej została zakończona. Teraz używamy… hidden md:block Można kontrolować, by linki nawigacyjne na ekranie desktopu wyświetlały się tylko na ekranach o średnim lub większym rozmiarze.

Dodaj interaktywność oraz menu mobilne.

Aby menu wyświetlało się po kliknięciu na przycisku na urządzeniu mobilnym, potrzebny nam jest trochę JavaScriptu. Tutaj użyjemy prostego kodu w języku JavaScript, aby zmienić klasę elementu, która kontroluje wyświetlanie menu.
Najpierw należy dodać ID do przycisków menu i treści menu, a potem zmienić te przyciski tak, aby wywoływały określone funkcje.

<!-- 修改后的移动端菜单按钮 -->
<button id="mobile-menu-button" type="button" class="..."> ... </button>

<!-- 新增的移动端菜单内容，初始隐藏 -->
<div id="mobile-menu" class="md:hidden hidden">
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Strona główna</a>
    <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">O nas</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">usługa</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Kontaktować</a>
  </div>
</div>

Następnie dodaj skrypt na dno strony.

<script>
  const menuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

menuButton.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
  });
</script>

Dzięki temu udało się stworzyć kompletną, responsywną nawigację. Poprzez połączenie różnych przydatnych klas nie musieliśmy napisać ani jednego linii kodu CSS, by zrealizować ten komponent.

Podsumowanie.

Tailwind CSS znacząco zmienił sposób, w jaki programiści tworzą stylizację, dzięki swojemu podejściu opartemu na zasadzie “praktycznej preferencji” („practical priority”). Przeniósł decyzje dotyczące stylu z plików CSS do szablonów HTML, a dzięki kombinacji drobnych, specjalnych klas („tool classes”) uzyskał wyjątkową efektywność w rozwoju i spójność wizualną projektów. Od konfiguracji środowiska, używania kluczowych klas po systemy reagujące na różne rozmiary ekranów oraz budowę gotowych komponentów, Tailwind oferuje kompletny i wydajny zestaw narzędzi do tworzenia nowoczesnych interfejsów.

Choć na początku trzeba zapamiętać wiele nazw klas, intuicyjne zasady nazawania elementów oraz wysokiej jakości dokumentacja pomagają szybko się zaaklimatyzować z tego narzędzia. Dla zespołów i projektów, które stawiają na szybkość rozwoju, wolność w projektowaniu oraz kontrolę wielkości ostatecznego pliku, Tailwind CSS jest bez wątpliwości potężnym i eleganckim rozwiązaniem.

FAQ – najczęściej zadawane pytania.

Czy pliki z stylami w Tailwind CSS mogą być bardzo duże?

Nie. W środowisku produkcyjnym Tailwind CSS wykorzystuje technologię PurgeCSS (obecnie nazywaną Content Scanning), która analizuje pliki projektu i pakuje do finalnego pliku CSS tylko te klasy, które faktycznie są używane. Dzięki temu generowany plik CSS jest bardzo kompaktowy – zwykle ma rozmiar od kilku KB do kilku dziesięciu KB.

W porównaniu z Bootstrapem, jakie są głównie zalety Tailwind CSS?

Tailwind CSS daje większą swobodę personalizacji. Bootstrap oferuje gotowe komponenty z określonym wyglądem, a aby je dostosować, konieczne jest przekrycie dużego obszaru kodu CSS. Natomiast Tailwind dostarcza “surowe” elementy stylu, które można łączyć w sposób tworzący unikalne komponenty idealnie odpowiadające wymaganiom projektu. To eliminuje konieczność konfrontacji z ustawieniami standardowymi frameworku oraz zapobiega nadmiernemu rozmiarowi kodu CSS.

W projekcie zespołowym jak utrzymać jednolikowość kodu pisanego w języku CSS Tailwind?

Można łączyć pliki konfiguracji Tailwind CSS z dodatkami do środowisk rozwojowych (IDE). tailwind.config.js W dokumencie definiowane są standardowe wartości dotyczące koloru, odstępów, fontu oraz innych elementów wyglądu projektu. Członkowie zespołu mogą korzystać z oficjalnych dodatków do VS Code lub IntelliJ IDE, które oferują funkcje automatycznego dopisywania kodu, wyświetlania zasad gramatycznych oraz prezentacji elementów interfejsu w czasie ich przeciągania kursorem. Dzięki tym funkcjom można skutecznie zmniejszyć liczbę błędów w pisowni nazw klas i poprawić efektywność rozwoju oprogramowania.

Jak obsługiwać złożone stany nagłoszenia („hover”) lub stanu przy ustawieniu kursora na element („focus”) w Tailwind CSS?

Tailwind CSS oferuje bogatą gamę prefiksów dla różnych wariantów stanu (statusów). hover:, focus:, active:, disabled: Itd. Możesz łatwo dodać je przed każdą klasą narzędziową. Na przykład:hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 Można określić kolor tła przycisku w momencie nadkładania kursora myszy oraz kolor obramowania w momencie, gdy przycisk przyjmuje fokus.