Úvod do Tailwind CSS a praktické příklady: vytvořte moderní responzivní webové stránky od nuly.

Co je Tailwind CSS?

V světě webového vývoje vzniká stále více CSS frameworků.Tailwind CSSVyniká svým jedinečným konceptem “Utility-First” (Funkčnost na prvním místě). Nejedná se o sadu nástrojů pro vývoj uživatelského rozhraní (UI), která poskytuje předdefinované komponenty, nýbrž o soubor nástrojů obsahujících detailní, nízkoúrovňové CSS třídy. Vývojáři mohou kombinovat tyto atomizované CSS třídy, aby vytvořili požadované vzhledové efekty a struktury.text-center、mt-4、bg-blue-500Vytvářejte zcela vlastní design přímo v HTML. Tento přístup zcela změnil způsob, jakým vývojáři píšou styly – rozhodnutí o vzhledu stránek byla přesunuta z CSS souborů zpět do samotného značkovacího jazyka nebo šablon. Tím byla dosažena úzká vazba mezi styly a strukturou, což vedlo k dosud nevídané rychlosti a flexibilitě při vývoji.

Ve srovnání s tradičními CSS styly nebo frameworky, jako je Bootstrap,Tailwind CSSHlavní výhodou tohoto přístupu je vyhnutí se problémům s pojmenováváním komponent a nekonečnému rozrůstu souborů se styly (CSS). Už nemusíte přemýšlet nad názvy tříd pro každou komponentu, ani spravovat obrovské soubory CSS, které jsou často v rozporu se strukturou HTML. Všechny styly jsou vyjádřeny pomocí sady pečlivě navržených a vysoce konzistentních praktických tříd, což činí vytváření responsiveních a interaktivních rozhraní intuitivním a efektivním procesem.

Jak nainstalovat a nakonfigurovat

Chcete začít používat…Tailwind CSSMůžete ho integrovat do svého projektu různými způsoby. Nejběžnější způsob je instalace pomocí správce balíčků Node.js (např. npm nebo yarn).

Doporučujeme k přečtení. Úvod do Tailwind CSS až po pokročilé znalosti: Praktický průvodce vývojem moderních, responzivních webových stránek。

Nejprve inicializujte npm v kořenovém adresáři vašeho projektu (pokud to ještě nebylo provedeno), a poté nainstalujte potřebné nástroje.Tailwind CSSA jejich závislost.

Nástroj pro tvorbu webových stránek WordPress.com.

Dostupnost 99,9991 TP4T + přeshraniční zotavení po havárii, podpora 24 hodin denně, bezplatné používání AI pro tvorbu webových stránek při zakoupení balíčku blogů.

Název domény zdarma na jeden rok

Přejděte na web WordPress.com a využijte asistenta pro tvorbu webových stránek →

Nástroj pro tvorbu webových stránek UltaHost.

Více než 900 bezplatných, přizpůsobitelných šablon, které poskytují SEO schopnosti potřebné k optimalizaci viditelnosti webových stránek ve vyhledávání.

Nabídka 40%

Navštivte webovou stránku UltaHost pro pomoc při tvorbě webu →

npm install -D tailwindcss
npx tailwindcss init

Provéstnpx tailwindcss initPříkaz vytvoří soubor s názvemtailwind.config.jsKonfigurační soubor. Tento soubor slouží k personalizaci.Tailwind CSSJádrem tohoto nástroje je možnost definování základních vlastností projektu, jako jsou barva tématu, písmo, body přerušení kódu, příslušné pluginy atd. Jednoduchá konfigurace by mohla vypadat následovně a určuje tato konfigurace:Tailwind CSSKteré soubory je třeba skenovat pro účely čištění stylů (Purge)?

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

Následně potřebujete do hlavního CSS souboru projektu začlenit jednotlivé části („layers“) frameworku Tailwind. Tento soubor se obvykle nazývá…src/styles.css或input.css。

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

Na závěr potřebujete postup vývoje, který bude zpracovávat výše uvedené pokyny a kompilovat je do finálního CSS kódu. Můžete použít následující kroky:PostCSSSpoluprácetailwindcssPlugin, nebo použití přímo.Tailwind CLINástroje. Příklad příkazu pro sestavení pomocí CLI:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Tento příkaz bude naslouchat../src/input.cssZměny v souboru a jejich okamžité kompilování do výstupního produktu../dist/output.cssStačí v HTMLu pouze odkázat na finálně vytvořený obsah.output.cssStačí ten soubor.

Doporučujeme k přečtení. Úvod do Tailwind CSS a praktické využití: Vytváření moderních, responzivních rozhraní od nuly。

Jádro praktických tříd a responzivní design.

Tailwind CSSSíla tohoto nástroje spočívá v jeho rozsáhlých a systématicky strukturovaných užitečných funkcích (tj. třídách). Tyto třídy pokrývají téměř všechny běžné CSS vlastnosti a dodržují jednotná pravidla pojmenovávání.

Layout a rozestupy

