Wprowadzenie do Tailwind CSS i praktyczne ćwiczenia: tworzenie nowoczesnych, responsywnych interfejsów internetowych od podstaw.

Czym jest Tailwind CSS?

W tradycyjnym rozwoju CSS zwykliśmy definiować semantyczne nazwy klas dla elementów stron, a potem tworzyć konkretne zasady stylu w osobnej tabeli stylów. Taki podejście często wymaga częstych przekładów pomiędzy plikami HTML a CSS, a wraz z rozwojem projektu tabela stylów może stać się zbyt duża i trudna do utrzymania.Tailwind CSS W związku z tym zastosowano zupełnie inny podejście, oparty na koncepcji “funkcji jako najwyższego priorytetu” w ramach frameworku CSS. Ten framework oferuje szeroką gamę detalicznych, powtarzalnych elementów („klasów”) dostępnych do użycia przez programistów. Ci mogą bezpośrednio budować dowolny design w kodzie HTML lub JSX, łącząc te elementy ze sobą.

Jego najważniejszą zaletą jest to, że eliminuje zależność od dostosowanego CSS (Custom Style Sheets). Nie musisz już długo myśleć nad nazwami klas dla przycisków, kart czy nawigacji, ani martwić się o konflikty stylów. Na przykład, aby stworzyć przycisk z zaokrągłonymi krawędziami, niebieskim tłem, białym tekstem i odpowiednim marginesem, wystarczy napisać:<button class=“rounded bg-blue-500 text-white p-4”>按钮</button>Taki sposób rozwoju znacząco przyspiesza proces tworzenia interfejsów użytkownika oraz poprawia ich spójność. Ponadto za pomocą narzędzi takich jak PurgeCSS (wbudowanego w Tailwind v3 i wyższych wersjach jako narzędzie do optymalizacji kodu) można automatycznie usunąć nie używane elementy stylu, co sprawia, że generowany plik CSS jest bardzo kompaktowy.

Jak zacząć korzystać z Tailwind CSS?

Zacznij korzystać z usługi Tailwind CSS Istnieje kilka sposobów, a najpopularniejszy to używanie oficjalnego narzędzia CLI lub integracja z narzędziami do budowy frontendów.

Polecamy lekturę. Przewodnik po Tailwind CSS: tworzenie nowoczesnego, responsywnego interfejsu od podstaw.。

Można szybko zainstalować programikę za pomocą narzędzi npm (Node Package Manager) i CLI (Command Line Interface).

Najzaleczonej metodą jest instalacja pakietu Tailwind za pomocą narzędzia npm oraz użycie jego narzędzia linii poleceń do inicjalizacji projektu. Najpierw w katalogu górnym twojego projektu wykonaj w terminalu następujący komend:

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

Pierwszy rozkaz… tailwindcss Zainstaluj jako zależność potrzebną do rozwoju. Druga komenda wygeneruje plik konfiguracji standardowy. tailwind.config.jsTen plik stanowi klucz do tworzenia własnego tematu dla Tailwind CSS, dodawania pluginów oraz konfiguracji ścieżek używanych do procesu „Purge”.

Konfiguracja pliku konfiguracji Tailwind CSS

Wygenerowane. tailwind.config.js Początkowy zawartość pliku jest bardzo prosty. Aby upewnić się, że Tailwind skanuje twoj plik HTML i usunie nie używane style, konieczne jest to konfigurowanie. content Pola. Na przykład, w typowym projekcie Vue lub React konfiguracja może wyglądać następnie:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [“./src/**/*.{html,js,vue,jsx,tsx}”],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ta konfiguracja instruuje Tailwind, by przeprowadzić skanowanie. src Wykonaj skanowanie wszystkich plików w katalogu o wskazanych rozszerzeniach i wydziel z nich klasy narzędzi (tool classes) używane w tych plikach.

Wdrożenie podstawowych stylów do projektu

Po instalacji i konfiguracji należy włączyć poszczególne elementy biblioteki Tailwind CSS do pliku CSS znajdującego się w korzeniu projektu. Zwykle tworzy się plik o nazwie… src/styles.css 或 src/index.css Plików i dodaj następujące instrukcje:

Polecamy lekturę. Opanowanie Tailwind CSS: Praktyczny przewodnik od počzątków do mistrzostwa。

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

@tailwind base Zainstalowane są podstawowe style z biblioteki Tailwind, które służą do resetowania standardowych ustawień i zapewnienia spójnego wyglądu całego projektu.@tailwind components Zainstalowane są komponenty dostępne w pakietach Tailwind (np. kontenerzy), a także te, które wybrałeś sam. @apply Klasa komponentów zarejestrowanych do realizacji instrukcji.@tailwind utilities Wtedy są włączone wszystkie klasy funkcjonalne – to jest najważniejszy element całego systemu.

