Pełny przewodnik po CSS od Tailwind: budowanie nowoczesnych, responsywnych interfejsów od zera

Podstawowe zasady i zalety CSS frameworku Tailwind

Tailwind CSS to framework CSS z przyorytetem na praktyczność, który odznacza się istotnymi różnicami w filozofii projektowania w porównaniu z tradycyjnymi frameworkami UI. Jego istotą jest dostawienie zestawu klasów o niskim poziomie abstrakcji, które umożliwiają programistom tworzenie dowolnych elementów graficznych bezpośrednio w kodzie HTML, zamiast używania gotowych, niezmiennych komponentów. Taki podejście znacząco poprawia efektywność i elastyczność rozwoju aplikacji.

Aplikuje styl poprzez dostarczenie jednego, funkcjonalnego nazwiska klasy, na przykład poprzez użycie… text-center Aby tekst został umieszczonej w środku, użyj następującego kodu: p-4 Aby dodać marginy, należy skorzystać z odpowiednich značek w kodzie HTML. Taki sposób eliminuje konieczność ciągłego przekładania między różnymi plikami z stylami i językami programowania, ponieważ wszystkie elementy stylu są umieszczone bezpośrednio w kodzie. Dodatkowo dzięki kombinacji różnych elementów można łatwo stworzyć zupełnie unikalne rozwiązania designowe, bez ograniczeń wynikających z tematów lub bibliotek komponentów dostępnych w frameworkach.

Kolejnym istotnym atutem jest kontrolowana wielkość pakietów. Poprzez użycie… purgecssW wersjach Tailwind CSS v2 i późniejszych integracja z procesem budowy aplikacji umożliwia automatyczne usuwanie wszystkich nie używanych elementów CSS. Dzięki temu plik CSS ostateczny, używany w środowisku produkcyjnym, ma zwykle rozmiar kilku KB, co gwarantuje wyjątkowo dobrą wydajność aplikacji.

Polecamy lekturę. Jak szybko stworzyć nowoczesną, responsywną stronę internetową za pomocą Tailwind CSS?。

Jak zacząć instalację i konfigurację?

Aby zacząć używać Tailwind CSS, najpierw trzeba go zainstalować w projekcie za pomocą narzędzia do zarządzania pakietami. Najpopularniejsze metody to używanie npm lub yarn. Pokażemy standardowy sposób integracji za pomocą PostCSS, który jest rekomendowanym sposobem pracy przez Tailwind.

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 →

Najpierw w katalogu głównym projektu inicjalizuj narzędzie npm i zainstaluj bibliotekę Tailwind CSS oraz wszystkie jej zależności. Konieczne jest wykonanie następujących kroków: tailwindcss、postcss 和 autoprefixerNastępnie należy stworzyć plik konfiguracji dla Tailwind CSS. tailwind.config.js W połączeniu z plikami konfiguracji PostCSS… postcss.config.js。

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Następnie, w głównym pliku CSS projektu (na przykład…) src/styles.css 或 @/styles/globals.cssWprowadzamy instrukcje Tailwind CSS. Te instrukcje stanowią punkty wejścia do generowania wszystkich przydatnych klas podczas procesu budowy aplikacji.

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

Na koniec… tailwind.config.js Ustawienia w środkowym obszarze („Central Configuration”) content Ścieżka pokazuje Tailwind, które pliki ma skanować w celu wykonywania procedury PurgeCSS (lub analizy struktury kodu za pomocą JIT engine). To kluczowe dla optymalizacji aplikacji w środowisku produkcyjnym.

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

Po uruchomieniu procesu budowy Tailwind generuje pliki CSS na podstawie nazw klas używanych w twoich szablonach HTML.

Polecamy lekturę. Pełne opanowanie Tailwind CSS: Przewodnik po najnowszym frameworku CSS, od podstaw do praktycznego zastosowania。

Podstawowa gramatika języka przydatnego w praktycznych celach oraz projektowanie responsywne

Sintaksa CSS w Tailwind jest bardzo intuicyjna i opiera się na zasadzie nazewania elementów w formacie “atrybut–wartość”. Na przykład:mt-4 Wyraź to. margin-top: 1rem;，bg-blue-500 Wyraź to. background-color: #3b82f6;Wartości liczbowe zwykle odpowiadają ustalonym standardowym skalom odległości (0, 0.25rem, 0.5rem, 1rem…) lub paletom kolorów (50, 100, 200, … 900).

Tworzenie responsywnych interfejsów to jedna z największych zalet frameworku Tailwind. Zgodnie z zasadą projektowania, która daje priorytet urządzeniom mobilnym, nazwy klas nie zawierają żadnych prefiksów i są stosowane we wszystkich rozmiarach ekranów, natomiast nazwy klas z prefiksami są używane w przypadku określonych rozmiarów ekranów lub większych. W ramach frameworku znajdują się pięć standardowych punktów rozłączenia („breakpoints”).sm (640px)md (768px)lg (1024px)xl (1280px) i 2xl (1536px).