Ovládání rozvrhu a mezer je jednou z nejčastějších činností při každodenním vývoji.Tailwind CSSByly poskytnuty bohaté třídy pro jejich implementaci. Například,flex、gridSlouží k vytváření rozvrhů (layoutů).m-4(margin)p-6(Padding) slouží k ovládání vnitřních a vnějších okrajových mezery (marginů). Čísla obvykle odpovídají jednotce „rem“ (výchozí hodnota je násobek 0,25rem).m-autoTo znamená automatické nastavení vnějších okrajů (marginů).

<div class="flex justify-between items-center p-6">
  <div class="m-2">Projekt č. 1</div>
  <div class="m-2">Projekt č. 2</div>
</div>

Barva a pozadí

Barvový systém je součástí tematizace. Můžete použít například…text-gray-800Nastavení barvy textubg-blue-500Nastavte barvu pozadí.border-red-300Nastavení barvy rámečku. Čísla (50 až 900) představují gradient hustoty barvy, což umožňuje vysokou konzistenci designu.

Nástroj pro tvorbu webových stránek Bluehost

Nabízí nástroje pro tvorbu webových stránek s umělou inteligencí, online chat a telefonickou podporu 24 hodin denně, 7 dní v týdnu, bezplatnou doménu na rok, bezplatnou CDN a dohodu o úrovni služeb (SLA) s dobou provozu na 99,991 %

Navštivte Bluehost.

Reaktivní breakpointy

Realizace responzivního designu jeTailwind CSSJeho silnou stránkou je to, že poskytuje pět prefixů pro breakpointy jako výchozí hodnotu:sm:、md:、lg:、xl:、2xl:Můžete přidat tyto předpony před jakoukoli užitečnou třídu, abyste určili, že tento styl bude platit pro určitou šířku obrazovky nebo větší.

<div class="text-center md:text-left lg:flex">
  <p class="w-full lg:w-1/2">Na mobilu se zobrazuje uprostřed obrazovky, na středně velkých obrazovkách se zarovnává na levou stranu, na velkých obrazovkách se nachází uvnitř flexového kontejneru a má šířku poloviny celé obrazovky.</p>
</div>

Tento “přístup s důrazem na mobilní zařízení” znamená, že styly bez předpon se vztahují na všechny obrazovky, zatímco styly s předponou přepisují styly určené pro větší obrazovky. Díky tomu je vytváření složitých reaktivních rozvrhů mimořádně jasné a jednoduché.

Praktický příklad: Vytvoření komponenty typu „karta“

Provedeme si to tak, že vytvoříme moderní, responzivní kartičkový komponent, který spojí všechny znalosti, které jsme se dosud naučili. Tato kartička bude obsahovat profilovou fotografii, nadpis, popisový text a tlačítko pro provedení nějaké akce.

Doporučujeme k přečtení. Úvod do Tailwind CSS a praktické příklady: Užitečný průvodce vývojem moderních, responzivních webových stránek。

Nejprve vytvoříme základní kontejner pro kartu a použijeme zaoblené hrany, stín a vnitřní okraje k definování vizuální struktury karty.

<div class="max-w-sm rounded-2xl overflow-hidden shadow-lg bg-white p-6">
  <!-- 卡片内容将放在这里 -->
</div>

Dále, uvnitř kontejneru vytvoříme flexový rozvrh (flex layout), abychom uspořádali profilové obrázky a uživatelské informace.

hosting.com

Bezplatný SSL, Cloudflare CDN, WAF, více než 40 datových center po celém světě, nižší latence v blízkosti, podpora služeb 24/7/365, nyní můžete ušetřit až 671 TB dat a podpora konfigurace AI a optimalizace SEO.

Navštivte hosting.com.

<div class="flex items-center space-x-4 mb-4">
  <img class="w-12 h-12 rounded-full object-cover" src="/avatar.jpg" alt="Uživatelská profilová fotografie">
  <div>
    <h3 class="text-xl font-bold text-gray-900">Zhang San</h3>
    <p class="text-gray-500">Vývojář frontendu</p>
  </div>
</div>

Poté přidejte hlavní popis obsahu karty.

<p class="text-gray-700 mb-6">
  Toto je návod k použití…<code data-no-auto-translation="">Tailwind CSS</code>Představený ukázkový komponentní karta ukazuje, jak lze rychle vytvořit UI prvek s dobrým vizuálním designem a plnou responzivitou kombinací užitečných tříd.
</p>

Na závěr přidáme tlačítko. Pomocí reaktivního předponovacího řetězce zajistíme, aby tlačítko na malých obrazovkách zabíralo celou šířku a na velkých obrazovkách se jeho šířka přizpůsobila obsahu.

<button class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1">
  了解更多
</button>

Když spojíte všechny tyto kódy dohromady, získáte kompletní komponentu kartičky. Stačí ji přizpůsobit podle vašich požadavků.max-w-smMůžete snadno upravit hodnoty vnitřního polstrovaní (padding) nebo předpony přerušení (breakpoint prefix), abyste zajistili, že aplikace bude fungovat správně na různých zařízeních. Tato praxe to jasně ukazuje.Tailwind CSS“Efektivní pracovní postup ”návrh v rámci značek“.

