Poznaj Tailwind CSS: przewodnik po nowoczesnym frameworku CSS, od podstaw do zaawansowanych technik.

Jako framework CSS z przyorytetem praktyczności…Tailwind CSS Podstawową filozofią tego produktu jest zasada “funkcja nad wszystko”. Nie oferuje żadnych wcześniej zdefiniowanych, semantycznych klas komponentów (np. …). .btn 或 .cardZamiast tworzyć własne klasy, dostępna jest cała seria atomowych klas o szczegółowym zdefiniowaniu i jednej zasadniczej funkcji. Programiści mogą budować zupełnie dostosowane rozwiązania poprzez łączenie tych klas bezpośrednio z elementami HTML. Dzięki temu uda się osiągnąć mocne połączenie między stylem a strukturą, a przy tym zachować wysoki poziom utrzymania i spójności kodu.

Podstawowe zalety Tailwind CSS:

Niesamowita efektywność rozwoju

Dzięki kombinacji klas atomowych programiści nie muszą często przechodzić pomiędzy plikami HTML a CSS. Decyzje dotyczące projektu są podejmowane bezpośrednio na poziomie elementów strony, co znacznie przyspiesza proces tworzenia prototypów i ich iteracji. Na przykład, aby stworzyć przycisk, wystarczy tylko podać nazwę klasy w kodzie HTML – nie trzeba tworzyć osobnego kodu CSS dla niego.

Spójność w projektowaniu

Wbudowany w ramę system projektowania (odstupy, kolory, wielkość fontów, punkty przerw itd.) wymaga, aby cały projekt stosował jednolite zasady. To eliminuje niespójności wynikające z dowolnego ustalania wartości i gwarantuje spójność wizualnego stylu projektu.

Polecamy lekturę. Co to jest Tailwind CSS?。

Niewielka wielkość pakietu produkcyjnego

Tailwind CSS Użyj PurgeCSS(W wersjach od v3.0 i późniejszych nazywa się to “skanowaniem zawartości”) ma na celu usunięcie wszystkich klas CSS, które nie są używane w projekcie. Dzięki temu plik CSS, który zostanie wygenerowany w końcu, zawiera tylko te style, które rzeczywiście są potrzebne, a jego wielkość wynosi zwykle kilka KB. To sprawia, że wydajność aplikacji jest znacznie poprawiona.

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 →

Wysoka stopnia personalizacji

Choć dostępne są gotowe do użycia tokeny projektowe, możesz je zmodyfikować według swoich potrzeb. tailwind.config.js Można dostosować temat w pełni za pomocą pliku konfiguracji. Można określić własne kolory, odstępy, fonty, a nawet stworzyć własne, przydatne klasy.

Szybka nauka obsługi i podstawowe ustawienia

Instalacja i inicjalizacja

Najpopularniejszy sposób instalacji to używanie narzędzi npm lub yarn. Po wykonaniu komendy instalacyjnej w katalogu głównym projektu zostanie utworzony plik konfiguracji standardowy. tailwind.config.js I plik z definiowaniami stylu podstawowego.

npm install -D tailwindcss
npx tailwindcss init

Path do konfiguracji

Inicjalizowany i wygenerowany. tailwind.config.js Pliki są kluczowe. Musisz je poprawnie konfigurować. content Pola, aby o tym powiedzieć. Tailwind Jakie pliki należy skanować, aby znaleźć nazwy używanych klas? To zwykle pliki szablonów lub komponentów.

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

Wprowadzenie podstawowych stylów

W twoim głównym pliku CSS (na przykład…) src/styles.cssW artykule wykorzystano @tailwind Polecenie do włączenia kluczowych stylów ramy.

Polecamy lekturę. Praktyczny przewodnik: szybkie tworzenie nowoczesnych, responsywnych stron internetowych z użyciem Tailwind CSS。

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

Następnie należy użyć narzędzi do budowy aplikacji (np. Vite, Webpack) lub wydać poleczenia z linii komendowej (CLI), aby przetworzyć ten plik CSS na czysty format CSS.

Podstawowe klasy przydatne w programowaniu oraz projektowanie responsywne