Na koniec upewnij się, że twoje procesy budowy (np. przy użyciu Vite lub Webpack) są w stanie obsługiwać ten plik CSS, a także że można go skonfigurować za pomocą poleceń CLI. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Do kompilacji w czasie rzeczywistym.

Detaljowy opis klasy funkcjonalnych w Tailwind CSS

Tailwind CSS Klasa narzędziowa obejmuje wszystkie atrybuty CSS dotyczące układu, odstępów, formatowania, koloru, obramowań oraz efektów wizualnych. Zasady nazewania w tej klasie są bardzo intuicyjne i zwykle są zgodne z określonymi standardami. 属性{方向？}-{尺寸} W tym modelu…

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.

Kontrola odstępów i rozmiarów

Tailwind używa jednolitego systemu proporcji liczbowych do kontrolowania marginesów wewnętrznych i zewnętrznych, szerokości oraz wysokości elementów. Na przykład:p-4 Wyraź to. padding: 1rem(Domyślone ustawienie: 1 jednostka = 0.25rem)m-2 Wyraź to. margin: 0.5remMożesz użyć tego. px-、py-、pt-、pr- Przedrostki są używane do określenia konkretnego kierunku. Co do wymiarów…w-64 Wyraź to. width: 16rem，h-screen Wyraź to. height: 100vhTaka spójność sprawia, że rozstawienie i wyśrodkowanie elementów interfejsu jest niezwykle proste i regularne.

Kolory i styl tła

Tailwind oferuje dobrze zaprojektowaną paletę kolorów, w której każdy kolor ma stopień intensywności od 50 do 900. Można to uzyskać za pomocą nazw klas, np. text-blue-600(Kolor tekstu)bg-gray-100(Kolory tła)border-red-300(Kolor obramowania) można zastosować bezpośrednio. Można też łatwo zastosować tło z gradientem. bg-gradient-to-r from-cyan-500 to-blue-500 Opisuje linijarnągradację koloru od niebieskiego do ciemnoniebieskiego, przechodzącą z lewej strony na prawą.

Wzorowanie reaktywne i stany interakcji

Design responsywny w Tailwindu opiera się na zasadzie “mobile first” („przede wszystkim na urządzeniach mobilnych”). Każda klasa funkcjonalna jest przygotowana standardowo z myślą o urządzeniach mobilnych. Aby zastosować stylizację na większych rozmiarach ekranu, konieczne jest dodanie odpowiedniego prefiksu responsywnego. Na przykład:text-center md:text-left lg:text-2xl Oznacza centrowanie tekstu na urządzeniach mobilnych na ekranach o średnich rozmiarach.md:Zawartość musi być wyświetlana z wywinięciem na lewo (left alignment) od poziomu (…) i wyżej, na dużych ekranach.lg:Ustaw wielkość fontu na 16 punktów lub większą. 1.5rem。

Polecamy lekturę. Opanowanie Tailwind CSS: Przewodnik po kluczowych konceptach i praktycznych technikach od początkującego do doświadczonego użytkownika。

Rozwiązanie problemów związanych z stanem interakcji jest takie samo proste. Możesz używać prefiksów, np. hover:、focus:、active: Dodajemy styl dla różnych stanów. Na przykład…<button class=“bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 …”> Można łatwo uzyskać efekty przesuwania kursora nad elementami („hover”) oraz ich wyświetlania w pełnym rozmiarze („focus”), bez konieczności pisania żadnego kodu CSS.

Praktyka: Budowanie komponentu karty za pomocą Tailwind CSS

Połączmy powyżej opisane informacje, tworząc komponent kartki w stylu modernistycznym. Ta kartka będzie zawierać zdjęcie, nagłówek, tekst opisujący treść, tagi oraz przycisk do wykonania danej akcji, a przy tym będzie responsywna (przystosowuje się do różnych rozmiarów ekranu).

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.

Najpierw tworzymy szkielet struktury HTML kartki i aplikujemy podstawowe klasy odpowiedzialne za rozmiarowanie i organizację jej zawartości:

<div class="“max-w-sm" rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <!-- 图片区域 -->
  <img class="“w-full" h-48 object-cover” src="“https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600”" alt="“Produkty technologiczne”">
  <!-- 内容区域 -->
  <div class="“px-6" py-4”>
    <div class="“font-bold" text-xl mb-2 text-gray-800”>Praktyczny przewodnik po CSS Tailwind</div>
    <p class="“text-gray-600" text-base”>
      Nauč się szybko tworzyć estetyczne, spójne i wydajne interfejsy użytkownika w stylu modernistycznym za pomocą narzędzi typu „atomic tools”. Nie trzeba przemieszczać się pomiędzy różnymi plikami – skup się wyłącznie na samym projektowaniu.
    </p>
  </div>
  <!-- 标签区域 -->
  <div class="“px-6" pt-2 pb-4”>
    <span class="“inline-block" bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”>Ramowa struktura #CSS</span>
    <span class="“inline-block" bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># – Rozwoj frontendu</span>
    <span class="“inline-block" bg-purple-100 text-purple-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># – responsywny design.</span>
  </div>
  <!-- 行动按钮 -->
  <div class="“px-6" pb-6”>
    <button class="“w-full" bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50”>
      Czytaj natychmiast.
    </button>
  </div>
