Podróż z Tailwind CSS: Od zera do budowy nowoczesnych, responsywnych stron internetowych

W współczesnym rozwoju front-endu dążenie do wydajności i elastyczności jest tematem bez ustanku. Tradycyjne metody pisania CSS często powodują problemy, takie jak rozmierny rozmiar plików z wzorcami, konflikty nazw oraz trudności z zmianą kontekstu aplikacji. Tailwind CSS Jako framework CSS zorientowany na praktyczność, oferuje liczne narzędzia w drobnych detalach, które umożliwiają programistom szybkie tworzenie dowolnego designu bez konieczności opuszczania struktury dokumentu HTML. Nie jest to biblioteka elementów UI z gotowymi komponentami, lecz zaawansowany system do budowy własnych rozwiązań. W tym artykule pokazano, jak nauczyć się używać tego frameworku od podstaw, a potem przykładem pokazano, jak stworzyć nowoczesną stronę internetową z odpowiedzią na różne rozmiary ekranów.

Co to jest Tailwind CSS oraz w jakiej filozofii opiera się?

Tailwind CSS Podstawową filozofią tego produktu jest zasada “praktyczność nad wszystko”. Nie oferuje on takich funkcji jak… <button class=“btn btn-primary”> Takie klasy komponentów semantycznych nie oferują tylko pojedynczych elementów, ale cały zestaw narzędzi atomizowanych (czyli narzędzi, które mogą być używane w dowolnym kombinacji). Każda z tych klas jest odpowiedzialna za jedną małą, specyficzną funkcję związaną z formatowaniem wyglądu. Na przykład…text-center Wykorzystuje się do centralizowania tekstu.p-4 Wykorzystywany do ustalenia marginesów wewnętrznych.bg-blue-500 Do użycia na niebieskim tle.

Przewaga tego sposobu polega na tym, że znacząco przyspiesza proces rozwoju. Programiści nie muszą bez ustanku przechodzić pomiędzy plikami HTML i CSS, ani się martwić o to, jak nazwać dane elementy. Wszystkie decyzje dotyczące stylu są zawarte w języku znaków, co sprawia, że tworzenie prototypów i iteracyjne modyfikacje projektu są wyjątkowo szybkie.

Polecamy lekturę. Praktyczny przewodnik po CSS od Tailwind: budowanie nowoczesnych, responsywnych interfejsów od zera。

Porównanie zasady „praktyczność pierwsza” z tradycyjnym CSS

W porównaniu z tradycyjnym pisaniem kodu CSS ręcznie lub z użyciem bibliotek komponentów takich jak Bootstrap, stylizacja w ramach frameworku Practical Priorities jest “natychmiastowa”. Możesz tworzyć stylizację w sposób “natychmiastowy”, łącząc nazwy klas, zamiast najpierw definiować klasę stylową, a potem aplikować ją do elementów. To eliminuje problem nagromadzania nie używanego kodu stylowego – w Twoim projekcie znajdują się tylko te klasy, które faktycznie są potrzebne. Dzięki optymalizacjom w narzędziach do tworzenia kodu, cały proces jest znacznie bardziej wydajny i efektywny. PurgeCSSMożna stworzyć bardzo małe pliki CSS przeznaczone do używania w środowisku produkcyjnym.

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 →

Jak zacząć korzystać z Tailwind CSS?

Instalacja Tailwind CSS Istnieje kilka sposobów na instalację, ale najrekomendowany jest sposób wykorzystujący Node.js i npm, a także integracja z Twoim procesem budowy aplikacji. Poniżej znajdują się standardowe kroki integracji z użyciem PostCSS.

Najpierw należy inicjować projekt za pomocą narzędzia npm i zainstalować niezbędne zależności.

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

Ten komend wygeneruje… tailwind.config.js Konfiguracja plików. Następnie musisz ustawić ścieżkę do plików szablonowych, aby… Tailwind Podczas tworzenia produktu można usunąć nie używane style.

Zmiana tailwind.config.js Z pliku content Część:

Polecamy lekturę. Wprowadzenie do Tailwind CSS i praktyczne ćwiczenia: budowanie nowoczesnej, responsywnej strony internetowej od podstaw.。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [“./src/**/*.{html,js}”], // 根据你的项目结构调整路径
  theme: {
    extend: {},
  },
  plugins: [],
}

Następnie stworz file CSS główny (na przykład: main.css). src/input.css…) i dodaj Tailwind Instrukcje.

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

Na koniec, uruchom proces budowy za pomocą odpowiedniej komendy lub integruj go z twoimi narzędziami do pakowania (np. Vite, Webpack). Jednym z prostych sposobów jest… package.json Skrypt.

“scripts”: {
  “build”: “tailwindcss -i ./src/input.css -o ./dist/output.css --watch”
}

Rozpocznij działanie. npm run build Później nastąpi… dist W katalogu został utworzony plik zawierający wszystkie przydatne klasy CSS. Możesz do niego odwołać się w kodzie HTML i zacząć ich używać.

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.

