Zaczynamy od zera: tworzenie nowoczesnego, responsywnego interfejsu internetowego przy użyciu Tailwind CSS.

W dzisiejszym front-end rozwoju dążenie do efektywnych, spójnych i łatwo podlegających konserwacji rozwiązań stylistycznych stało się kluczowym wymogiem dla programistów. Tradycyjne metody pisania CSS często prowadzą do powstania zbędnie dużych plików z definicjami stylów, arbitralnego wyboru nazw klas oraz zanieczyszczenia globalnych zasad stylu. W tym kontekście istotne są frameworki CSS, które stawiają na praktyczność i łatwość obsługi.Tailwind CSSDzięki dostawie serii praktycznych klas poziomu niskiego programiści mogą szybko tworzyć dowolne elementy interfejsu w HTML, zachowując przy tym kontrolę nad wyglądem i łatwość konserwacji kodu. Nie są to gotowe komponenty, lecz zbiór narzędzi do budowy własnych rozwiązań, co umożliwia doskonałe połączenie elastyczności z szybkością rozwoju. Ten tekst pokazać będzie ci, jak zacząć od zera i korzystać z tych narzędzi.Tailwind CSSStworzenie nowoczesnego, responsywnego interfejsu webowego.

Ustawienie środowiska i inicjalizacja projektu

Zacznij korzystać z usługiTailwind CSSPierwszym krokiem jest integracja tego narzędzia do twojego projektu. Najzaleczonej metodą jest użycie oficjalnego narzędzia CLI lub połączenie go z istniejącymi narzędziami do budowy aplikacji (np. Vite, Webpack).

Szybka instalacja za pomocą NPM i CLI

Dla większości projektów najskuteczniejszym sposobem jest instalacja i inicjalizacja za pomocą npm. Najpierw w katalogu głównym projektu w terminalu wykonać odpowiednią komendę.Tailwind CSSWraz z zależnościami.

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

npm install -D tailwindcss
npx tailwindcss init

Wykonaj.npx tailwindcss initKomenda wygeneruje plik o nazwietailwind.config.jsTo plik konfiguracji. Służy do kontrolowania…TailwindPodstawowy plik definiujący zachowanie aplikacji – w nim można określić tematy, dodatki (plugi) oraz, co najważniejsze, ustalić odpowiednie parametry.TailwindJakie pliki należy skanować, aby uzyskać wymagany styl?

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 →

Ustawienie ścieżki do pliku z wzorcem konfiguracji

Następnie konieczne jest edytowanie.tailwind.config.jsPlik, w…contentW atrybutach musz określić ścieżkę do pliku z wzorcem projektu. To zapewnia, że plik zostanie użyty przy tworzeniu nowych projektów.TailwindKompilator (silnik JIT) jest w stanie znaleźć wszystkie pliki, w których użyto klas praktycznych (utility classes), i wygenerować tylko odpowiedni kod CSS.

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

Wprowadzenie podstawowych instrukcji dotyczących stylu.

Na koniec, w twoim głównym pliku CSS (na przykład…)src/styles.css或src/index.cssW artykule wykorzystano@tailwindPolecenie musi zawierać…TailwindWszystkie warstwy.

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

Teraz, uruchom.npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watchPoleczenieTailwindNastępnie program zacznie monitorować zmiany w twoich źródłowych plikach i w czasie rzeczywistym będzie kompilować je w pliki CSS, które zostaną użyte w środowisku produkcyjnym.

Podstawowe klasy użyteczne oraz budowanie struktury layoutu

Tailwind CSSPodstawa tego narzędzia tkwi w jego ogromnym i zorganizowanym zbiorze klas praktycznych. Nazwy tych klas są zgodne z intuicyjnymi zasadami nazawania, co ułatwia tworzenie stylów w taki sam sposób, jak i opisywanie wyglądu elementów interfejsu.

Polecamy lekturę. Praktyczny przewodnik po Tailwind CSS w języku chińskim: tworzenie nowoczesnego, responsywnego interfejsu użytkownika od podstaw.。

Systemy odstępów, formatowania i kolorów

TailwindZaproponowano skalę odległości bazowaną na jednostce „rem” oraz kompletny zestęp narzędzi do formatowania tekstu. Na przykład:p-4Oznacza to, że margines wewnętrzny (padding) ma wielkość 1 rem.mt-2Oznacza to, że górny margines (margin-top) wynosi 0,5 rem. Jeśli chodzi o tekst, możesz to wykorzystać w swoich projektach graficznych lub kodzie.text-lgAby ustawić większy rozmiar fontu, użyj…font-boldAby pogrubić tekst, użyjtext-gray-800Aby ustawić tekst w kolorze ciemnego szarego, należy…

System kolorów jest wyjątkowo zaawansowany – każdy kolor posiada gradient głębi od 50 do 900. Na przykład…bg-blue-500Oznacza to, że kolor tła jest niebieski o średnim odcieniu.hover:bg-blue-600To oznacza, że kiedy kursor myszy przesuwается nad tym elementem, jego kolor zmienia się na głębszy niebieski.