</div>

Analiza struktury i stylu kart

W tej karcie użyliśmy wielu narzędzi typu „tool”. Zewnętrzny kontener, w którym znajdują się te narzędzia, został zaprojektowany z uwzględnieniem wymagań użytkowników. max-w-sm Aby ograniczyć maksymalną szerokość…rounded-xl Urealizowanie dużych zaokrąglenych krawędzishadow-lg Dodano głębsze cienie, aby stworzyć wrażenie trójwymiarowości.bg-white Ustawienie białego tła.mx-auto Udostosunienie wyświetlania elementów w położeniu centralnym na ekranie (horizontally centered).

Obszar z obrazem został wybrany. h-48 Ustalono wysokość i zastosowano odpowiednie rozwiązanie. object-cover Upewnij się, że obraz jest odpowiednio obcięty i wypełnia cały obszar. Marginy wewnętrzne obszaru zawierającego treść są ustalone według określonych zasad. px-6 py-4 Kontrola. Nagłótek został zaznaczony pogrubieniem.font-boldWielkie fonty (large fonts)text-xlmargin dołu (bottom margin)mb-2）。

Etikety zostały zrealizowane w formie bloków włączonych bezpośrednio do tekstu (inline blocks).inline-blockW połączeniu z kolorem tła, kolorem tekstu oraz zaokrągleniami…rounded-fullmały margines wewnętrzny (small inner margin)px-3 py-1Aby uzyskać styl kapsułki, należy użyć odpowiednich elementów graficznych. Buton z kolei ma w swoim wyglądzie włączony efekt gradientu na tle.bg-gradient-to-rPrzemieszczanie się koloru w gradientzie („Hover gradient change”)hover:from-、hover:to-)、animacje przejściowe (transition animations)transition duration-300) oraz pierściek skupienia (focus ring).focus:ring-2W tym przypadku są dostępne zaawansowane efekty, takie jak …

Udziel kartom komponentom właściwości responsywności.

Aby karty lepiej prezentowały się na większych ekranach, możemy łatwo dodać kilka odpowiedzialnych klas (tzw. „responsive classes”). Na przykład, chcemy, aby karty dobrze wyglądały na ekranach o średnich rozmiarach…md:Jeśli poziom wyświetlania wynosi 4 lub więcej, karty mogą być ustawione poziomo – zdjęcie znajduje się po lewej stronie, a tekst po prawej. Możemy nieco zmienić zewnętrzny wygląd struktury, a także klasy elementów zawierających zdjęcia i tekst.

<div class="“max-w-4xl" md:flex rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <img class="“md:w-1/3" w-full h-48 md:h-auto object-cover” src="“…”" alt="“…”">
  <div class="“md:w-2/3" p-6 md:p-8”>
    <!-- 标题、描述、标签、按钮等内容 -->
  </div>
</div>

Poprzez dodanie… md:flex Ustawienie kontenera w rozmiarze ekranu średniego na format rozstawienia typu Flex oraz jego używanie. md:w-1/3 和 md:w-2/3 Ustawia proporcję szerokości między obrazem a obszarem zawierającym tekst. Obraz… md:h-auto Udziel tej części ekranu możliwości automatycznego dostosowania wysokości w zależności od zawartości w obszarze tekstowym. md:p-8 Wtedy zwiększył się margines wewnętrzny na dużym ekranie. Wystarczy kilka zmian w kodzie klas, a gotowa jest kartka reagująca na różne rozmiary ekranów.

Podsumowanie.

Tailwind CSS Dzięki swoim funkcjonalnym, atomizowanym bibliotekom klasowym znacząco zmieniło się sposob pisania CSS. Usunęło to psychiczne obciążenie związane z nazawaniem elementów stylowych, co znacząco poprawiło efektywność i spójność rozwoju interfejsów użytkownika. Od prostego kontrolowania odstępów po złożone, responsywne układy i stany interakcji można szybko osiągnąć poprzez kombinację intuicyjnych nazw klas. Choć na pierwszy rzut oku może wydawać się nieeleganckie wpisywanie wielu nazw klas w HTML, to poprawiony proces rozwoju, zmniejszone koszty utrzymania oraz wysokiej jakości pliki z definicjami stylów czynią z Tailwind CSS konkurencyjnym rozwiązaniem w projektach internetowych współczesnej ery. Mam nadzieję, że dzięki tego wprowadzeniu i praktycznym ćwiczeniom uda ci się skutecznie zacząć efektywny rozwój z użyciem Tailwind CSS.