Opanowanie kluczowych narzędzi i metod budowy wyglądu (layoutu)

Tailwind CSS Klasa narzędziowa pokrywa niemalże wszystkie atrybuty CSS i stosuje określone zasady nazewania. Zrozumienie tych zasad jest kluczowe do efektywnego korzystania z tego narzędzia.

System odległości i wymiarów

Tailwind Wykorzystaj metodę opartą na… rem Standardowa skala odstępów pomiędzy elementami. Format nazw klas to zwykle… {属性}{方向}-{大小}Na przykład:
- p-4Zastosować w wszystkich kierunkach (padding). 1rem Marginal padding (interior padding) w…
- mt-2:Aplikacja 0.5rem Margin górny (margin-top) elementu.
- mx-autoUstawienie marginesów zewnętrznych na wartość „auto” w poziomie sprawia, że elementy blokowe są automatycznie centrowane.

Klasy wymiarowe, np. w-64(Łączna szerokość: 16rem)h-screenWysokość w wysokości 100vh też jest zgodna z podobną logiką.

Polecamy lekturę. Przewodnik po Tailwind CSS: budowanie współczesnych, responsywnych stron internetowych od zera。

Kolory i tło

Struktura nazw klas kolorowych to: {属性}-{颜色}-{深浅}Na przykład:
- text-gray-800Ustaw kolor tekstu na poziom 800 w skali szarości.
- bg-indigo-600Ustaw kolor tła na poziom 600 w skali indygo.
- border-red-300Ustaw kolor obramowania na czerwony o stopniu jasności 300.

Wzorowanie reaktywne i punkty przerwania (breakpoints)

Tailwind W projekcie zastosowano responsywny design, który prioritetowo uwzględa potrzeby użytkowników na urządzeniach mobilnych. Standardowe style są dostępne dla wszystkich rozmiarów ekranów, ale aby zastosować inne style na większych ekranach, konieczne jest dodanie odpowiedniego prefiksu. Na przykład:
- text-smUżywaj małego rozmiaru tekstu na wszystkich ekranach.
- md:text-baseUżywaj standardowego rozmiaru tekstu na ekranach o średnim rozmiarze (≥768 px) i większych.
- lg:flexUwzględnij, że na dużych ekranach (o rozdzielczości ≥1024 px) tryb wyświetlania powinien być ustawiony na „flex”.

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.

Praktyka: Tworzenie responsywnego menu nawigacyjnego i obszaru z postaciami („heroes”)

Teraz, wykorzystując zdobyte know-how, stworzymy prostą stronę internetową zawierającą responsywny menu nawigacyjne oraz obszar przeznaczony dla przedstawienia „bohatera” („hero area”).

Stworzenie nawigacji responsywnej

Stworzymy menu nawigacyjne, które będzie składane na urządzeniach mobilnych, a na komputerach rozkłada się poziomowo.

<nav class="“bg-white" shadow-lg”>
  <div class="“max-w-6xl" mx-auto px-4”>
    <div class="“flex" justify-between”>
      <div class="“flex" space-x-7”>
        <a href="/pl/“/#”" class="“flex" items-center py-4”>
          <span class="“font-semibold" text-gray-500 text-lg”>Moja marka</span>
        </a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="“hidden" md:flex items-center space-x-1”>
        <a href="/pl/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>Strona główna</a>
        <a href="/pl/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>usługa</a>
        <a href="/pl/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>O nas</a>
        <a href="/pl/“/#”" class="“py-4" px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300”>Kontaktować</a>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="“md:hidden" flex items-center”>
        <button class="“outline-none" mobile-menu-button”>
          <svg class="“w-6" h-6 text-gray-500” fill="“none”" stroke-linecap="“round”" stroke-linejoin="“round”" stroke-width="“2”" viewbox="“0" 0 24 24” stroke="“currentColor”">
            <path d="“M4" 6h16m4 12h16m4 18h16”></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端菜单内容 -->
  <div class="“hidden" mobile-menu md:hidden”>
    <a href="/pl/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>Strona główna</a>
    <a href="/pl/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>usługa</a>
    <a href="/pl/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>O nas</a>
    <a href="/pl/“/#”" class="“block" py-2 px-4 text-sm hover:bg-gray-200”>Kontaktować</a>
  </div>
</nav>

Ten menu nawigacyjny został zrealizowany z użyciem… flex Układ, poprzez… hidden md:flex 和 md:hidden Służy do kontrolowania wyświetlania i ukrywania elementów na różnych ekranach.

Stworzenie obszaru dla bohaterów

Następnie stwórz ciekawą, atrakcyjną strefę przeznaczoną dla bohatera.