<div class="text-sm bg-gray-100 p-4 md:text-base md:bg-white lg:p-8">
  <!--
    在移动设备上：小字体、灰色背景、1rem 内边距。
    在中等屏幕及以上：基准字体、白色背景。
    在大屏幕及以上：2rem 内边距。
  -->
  To jest responsywny kontener typu div.
</div>

Poza prefiksami reaktywnymi (responsive prefixes) bardzo często używane są także prefiksy odnoszące się do różnych wariantów stanu (state variation prefixes). hover:、focus:、active: It umożliwia łatwe dodawanie stylów do stanów interakcji.

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.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停我
</button>

Dostosowane tematy i rozszerzenia w postaci pluginów

Choć Tailwind oferuje bogatą gamę dostępnych wzorów projektowych, rzadko używa się wszystkich dostępnych ustawień standardowych. Aby dostosować temat aplikacji, należy zmienić odpowiednie elementy składu projektu. tailwind.config.js Z pliku theme Zrealizowano to w części poprzez dostosowanie standardowych elementów interfejsu: palety kolorów, fontów, skali odległości pomiędzy elementami, punktów przerwania itd. Możesz zastąpić wszystkie te elementy według swoich potrzeb.

Na przykład, jeśli chcesz dodać kolor marki według własnych wymagań oraz rozszerzyć standardowy styl zaokrąglenia elementów, możesz to zrobić w następujący sposób:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      borderRadius: {
        'extra-large': '3rem',
      }
    },
  },
}

Później możesz używać w projekcie elementów takich jak… bg-brand-primary 和 rounded-extra-large Takie nazwy klas.

Polecamy lekturę. Podróż z CSS Tailwind: Od zera do budowy nowoczesnych, responsywnych stron internetowych。

Gdy wewnętrzne klasy nie mogą spełnić określonych wymagań, można rozszerzyć funkcjonalność aplikacji za pomocą systemu dodatków (plug-inów). Możesz napisać własne dodatki lub skorzystać z bogatej oferty dostępnych w społeczności. Na przykład, można zainstalować oficjalnie dostępne dodatki. @tailwindcss/forms 和 @tailwindcss/typography Dodatki umożliwiają lepszą formatowację formularzy oraz treści bez żadnego stylu wizualnego.

npm install -D @tailwindcss/typography

A potem zarejestruj to w pliku konfiguracji:

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.

module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    // 其他插件
  ],
}

Proces budowy złożonych komponentów

Podczas budowy złożonych komponentów za pomocą Tailwind CSS może wystąpić problem zbyt długich nazw klas w HTML. Aby to rozwiązać, Tailwind poleca kilka najlepszych praktyk. Pierwsza z nich to… @apply W CSS instrukcje służą do wykrywania powtarzających się kombinacji klas praktycznych. To pomaga utrzymać czystość kodu HTML oraz stworzyć zasady stylizacji (CSS), które można ponawiać w innych projektach.

/* 在你的 CSS 文件中 */
.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 w HTML wystarczy użyć tylko jednego nazwiska klasy:

<button class="btn-primary">
  点击
</button>

W przypadku bardziej złożonych frameworków bazowanych na komponentach (np. React, Vue) najlepszą praktyką jest zapisywanie klas stylowych bezpośrednio w szablonach komponentów, wykorzystując ich zamykłość do zarządzania wyglądem. Jeśli ten sam komponent jest używany w kilku miejscach, można rozważyć wykorzystanie bibliotek typu CSS-in-JS (np. Twin Macro) lub wyodrębnienie powtarzających się elementów wzoru do plików konfiguracji. components „Warstwy” są często używane w projektowaniu, ale drugi z wspomnianych terminów („layer”) jest rzadko stosowany w obecnym czasie w ramach rozwoju modułowego.

Kolejnym istotnym pojęciem jest balans pomiędzy zasadą “prioritety funkcjonalnych elementów” a stosowaniem “semantycznych nazw klas”. W przypadku elementów interfejsu użytkownika, które są powtarzalne i mają jasno określone znaczenie (np. kartki, znaków identyfikacyjnych, nagłówków nawigacyjnych), zaleca się używać semantycznych nazw klas. @apply Stworzenie klas komponentów jest rozsądne. Jednak w przypadku większości jednorazowych zmian lub drobnych modyfikacji stylu lepszą efektywność i większą elastyczność rozwoju zapewni używanie klas funkcjonalnych.

Podsumowanie.