FAQ – najczęściej zadawane pytania.

W czym różnica między Tailwind CSS a wstępnie zdefiniowanymi stylami (inline styles)?

Tailwind CSS zasadniczo różni się od stylów wbudowanych. Styl wbudowany to styl, który jest włączony bezpośrednio do kodu HTML.style=””Atrybuty nie mogą być wykorzystane do realizacji responsywnego projektowania za pomocą zapytań mediów (media queries), ani do obsługi stanów pseudoklas (pseudo-class states). :hover 或 :focusPonadto style włączone bezpośrednio do kodu (inline styles) mogą przekrywać wszystkie inne style, co powoduje brak ściśle określonych zasad ich stosowania.

Zarzędzia dostępne w Tailwind CSS to w rzeczywistości wcześniej zdefiniowane, standardowe elementy projektowe, które stanowią elementy konstrukcji interfejsów użytkownika. Opierają się na surowym systemie projektowym, obejmującym m.in. proporcje odstępów, palety kolorów oraz różne elementy kontroli rozmiaru („breakpoints”), co gwarantuje spójność całego wyglądu aplikacji. Ponadto Tailwind CSS obsługuje prefixy odpowiedzialne za responsywność i zmiany w zachowaniu interfejsu w zależności od urządzenia, a także umożliwia globalną konfigurację tych elementów – co jest nieosiągalne w przypadku użycia tylko wewnętrznych stylów („inline styles”).

W dużych projektach problemem może być nadmierna długość nazw klas w HTML, co może powodować chaos i trudności przy zarządzaniu kodem. Co w takiej sytuacji zrobić?

W przypadku powtarzających się, złożonych stylów komponentów Tailwind poleca korzystanie z… @apply W CSS instrukcje służą do wydobycia klas komponentów, a w przypadku używania frameworków JavaScript (np. React, Vue) można skorzystać z ich możliwości modularizacji do ich zamykania w osobne elementy kodu.

Na przykład możesz wyjąć ten złożony zestęp klas buttonów i umieścić je w jednej klasie komponentu CSS:

.btn-primary {
  @apply w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50;
}

A potem użyj tego bezpośrednio w HTML. <button class=“btn-primary”>Lepszą praktyką jest stworzenie w React… <Button> Komponent lub jego utworzenie w Vue <MyButton> Komponenty – stylizacja powinna być umieszczone wewnątrz komponentów, aby szablony zachowały swoją prostotę.

Jak można optymalizować rozmiar wygenerowanego pliku CSS w przypadku narzędzia Tailwind CSS?

W trybie rozwojowym Tailwind CSS generuje dużą tabelę stylów zawierającą wszystkie możliwe klasy, co ułatwia szybkie tworzenie aplikacji. Jednak podczas budowy produktu („production build”) uruchomia się kluczowy proces optimizacji.

Będzie działać według ustawień zawartych w pliku konfiguracji. tailwind.config.js 的 content W zadanym polu podaje się ścieżkę do pliku, który zawiera wszystkie szablony (np. .html, .jsx, .vue). Następnie wykonywana jest analiza tych plików w celu identyfikacji nazw używanych klas narzędzi. Wszystkie nie używane elementy stylu są usunięte z ostatecznego pliku CSS. Ten proces jest wysoce optymalizowany i umożliwia skompresję pliku CSS do rozmiaru 10 KB lub nawet mniejszego, co znacząco poprawia wydajność aplikacji.

Czy można dostosować standardowy system projektowy Tailwind?

Można to zrobić bez problemu – to właśnie jedna z wielkich zalet Tailwind CSS. Wszystkie dostosowania można dokonać bez trudności. tailwind.config.js Wycieczka odbywa się w pliku.

Możesz… theme.extend Można rozszerzyć standardową tematyczną strukturę obiektu poprzez dodawanie nowych kolorów, wartości odstępów, wielkości fontów lub innych elementów wyglądowych. theme W ramach danej struktury można bezpośrednio zmienić niektóre elementy standardowego tematu. Na przykład można dostosować kolor główny oraz elementy wyświetlające informacje o bieżącym procesie (tzw. „punkty przerwania”).

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1992d4’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
    screens: {
      ‘tablet’: ‘640px’,
      ‘laptop’: ‘1024px’,
      ‘desktop’: ‘1280px’,
    },
  },
}

Takim sposobem możesz używać tego w projekcie. bg-brand-blue、w-128 też tablet: Takie niestandardowe klasy.