Wzory stosowane w klasach atomowych

Tailwind CSS Nazwy klas są wyjątkowo czytelne i są zgodne z zasadą “atrybut–wartość” lub “atrybut–przerwa–wartość”. Na przykład:p-4 Wyraź to. padding: 1rem；bg-blue-500 Oznacza, że kolor tła to kolor numer 500 z palety kolorów niebieskich.text-center Oznacza, że tekst ma zostać umieszczone w środku.

<button class="px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
  点击我
</button>

System punktów przerw reaktywnych

W ramach frameworku znajdują się pięć standardowych punktów przerwania („breakpoints”).sm, md, lg, xl, 2xlGdy używasz klas reaktywnych, priorytet ma rozdzielczość ekranu na urządzeniach mobilnych. Klasy bez prefiksu „breakpoint” są dostępne na wszystkich ekranach, natomiast klasy z tym prefiksem działają od określonej rozdzielczości.

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="text-sm md:text-base lg:text-lg">
  <!-- 在手机上字体小，在中等屏幕上变为基础大小，在大屏幕上变为大号字体 -->
  Tekst reaktywny
</div>

Varianta stanu

Za pomocą prefiksów można łatwo aplikować różne stile w zależności od stanu elementu, w tym także stile przy przeciąganiu kursora („hover”).hover:)、fokus (focus)focus:)、aktywacja (…)active:It to znaczenie ułatwia pisanie interaktywnych wzorów (interaction patterns).

<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none rounded">

Wysokiej klasy funkcje i praktyczne techniki

Dokładna konfiguracja na zamówienie

tailwind.config.js Dokumenty theme.extend Część z tych elementów służy do dodawania lub zmieniania ustawień tematycznego wyglądu strony („default theme”). Na przykład można dodać kolor identyfikujący markę lub ustawić własną wartość odstępu pomiędzy elementami strony; te nowe wartości będą używane przy generowaniu odpowiednich klasów programowych, podobnie jak wartości standardowe.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#3a86ff',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Wyjęcie komponentów oraz używanie @apply

Aby uniknąć powtarzania długiego ciągu identycznych klas w HTML, można użyć… @apply W CSS instrukcje umożliwiają wyodróżnienie elementów, które można używać ponawiająco w różnych częściach projektu, przy zachowaniu identycznego wyglądu. Jest to szczególnie przydatne w przypadku elementów, które pojawiają się często i dla których styl jest ustalony wcześniej.

Polecamy lekturę. Głębokie zrozumienie Tailwind CSS: od praktycznych klasów do współczesnych standardów rozwoju webu。

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply px-4 py-2 bg-brand text-white font-semibold rounded-lg hover:bg-opacity-90 transition-colors;
}

A potem użyj go w HTML-u:<button class="btn-primary">提交</button>

Wykorzystuj ekosystem oficjalnych pluginów.

Tailwind CSS Dostępne są bogate oficjalne dodatki, które umożliwiają rozszerzenie funkcjonalności. Na przykład:@tailwindcss/forms Ulepszyć standardowe wyglądanie elementów formularza.@tailwindcss/typography Aby zapewnić piękny format tekstu w formacie Markdown oraz innych nieznanych formatów, wystarczy tylko zainstalować odpowiednie narzędzie i skonfigurować je w pliku konfiguracji. plugins Można to zrobić poprzez wstawienie elementu do arrayu.

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.

Integracja z najnowszymi frameworkami front-end

Tailwind CSS Integracja z frameworkami takimi jak React, Vue, Next.js, Nuxt.js jest już bardzo dojrzała. Zwykle dostępne są oficjalne szablony lub materiały dostarczone przez społeczność, które umożliwiają szybkie uruchomienie aplikacji z włączoną integracją z tych frameworków. Tailwind Projekt ten jest gotowy do użycia po otworzeniu opakowania.

Na przykład za pomocą Next.js można szybko stworzyć projekt:

npx create-next-app@latest --tailwind

Podsumowanie.