Závěr

Tailwind CSSNení to pouze CSS framework – představuje také efektivní a udržovatelný moderní přístup k vývoji webových stylů. Díky svým atomizovaným, praktickým třídám mohou vývojáři s úžasnou rychlostí vytvářet jedinečné uživatelské rozhraní a zároveň zachovávat vysokou konzistenci a kontrolovatelnost kódu. Vestavěný systém pro responzivní design a vysoce konfigurovatelná témata usnadňují přizpůsobení produktů různým zařízením a personalizaci podle požadavků značky. I když zpočátku je potřeba zapamatovat si některá názva tříd, po dosažení zdatnosti přináší tento nástroj výrazné zvýšení výkonnosti vývoje a snížení mentální zátěže ve srovnání s tradičními metodami používajícími CSS. Pro týmy i jednotlivé vývojáře, kteří hledají rychlost vývoje, volnost v designu a vysoký výkon finálních produktů, je tento nástroj velmi cenný.Tailwind CSSNení pochyb o tom, že jde o velmi silný nástroj.

Časté dotazy

Způsobí Tailwind CSS, že se HTML stane příliš komplikovaným?

Skutečně, přímo v HTMLu psaní velkého množství názvů tříd činí značky delšími a složitějšími.Tailwind CSSNejčastěji zmiňovaná nevýhoda.

Avšak tato “nepřehlednost” (tj. velké množství klasů a atributů) má ve skutečnosti i své pozitivní aspekty. Udržuje styly pevně spojené se strukturou kódu, což umožňuje při čtení HTML kódu okamžitě pochopit, jaký vzhled jednotlivé prvky mají, bez nutnosti přepínání mezi soubory HTML a CSS. U projektů využívajících komponentové frameworky (jako jsou React nebo Vue) jsou tyto názvy tříd ukryty uvnitř komponent, což vlastně zvyšuje udržovatelnost kódu. Kromě toho díky funkcím „čištění“ („purging“) nástrojů na kompilaci dochází k vytvoření velmi malých CSS souborů, které obsahují pouze skutečně použité styly. Výsledný výkon tak bývá často lepší než u CSS kódů napsaných ručně nebo v tradičních frameworkech.

Jak si přizpůsobit barvy tématu nebo mezer?

Personalizovaná témata se především upravují změnou souborů v kořenovém adresáři projektu.tailwind.config.jsKonfigurace je dokončena pomocí konfiguračního souboru.

In the configuration file…theme.extendV některých částech můžete přidat nebo přepsat výchozí hodnoty tematických nastavení. Například, pokud chcete přidat barvu značky, můžete to konfigurovat následovně:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1a73e8',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Po dokončení konfigurace můžete tuto funkci používat ve svém projektu.bg-brand-blue或w-128Takové vlastní třídy zajišťují, že váš designový systém zůstane konzistentní po celém projektu.

S jakými front-end frameworky je vhodné to používat?

Tailwind CSSDokáže se skvěle integrovat téměř se všemi moderními front-end frameworky a knihovnami, což je také jedním z důvodů jeho popularity.

V komponentových frameworkech jako React, Vue, Angular nebo Svelte můžete v šablonách komponent používat třídy z balíčku Tailwind stejně jako v běžném HTML. Mnoho nástrojů na vytváření projektů v těchto frameworkech (např. Next.js, Vite) poskytuje tyto třídy již předpřipravené k použití.Tailwind CSSIntegrační možnosti. Kromě toho, jako…@tailwindcss/forms、@tailwindcss/typographyTakové oficiální doplňky umožňují lépe řešit problémy spojené se styly formulářů a obsahu typu „rich text“ v konkrétních scénářích, čímž se dále zlepšuje zážitek při vývoji v součinnosti s různými frameworky.

Bude konečný CSS soubor v produkčním prostředí velký?

Ne. Právě to je…Tailwind CSSKlíčová výhoda z hlediska designu: Ačkoli verze určená k vývoji obsahuje všechny možné třídy a má tak větší velikost souborů, je to pouze pro účely usnadnění vývoje.

Během fáze výroby a sestavování…Tailwind CSSProvede analýzu vašich šablonových souborů pomocí svého mechanismu “čištění” (Purge) – ve verzích 3.0 a novějších je tento proces označován jako “skenování obsahu” (Content Scanning).tailwind.config.js的content(Je-li to specifikováno v poli), do finálního CSS souboru budou zahrnuty pouze ty CSS třídy, které jsou skutečně použity. To znamená, že výsledný CSS soubor má obvykle velikost pouze několika KB až několika desítek KB, což je mnohem méně než u mnoha ručně psaných CSS souborů nebo neoptimalizovaných CSS souborů ukládajících se v UI frameworkech. Díky tomu je zajištěna vynikající rychlost načítání.