Używanie technik Flexbox i Grid do tworzenia layoutów

Budowanie układu strony to...TailwindJego mocna strona… poprzez…flex和gridKlasy powiązane umożliwiają szybkie tworzenie różnych złożonych układów.

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">
  <aside class="w-full md:w-1/4 p-6 bg-gray-100">
    <!-- 侧边栏内容 -->
  </aside>
  <main class="w-full md:w-3/4 p-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- 网格卡片内容 -->
      <div class="bg-white rounded-lg shadow p-4">Karta 1</div>
      <div class="bg-white rounded-lg shadow p-4">Karta 2</div>
      <div class="bg-white rounded-lg shadow p-4">Karta 3</div>
    </div>
  </main>
</div>

W powyższym przykładzie stworzyliśmy elastyczny kontener, który w standardowym przypadku jest ustawiony w pozycji vertikalnej, a na ekranach o średnich rozmiarach przechodzi w pozycję horizontalną. Obszar z głównym treściem jest realizowany za pomocą technologii CSS Grid; liczba kolumn zmienia się w zależności od rozmiaru ekranu (1 kolumna na małych ekranach, 2 kolumny na ekranach średnich, 3 kolumny na dużych ekranach). Ponadto pomiędzy kartami treści zachowuje się jednolita odległość.gap-6）。

Rozwiązanie problemów związanych z realizacją projektów typu „responsive design” oraz zarządzaniem stanem interakcji użytkownika.

Wzorowanie projektów na różne urządzenia (responsive design) stanowi kluczową podstawę współczesnych stron internetowych.Tailwind CSSZastosowanie strategii „mobile first” sprawia, że funkcje responsywnego designu są proste, a przy tym wyjątkowo skuteczne.

System punktów przerw z priorytetem dla mobilnych urządzeń

TailwindDostępne są pięć standardowych prefiksów dla punktów przerwania reaktywnych (responsive breakpoints):sm、md、lg、xl、2xlTe prefiksy można zastosować mniej więcej we wszystkich klasach praktycznych, aby kontrolować wygląd na różnych rozmiarach ekranów. Styl bez prefiksu działa na wszystkich ekranach, natomiast styl z prefiksem zostaje włączony od określonego punktu.

Polecamy lekturę. Opanowanie Tailwind CSS: Przewodnik po rozwoju praktycznych komponentów, od poznania podstaw do osiągnięcia biegłości。

Na przykład,text-center sm:text-leftOznacza, że tekst ma być umieszczone w centrum na ekranach o małym rozmiarze i mniejszych.smTekst z przerwami (o wielkości 640 px lub większej) ma być wyświetlany z wycentrowaniem na lewej stronie.

Obsługa stanów takich jak przeciąganie kursora nad elementem, ustawienie elementu w stanu „fokusu” itd.

TailwindDzięki prefiksom odnoszącym się do różnych stanów interakcji można łatwo zaprojektować odpowiedni styl dla tych stanów. Najpopularniejsze prefiksy to:hover:、focus:、active:、disabled:I tak dalej.

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.

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50 transition duration-150 ease-in-out">
  点击我
</button>

Ten przycisk w stanie domyślnym ma kolor niebieski; kiedy przybliżamy się do niego (przeciągając kursorem), kolor się pogłębia. Gdy przechodzi w stan „fokusu” (kiedy jest wybrany przez użytkownika), pojawia się niebieski obramowanie. Wszkie zmiany koloru są realizowane z wykorzystaniem miłych, płynnych animacji. To znacznie ułatwia tworzenie interfejsów użytkowniczych, które są przyjazne w obsłudze.

Dostosowane ustawienia i optymalizacja dla produkcji

ChociażTailwindMożna go używać od razu po otworzeniu opakowania, ale jego prawdziwa moc tkwi w wysokim stopniu dostosowalności. Za pomocą plików konfiguracji możesz dostosować go w pełni do wymagań swojego brandu i designu.

Rozszerzenie i omówienie tematu.

