Podróż z Tailwind CSS: Od zera do budowy nowoczesnych, responsywnych interfejsów webowych

Co to jest Tailwind CSS?

Tailwind CSS to framework CSS, który skupia się na funkcjonalności i oferuje wielką liczbę prostych, praktycznych klas, które pomagają szybko tworzyć własne rozwiązania graficzne. W odróżnieniu od frameworków typu Bootstrap, które dostarczają gotowe komponenty (np. przyciski, karty), Tailwind udostępnia “atomskie klasy” – elementy, które są potrzebne do budowania tych komponentów. Na przykład klasy służące do kontrolowania marginesów wewnętrznych. p-4Umożliwia kontrolę koloru tekstu. text-blue-500 Związane z kontrolą rozmiaru i ułożeniem elementów w elastycznych kontenerach (elastic boxes) flexPodstawa tego sposobu jest bezpośrednie umieszczanie stylów w kodzie HTML, co znacząco poprawia efektywność rozwoju aplikacji oraz zapewnia wysoką spójność wizualnego wyglądu całego projektu.

Jego podstawowy mechanizm działania…

Śródkowym elementem narzędzia Tailwind jest plugin PostCSS napisany w JavaScript (z wykorzystaniem technologii Node.js). Podczas procesu budowy projektu narzędzie skanuje pliki projektu w poszukiwaniu wszystkich używanych klasów i generuje tylko te style CSS, które są rzeczywiście potrzebne do finalnego pliku CSS w środowisku produkcyjnym. Ten proces nosi nazwę “Tree Shaking” („Lustrzenie drzewa”) i umożliwia uzyskanie jak najmniejszego rozmiaru pliku CSS, unikając problemów związanych z koniecznością włączenia całej bazy klas w tradycyjnych frameworkach CSS. tailwind.config.js W tym pliku konfiguracji zdefiniowane są kolorystyka tematyczna, proporcje odstępów, punkty przerwania oraz wszystkie inne parametry projektowe.

Jak zacząć korzystać z Tailwind CSS?

Można zacząć korzystać z Tailwind CSS na różne sposoby, ale najpopularniejsze jest wykorzystanie oficjalnego narzędzia CLI lub integracja z narzędziami do budowy front-endu. Poniżej przedstawiono standardowy proces integracji z pomocą npm i PostCSS, który zapewnia dostęp do największej liczby funkcji oraz najlepszą wydajność w projekcie.

Polecamy lekturę. Przewodnik po Tailwind CSS: Jak budować nowoczesne interfejsy od zera。

Najpierw należy inicjalizować projekt i zainstalować Tailwind CSS oraz jego zależności za pomocą narzędzia npm.

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 init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Po zakończeniu instalacji otrzymasz… tailwind.config.js Plik. Musisz zmienić zawartość tego pliku. content Aby określić, które pliki Tailwind ma skanować w poszukiwaniu nazw klas, należy użyć odpowiednich polów. To zwykle pliki z twoimi HTML-templatami, pliki z komponentami JavaScript itp.

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

Następnie stwórz główny plik CSS (na przykład…). src/input.cssDodaj odpowiednie elementy do kodu i wdroż instrukcje z biblioteki Tailwind.

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