Tailwind CSS Dzięki swojemu podejściu, bazującemu na klasach atomowych z naciskiem na funkcjonalność, znacząco zmienił się sposób pisania CSS przez programistów. Rozwiązanie to przenosi decyzje dotyczące stylu na poziom elementów strukturalnych, co przyspiesza proces rozwoju i ułatwia utrzymanie aplikacji. Ponadto zapewnia wyjątkową wydajność dzięki inteligentnemu skanowaniu zawartości. Od szybkich prototypów po zaawansowane aplikacje produkcyjne, wysoka dostosowalność oraz wsparcie dla rozwiązań responsywnych i z zmiennymi stanami czynią z niego niezbędny element w współczesnym rozwoju webu. Opanowanie jego konfiguracji, praktycznych narzędzi i zaawansowanych technik pozwoli ci skuteczniej tworzyć interfejsy użytkownika, które są zarówno efektywne, jak i spójne.

FAQ – najczęściej zadawane pytania.

Czy długie nazwy klas w Tailwind CSS mogą wpłynąć na czytelność kodu HTML?

To jest dość powszechny problem na początku. W praktyce programiści stopniowo zapoznają się z najczęściej używanymi kombinacjami nazw klas i uczą się ich stosować. @apply Można wydzielać klasy komponentów lub łączyć je z front-end frameworkami (np. komponenty React, Vue), co umożliwia osobne zarządzanie długim списkiem klas i utrzymywanie czystości głównego szablonu. Narzędzia takie jak Prettier w formie dodatków (plug-inów) mogą pomóc w formatowaniu nazw klas, poprawiając tym czytelność kodu.

W jaki sposób Tailwind różni się od tradycyjnych bibliotek komponentów interfejsu użytkownika (np. Bootstrap)?

Tradycyjne biblioteki interfejsów użytkownika (UI) oferują gotowe elementy o ustalonym stylu (np. menu nawigacyjne, karty). Aby je dostosować, zwykle konieczne jest napisanie własnych kodów, które zmieniają wygląd tych elementów. To może doprowadzić do konfliktów pomiędzy różnymi zasadami stylizacji w CSS oraz do powstania nadmiernie złożonego kodu.Tailwind CSS Nie są dostępne żadne konkretne komponenty – dostępny jest tylko wyłącznie “elementarny” styl, który stanowi „budulec” do tworzenia interfejsów użytkownika. Dzięki temu developerzy mają pełną kontrolę nad procesem projektowania i mogą budować unikalne interfejsy od zera, przy jednoczesnym zachowaniu spójności całego systemu designowego.

Jak wybrać własną składkę kolorów dla projektu?

Musisz to zrobić w pliku konfiguracji projektu. tailwind.config.js 的 theme.extend.colors Niektóre elementy można zdefiniować według własnych potrzeb. Możesz bezpośrednio zmienić standardową paletę kolorów lub dodać nowe kolory. Nazwy i wartości zdefiniowanych kolorów automatycznie generują odpowiednie wartości dla kolorów tła, tekstu, obramowań itd.

Jak Tailwind CSS optimizuje swoją wielkość (rzeczywistą wielkość pliku zawierającego kod CSS) w środowisku produkcyjnym?

W fazie tworzenia produktu (produkcji):Tailwind Skanuje to, co masz w pliku konfiguracji. content Program wykrywa wszystkie nazwy klas z określonych źródłowych plików i dołącza tylko te reguły CSS, które są faktycznie używane. Pozostałe reguły są wykreślone, dzięki czemu plik CSS jest bardzo zredukowany i nie zawiera niepotrzebnych elementów. Cały proces jest automatyczny.

Czy obsługuje tryb ciemny?

Tak.Tailwind CSS Posiada wyjątkową, rdzenną obsługę trybu koloru ciemnego. Możesz to uzyskać poprzez… dark: Aby zastosować styl w ciemnym kolorze dla elementów, należy najpierw… tailwind.config.js Ustawienia w aplikacji mobilnej darkMode: 'class'(A lub ‘media’), a potem w elemencie głównym HTML dodaje się lub usuwa to element poprzez odpowiednie działania. class="dark" Aby zmienić tryb działania.

html