在tailwind.config.jsDokumentytheme.extendW obiekcie można dodać nowe wartości lub zmienić ustawienia tematyczne standardowe (np. kolory, fonty, proporcje odstępów itd.), bez wpływu na inne aspekty funkcjonalności systemu.TailwindWartość domyślona.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      fontFamily: {
        'sans': ['"Inter"', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Takim sposobem możesz używać tego w projekcie.bg-brand-primary或font-sansTakie niestandardowe klasy.

Oczyszczenie nie używanych stylów

Aby zapewnić, że ostateczna wielkość pakietu produkcyjnego będzie jak najmniejsza,TailwindJIT (Just-In-Time) silnik będzie działać w sposób wyjątkowo dokładny, zgodnie z określonymi zasadami i wymaganiami.contentCSS jest generowany na podstawie rzeczywistych nazw klas znajdujących się w plikach konfiguracji. Nie trzeba ręcznie uruchamiać narzędzia PurgeCSS. Podczas tworzenia wersji produktowej wystarczy tylko upewnić się, że wykonywane są poprawne komendy budowy.TailwindWtedy automatycznie zostanie wygenerowany plik CSS, zawierający tylko klasy, które używasz, i jest on bardzo optymalizowany pod względem wydajności.

NODE_ENV=production npx tailwindcss -i ./src/styles.css -o ./dist/output.css --minify

Użyj--minifyMożna dalej skompresować plik CSS wygenerowany przez znaki (symbole).

Podsumowanie.

Tailwind CSSDzięki swojej nowatorskiej metodologii znacząco zmieniło się sposob, w jaki programiści piszą CSS. Usunęło to konieczność częstych przekładów pomiędzy plikami HTML a CSS, co zmniejszyło koszty związane z utrzymywaniem porządku i spójności kodu. Zawdzięczając systemowi projektowania opartemu na regułach, stylowanie jest bardziej jednolite. Ponadto zaawansowane funkcje responsywności i dostosowania sprawiają, że tworzenie nowoczesnych, adaptywnych i interaktywnych interfejsów staje się wyjątkowo efektywnym. Od przygotowania środowiska rozwojowego, po używanie kluczowych klas i projektowanie responsywnego, aż po dostosowania i optymalizacje – opanowanie tych narzędzi jest kluczowe dla skutecznej pracy programistów.Tailwind CSSTo oznacza, że posiadasz skuteczny zestaw narzędzi, który pomaga poradzić sobie z różnymi wyzwaniami występującymi przy tworzeniu interfejsów użytkownika. Choć nauka ich obsługi wymaga zapamiętania wielu nazw klas, po oswojeniu tańszy będzie tempo rozwoju aplikacji oraz łatwiejsza będzie jej konserwacja.

FAQ – najczęściej zadawane pytania.

Czy Tailwind CSS może sprawić, że kod HTML stanie się zbyt długim i niejednoznacznym (zawierający wiele niepotrzebnych elementów)?

To bardzo powszechny problem. W istocie w HTML występuje wiele nazw klas, ale to zwykle jest uważane za konieczność, którą trzeba pogodzić z innymi aspektami projektu.Tailwind CSS将样式决策从CSS文件转移到了HTML模板中，这实际上提高了可读性，因为你一眼就能看出一个元素的外观。对于复杂的类列表，可以使用模板语法（如React的className、Vue的:class）进行组合和管理，或者提取为可复用的组件，从而保持模板的整洁。

Jak przejąć stylizację komponentów zewnętrznych (tj. tych dostępnych z biblioteki Tailwind CSS) i zastąpić je własnymi zasadami stylu?

Gdy potrzebujesz zmienić zawartość elementu, który został już wykorzystany…TailwindGdy chodzi o stylizację komponentów zewnętrznych (tj. pochodzących z innych źródeł) w obrębie danej klasy, są kilka dostępnych metod. Najprostszym sposobem jest użycie bardziej specyficznych nazw klas w kodzie HTML lub szablonach, wykorzystując właściwości specyficzne dla CSS. Drugim sposobem jest…!importantVarianta: dodaj to po nazwie klasy.!importantNa przykładbg-red-500!Zaleca się bardziej tę metodę – to będzie najlepsze rozwiązanie w twoim przypadku.tailwind.config.jsAby zwiększyć specyficzność stylów w odniesieniu do określonych komponentów, można użyć CSS lub nadpisania ich stylów poprzez umieszczenie własnych nazw klas w kodzie komponentów. Można to osiągnąć również poprzez „zapakowanie” komponentów (ang. wrapping) i przekazanie im własnych nazw klas podczas ich tworzenia.

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

Tailwind CSSNie zależy to od wykorzystanego frameworku – może doskonale współpracować z dowolnym stackiem technologicznym, który obsługuje CSS i HTML. Obecnie ma doskonałą integrację z popularnymi frameworkami oraz metaframeworkami, takimi jak React, Vue.js, Angular, Svelte, Next.js, Nuxt.js, Gatsby itd., a także cieszy się dużą poparciem ze strony społeczności programistycznej. Oficjalnie dostępne są również specjalne pluginy dla niektórych frameworków (np. Next.js), które ułatwiają proces rozwoju aplikacji.

Czy ustawione wartości stylu powiększą ogólną wielkość generowanego pliku CSS?

Nie będzie mogło rosnąć w nieskończoną miarę. Dzięki temu…Tailwind CSSW trybie Just-in-Time (JIT) klasy CSS są generowane i dodawane do końcowego pliku CSS wyłącznie wtedy, gdy są faktycznie używane w twoim szablonie projektu. Nawet jeśli w pliku konfiguracji rozszerzyłeś liczne ustawienia dotyczące kolorów, odstępów lub fontów, to jeśli w kodzie HTML nie użyjesz tych klas, nie będą one uwzględnione w wynikującym pliku CSS.bg-my-custom-colorWtedy te style nie pojawią się w pliku wyjściowym.Tailwind CSSKluczowy mechanizm umożliwiający utrzymanie małych rozmiarów pakietów produkcyjnych.