<section class="“bg-gradient-to-r" from-blue-50 to-indigo-100 py-20”>
  <div class="“max-w-6xl" mx-auto px-4 sm:px-6 lg:px-8 text-center”>
    <h1 class="“text-4xl" md:text-6xl font-extrabold text-gray-900 mb-6”>
      Wykorzystaj Tailwind CSS, aby stworzyć przyszłość.
    </h1>
    <p class="“text-lg" md:text-xl text-gray-700 max-w-3xl mx-auto mb-10”>
      Praktyczny framework CSS, który umożliwia szybkie tworzenie nowoczesnych, responsywnych interfejsów użytkownika bez konieczności opuszczania kodu HTML. Pożegnaj się z zawiłymi tabelkami stylów i przyjmij efektywny proces rozwoju aplikacji.
    </p>
    <div class="“space-x-4”">
      <a href="/pl/“/#”" class="“inline-block" bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg shadow-md hover:bg-indigo-700 transition duration-300”>
        Zacznij korzystać z usługi
      </a>
      <a href="/pl/“/#”" class="“inline-block" bg-white text-indigo-600 font-semibold py-3 px-8 rounded-lg shadow border border-indigo-600 hover:bg-gray-50 transition duration-300”>
        Dowiedz się więcej
      </a>
    </div>
  </div>
</section>

W tym obszarze użyto gradientowego tła. bg-gradient-to-rWielkość fontu dostosowująca się do rozmiaru ekranu text-4xl md:text-6xl A także przyciski z efektem „hover” (które zmieniają wygląd po przybliżeniu kursora).

Podsumowanie.

Tailwind CSS Dzięki swojej unikalnej metodologii, która daje priorytet praktyczności, znacząco zmieniła sposób, w jaki programiści tworzą stylizację. Przeniosła decyzje dotyczące stylu z plików zdefiniowanych wzorców (style sheets) do języka znaków (markup languages) i umożliwiła realizację złożonych projektów poprzez kombinację drobnych, specjalnych klas. To doprowadziło do znacznego wzrostu efektywności rozwoju i elastyczności projektów. Choć na początku trzeba zapamiętać określone zasady nazewania klas, po oswojeniu tego sposobu rozwoju szybkość pracy oraz możliwości dostosowania rozwiązania są nieporównywalne z tradycyjnymi metodami. Od prostych, praktycznych klas po złożone, responsywne układy…Tailwind Zaproponowano kompletny, rozszerzalny system, który doskonale nadaje się do całego procesu rozwoju – od tworzenia prototypów po wdrożenie produktu w produkcję.

FAQ – najczęściej zadawane pytania.

Czy Tailwind CSS może sprawić, że kod HTML stanie się zbyt zawiłym („engorged”)?

Tak, ale to wymaga pogodzenia różnych aspektów. Dodawanie klas nazwowych może faktycznie sprawić, że kod HTML wygląda bardziej złożony. Z drugiej strony, to przyczynia się do znacznego wzrostu efektywności rozwoju oraz do lepszej kontroli nad wielkością plików CSS. Dzięki narzędziom do generowania kodu CSS w środowisku produkcyjnym jest często mniejszy niż w przypadku kodu napisanego ręcznie. Wielu programistów uważa, że zarządzanie stylami w kodzie HTML jest łatwiejsze niż w osobnych plikach CSS.

Jak dostosować domyślną tematyczną nawigację w Tailwind CSS?

Dostosowanie nastawia się głównie poprzez zmiany. tailwind.config.js Z pliku theme Można to zrealizować w kilku prostych krokach. Możesz łatwo rozszerzyć lub zmienić ustawienia standardowych kolorów, fontów, odstępów, punktów przerwania itd. Na przykład, jeśli chcesz dodać kolor identyfikujący twoją markę, możesz to zrobić w następujący sposób: theme.extend.colors Dodaj nowy par klucza–wartości dotyczący koloru. Taki sposób konfiguracji umożliwia doskonałe połączenie systemu projektowego z całym projektem.

Z jakimi front-end frameworkami można łączyć Tailwind CSS?

Tailwind CSS Może zostać doskonale integrowany z prawie wszystkimi współczesnymi frameworkami front-end, w tym z Reactem, Vue.js, Angularem, Svelte itd. Oficjalne dokumentacje zawierają poradze dotyczące instalacji oraz najlepszych praktyk stosowania tego narzędzia w tych frameworkach. Funkcje narzędzia doskonale współpracują z modelem rozwoju bazowanym na komponentach – styl każdego komponentu jest ściśle powiązany z jego kodem HTML.

Czy w środowisku produkcyjnym plik CSS ostateczny będzie bardzo dużych rozmiarów?

Nie. Właśnie tak. Tailwind CSS Wielka szlachetność tego projektu polega na tym, że podczas tworzenia wersji produkcyjnej jest używany… PurgeCSSMożna użyć takich narzędzi do skanowania plików z wzorcami (templates) i zachować tylko te klasy narzędzi, które faktycznie zostały wykorzystane, a usunąć wszystkie nie używane style. W rezultacie generowany plik CSS ma zwykle rozmiar od kilku KB do kilku dziesięciu KB – jest więc bardzo skompaktowany.