Na koniec konfiguruj proces budowy aplikacji. Jeśli używasz narzędzia takiego jak Vite, upewnij się, że konfiguracja PostCSS jest poprawna. Stwórz plik z konfiguracją PostCSS i włącz go do projektu. postcss.config.js Dokumenty.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Teraz uruchom komendę budowy (na przykład: npm run buildZależy to od konfiguracji twojego skryptu, ale Tailwind zajmie się obsługą twoich plików CSS i wygeneruje ostateczny format stylów. Po tym możesz zacząć używać przydatnych klas dostępnych w Tailwind w kodzie HTML.

Polecamy lekturę. Opanowanie CSS w ramach frameworku Tailwind: praktyczny przewodnik od počatków do doskonałości oraz najlepsze praktyki。

Podstawowe klasy przydatne w programowaniu oraz projektowanie responsywne

Klasy przydatne w Tailwind CSS obejmują wszystkie aspekty stylizacji: od układu strony, odstępów pomiędzy elementami, formatowania tekstu po tła, obramowania i efekty wizualne. System projektowania w Tailwind charakteryzuje się dużą spójnością – na przykład odstępy są ustalane według określonych proporcji (np. wielokrotności 0.25rem), a kolory pochodzą z wcześniej przygotowanego palety kolorów.

Klasy dotyczące układu i odstępów

Klasy związane z układem (layout) flex, grid, block, inline-block Można go używać bezpośrednio. Odstęp można ustawić poprzez… p-{size}(Padding) i m-{size}(Margi) służą do kontroli, na przykład… p-4 Oznacza margines wewnętrzny równy 1rem.mt-2 Oznacza margines górny wynoszący 0,5 rem.

<div class="flex p-4 space-x-4">
  <div class="p-2 bg-gray-200">Projekt nr 1</div>
  <div class="p-2 bg-gray-200">Projekt nr 2</div>
</div>

Reaktywny prefiks punktu przerwania (Responsive breakpoint prefix)

Jedną z potężnych funkcji Tailwind CSS jest jego responsywny design. Wbudowano w niego pięć standardowych punktów przerwania (breakpoints).sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Poprzez dodanie prefiksu „breakpoint” przed klasy praktyczne, możesz łatwo stworzyć interfejs reagujący na różne rozmiary ekranów. Na przykład:md:flex Oznacza to, że na ekranach o średnim rozmiarze i większych używa się elastycznej rozkładki (layoutu).text-center lg:text-left Oznacza, że tekst jest ustawiony w standardowym rozmiarze i centralnie wyświetlony; na dużych ekranach tekst jest wyświetlany z lewej strony.

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.

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

Praktyka: Tworzenie responsywnego menu nawigacyjnego

Połączmy to, co uczyliśmy się, tworząc typową nawigację responsywną. Na dużych ekranach ta nawigacja będzie wyświetlana w poziomie, a na małych ekranach zmieni się w menu w formie hamburgera.

Najpierw przygotujemy strukturę nawigacji poziomnej dla dużych ekranów.

<nav class="bg-gray-800 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <!-- 品牌 Logo -->
    <a href="#" class="text-white text-xl font-bold">Moja marka</a>
    <!-- 桌面端导航链接 -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-300 hover:text-white">Strona główna</a>
      <a href="#" class="text-gray-300 hover:text-white">O…</a>
      <a href="#" class="text-gray-300 hover:text-white">usługa</a>
      <a href="#" class="text-gray-300 hover:text-white">Kontaktować</a>
    </div>
    <!-- 移动端菜单按钮 -->
    <button id="menuBtn" class="md:hidden text-white">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">...</svg>
    </button>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobileMenu" class="md:hidden hidden mt-2">
    <a href="#" class="block text-gray-300 hover:text-white py-2">Strona główna</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">O…</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">usługa</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">Kontaktować</a>
  </div>
</nav>

Dodaj funkcję interakcji.

Wyznana powyżej struktura HTML jest realizowana poprzez… hidden 和 md:flex Klasy tego typu implementują rozmiarową (responsywne) rozkładkę. Aby w mobilnym urządzeniu zmieniać wyświetlanie lub ukrywanie menu, potrzebny nam jest prosty kod JavaScript.

Polecamy lekturę. Światowy przewodnik po CSS od Tailwind: praktyczny kurs od poznania podstaw do osiągnięcia mistrzostwa。

// 简单的菜单切换逻辑
document.getElementById('menuBtn').addEventListener('click', function() {
  const menu = document.getElementById('mobileMenu');
  menu.classList.toggle('hidden');
});

Ten przykład pokazuje, jak za pomocą praktycznych klas z biblioteki Tailwind CSS oraz prostego funkcji w JavaScriptu można szybko stworzyć responsywny komponent o pełnej funkcjonalności i profesjonalnym wyglądzie. Można łatwo dostosować jego wygląd, zmieniając kolory tła, odstępy pomiędzy elementami, efekty przy nadkładaniu kursora itd., aby pasował do Twojego projektu graficznego.

Podsumowanie.

Tailwind CSS znacząco zmienił sposób, w jaki programiści front-end tworzą stylizację, dzięki swojej metodologii opartej na funkcjonalnych klasach. Usunął konieczność częstych przekładów pomiędzy plikami HTML a CSS, co zmniejszyło koszty związane z koniecznością utrzymywania jednolitego kontekstu. Zawdzięcza to konwergencyjnym zasadom projektowania, a także zaawansowanym technikom optymalizacji w czasie budowy aplikacji. Od prostych prototypów po złożone aplikacje biznesowe, Tailwind oferuje wyjątkowe doświadczenie rozwojowe i łatwość utrzymania kodu. Opanowanie kluczowych klas, prefixów reaktywnych oraz metod konfiguracji znacząco poprawi twoją efektywność pracy i umiejętności projektowania w środowisku front-end.

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.

FAQ – najczęściej zadawane pytania.

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

Nie, właśnie w tym tkwi genialność projektu Tailwind. Podczas etapu budowy produktu Tailwind wykorzystuje narzędzie PurgeCSS (teraz włączone bezpośrednio do samego narzędzia do tworzenia kodu), które “wyciska” niepotrzebne elementy z plików CSS. Pozostają tylko klasy CSS, które faktycznie są używane w plikach HTML, JavaScript itp. Wynikający plik CSS ma zwykle rozmiar od kilku KB do kilku dziesięciu KB, co jest znacznie mniejsze niż w przypadku wielu tradycyjnych frameworków CSS.

Czy pisanie tak wielu nazw klas w HTML-u sprawia, że kod staje się trudniejszy do odczytywania i utrzymywania?

To faktycznie jeden z najczęściej występujących początkowych problemów. Doświadczenia pokazują, że umieszczenie stylów w bliskiej odległości od struktury znacząco zmniejsza trudności związane z ich wyszukiwaniem i modyfikacją. W przypadku złożonych komponentów można skorzystać z narzędzia Tailwind. @apply Poleczenie polega na wyjęciu często używanych klas praktycznych i umieszczeniu ich do pliku CSS, w celu stworzenia własnych klas komponentów. Ponadto dobre rozszerzenia edytora (np. Tailwind CSS IntelliSense) oferują funkcje autouzupełniania i prezentacji efektów wizualnych przy nadkładaniu kursora, co znacznie poprawia doświadczenie rozwoju.

Z jakimi frameworkami JavaScript można łączyć używanie Tailwind CSS?

Tailwind CSS nie jest zależny od żadnego frameworku i doskonale współpracuje z każdym front-end frameworkiem lub biblioteką. Otrzymuje doskonałą wsparcie oraz szeroką aplikację w środowisku użytkowników w takich frameworkach jak React, Vue.js, Angular, Svelte, a także w tradycyjnych generatorach stron statycznych (Next.js, Nuxt.js, Gatsby, Hugo). Proces jego działania (skanowanie plików, generowanie stylów) może zostać bezproblemowo integrowany z narzędziami do budowy aplikacji w tych frameworkach.

Jak dostosować domyślną tematykę Tailwind CSS, na przykład kolorystykę odpowiadającą kolorom marki?

Aby dostosować temat, należy zmienić pliki znajdujące się w korzenowym katalogu projektu. tailwind.config.js Konfiguracja jest dostępna w pliku konfiguracji. Możesz ją zmienić według potrzeb. theme.extend Dodaj lub zastąp wartości domyślone w obiekcie. Na przykład, aby dodać kolor marki własnej, konfiguruj to w następujący sposób:

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

Po skonfiguracji możesz zacząć używać tego w projekcie. bg-brand-blue 或 text-brand-blue Taka klasa. Wszystkie kluczowe wymiary, fonty, punkty przerwania itd. można dostosować w podobny sposób.