Tailwind CSS znacząco zmienił sposób, w jaki programiści piszą CSS, dzięki swojej unikalnej metodologii przyoritetyzowania elementów. Dzięki oferowanej gamie dokładnych, kombinowanych klasów poziomu bazowego przerzuca decyzję o stylu na programistów, co znacznie zwiększa efektywność rozwoju przy zachowaniu wysokiej elastyczności dostosowania. Od prostego procesu instalacji i konfiguracji po gramatykę reaktywną, personalizację tematów oraz budowę złożonych komponentów, Tailwind oferuje kompletną gamę narzędzi i porad dotyczących pracy. Wielka integracja z PurgeCSS gwarantuje wysokie wydajność ostatecznego produktu, a aktywna społeczność oraz ekosystem dodatków umożliwia dostosowanie narzędzia do zmieniających się wymagań front-endu. Opanowanie Tailwind CSS oznacza posiadanie potężnego narzędzia, które umożliwia szybkie reagowanie na zmiany w projektach graficznych oraz tworzenie wysokiej jakości interfejsów użytkownika.

FAQ – najczęściej zadawane pytania.

Czy używanie Tailwind CSS może doprowadzić do chaotycznej struktury HTML?

Zależy to od sposobu organizacji pracy programistów. Choć dodawanie kilku nazw klas bezpośrednio w HTML może wydawać się nieefektywnym, to w rzeczywistości umożliwia lepsze połączenie stylu z strukturą kodu, eliminując konieczność częstych przemieszczania się pomiędzy plikami CSS a HTML. W dużych projektach można zorganizować stylizację za pomocą frameworków komponentowych (np. React, Vue) lub innych metod związanych z modularizacją kodu. @apply Wykonuj wydobycie powtarzających się wzorów stylu z kodu, aby zachować jego schlachetność i czytelność.

Co to jest tryb JIT (Just-In-Time) w Tailwind CSS?

Tryb JIT (Just-In-Time) został wprowadzony w wersji Tailwind CSS 2.1 i stał się jedynym dostępnym trybem w wersji 3.0. Funkcjonuje tak, że CSS generuje się w momencie potrzeby, wraz z tworzeniem szablonów, zamiast tworzenia wszystkich możliwych klas zawsze wcześniej. To przynosi wiele korzyści: proces budowy aplikacji w środowisku rozwojowym jest znacznie szybszy, a także jest możliwe obsługiwanie dowolnych kombinacji wartości (np. różnych ustawień stylu). p-[13px]Generowany kod CSS jest zawsze najmniejszy w środowisku produkcyjnym, ponieważ zawiera tylko te style, które faktycznie są potrzebne.

Jak przećiągnąć lub resetować ustawienia stylu domyślne w przeglądarcu?

Tailwind CSS w swoim podstawowym poziomie…@tailwind base) zawiera element o nazwie Preflight Zbiór stylów do modernizacji wyglądu. Bazuje się na… normalize.cssAle wprowadzono wiele dodatkowych, celowych zmian, aby stworzyć czysty i spójny punkt startu dla dostosowanego designu, który będzie funkcjonować w różnych przeglądaczach. Na przykład usunięto wszystkie domyślone marginy i ustawiono model elementów (box model) w odpowiedni sposób. border-boxUstandaryzowano także styl nagłówków i list. Jeśli chcesz to całkowicie wyłączyć lub dokonać częściowych zmian, możesz to zrobić w pliku konfiguracji.

Czy Tailwind CSS może współistnieć z innymi frameworkami CSS lub istniejącymi projektami?

Można to zrobić, ale są kilka zasad, o których trzeba pamiętać. Możesz stopniowo wdrażać Tailwind CSS do istniejących projektów. Trzeba uważać na to, że jego funkcja resetowania stylów („Preflight”) może wpłynąć na istniejące elementy wyglądu. Popularnym sposobem jest używanie Tailwind CSS wyłącznie w nowych komponentach lub modułach, a następnie ostrożne dostosowanie zasięgu wpływu tych bazowych stylów. Ponadto należy upewnić się, że nazwy generowanych przez Tailwind klasy nie będą się pokrywać z nazwami klasy w projekcie – to można uzyskać poprzez odpowiednie ustawienia. prefix Można użyć opcji, aby dodać jednolity prefiks do wszystkich klas z biblioteki Tailwind.

Jak dostosować określone wartości w Tailwind CSS, które nie występują w standardowym zestawie elementów dostępnych w tej bibliotece?

W trybie JIT (Just-In-Time) ułatwia się definiowanie dowolnych wartości. Możesz użyć składni z nawiasów kwadratowych, by bezpośrednio w nazwie klasy określić dowolną wartość CSS. Na przykład:top-[-113px]、bg-[#1da1f2] 或 w-[calc(100%-1rem)]W przypadku niestandardowych wartości wymagających globalnego ponownego użycia zaleca się umieszczenie ich w pliku app/config/config.php. tailwind.config.js Dokumenty theme.extend Część elementów można zdefiniować wcześniej, co zapewnia spójność całego systemu projektowego i ułatwia jego utrzymanie.