Návod k začátkům s Tailwind CSS: naučte se praktický CSS framework od základů

V dnešní éře hledání efektivity vývojeTailwind CSS Vyniká svým konceptem “přednost praktičnosti”. Jedná se o CSS framework zaměřený na funkčnost, který vám umožňuje vytvářet jakýkoli design přímým kombinováním předdefinovaných tříd v HTML kódu. Na rozdíl od tradičních… Bootstrap Rozdílně od frameworků, které poskytují předdefinované komponenty…Tailwind CSS Jsou zde k dispozici detailní, určené k jedinému účelu CSS nástrojové třídy, které vám umožňují vytvořit zcela personalizovaný design uživatelského rozhraní bez nutnosti opouštět kód HTML. Tento způsob práce výrazně zvyšuje rychlost vývoje a zároveň zachovává čitelnost a udržovatelnost kódu týkajícího se stylů.

Co je Tailwind CSS a jaká je jeho základní filozofie?

Tailwind CSS Jeho základní filozofie je “přednost praktičnosti”. To znamená, že neposkytuje funkce nebo vlastnosti, které by byly… <code>.card</code> 或 <code>.navbar</code> Takové semantické komponentní třídy spíše poskytují něco jako… <code>.p-4</code>(Vnitřní mezery)<code>.text-center</code>(Text is centered.)<code>.bg-blue-500</code>(Na modrém pozadí) Takové nízkoúrovňové, jednoúčelové nástrojové třídy.

Výhody upřednostňování praktických tříd

Výhodou tohoto designového vzoru je, že vás zbavuje starostí s neustálým přepínáním mezi soubory HTML a CSS. Všechny styly jsou soustředěny v samotném značkovacím jazyce, což činí styly komponent samostatnými a snadno pochopitelnými. Zároveň vás nutí používat určitý, předem definovaný designový systém (např. pevné hodnoty pro mezery, barvy, velikosti písma), což napomáhá udržovat konzistenci designu v celém projektu a předchází používání náhodných, nekonzistentních hodnot stylů.

Doporučujeme k přečtení. Návod k používání Tailwind CSS: Naučte se praktický stylingový framework od základů。

Porovnání s frameworky určenými k správě knihoven komponent

与 Bootstrap 或 Element UI Ve srovnání s jinými frameworky…Tailwind CSS Neuvádí vás do určitého vzhledu – můžete volně kombinovat různé nástroje a třídy, abyste vytvořili jakýkoli vizuální design, aniž byste museli obtížně překrývat výchozí styly frameworku. To poskytuje vývojářům velkou flexibilitu a kontrolu, což je obzvláště vhodné pro projekty, které vyžadují vysoce personalizovaný design.

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 →

Jak začít používat Tailwind CSS?

Existuje více způsobů, jak to udělat. Tailwind CSS Integrovat to do vašeho projektu. Nejlepším způsobem je použít jeho oficiální nástroj CLI nebo ho kombinovat s nástroji na sestavování (build tools). Vite、WebpackIntegrace.

Instalace pomocí NPM

Nejprve můžete použít nástroje npm nebo yarn k instalaci. Tailwind CSS A jejich související závislosti. Klíčový příkaz pro instalaci je npm install -D tailwindcssPo dokončení instalace budete muset inicializovat konfigurační soubor. Tento příkaz vytvoří soubor s názvem tailwind.config.js Soubor „“.

npm install -D tailwindcss
npx tailwindcss init

Konfigurace cesty k souboru šablony

Následně budete potřebovat… tailwind.config.js V souboru je konfigurace. Tailwind CSS Které soubory by měly být skenovány za účelem vytvoření finálního vzhledu? To se dosahuje úpravou… content Implementováno pomocí polí.

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

Zavedení základních stylů

Na závěr, ve vašem hlavním CSS souboru (například…) src/input.cssV tomto případě se používá @tailwind Příkaz pro zavedení… Tailwind Na různých úrovních.

Doporučujeme k přečtení. Podrobné pochopení Tailwind CSS: Průvodce vývojem stylů od principů až po praktické aplikace。

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

Následně spusťte příkaz na sestavení (např. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch），Tailwind Na základě tříd skutečně použitých ve vašem HTML souboru bude vytvořen optimalizovaný CSS soubor.

Klíčové nástrojové třídy a běžná syntaxe

Tailwind CSS Tato třída nástrojů pokrývá všechny aspekty CSS a pravidla pojmenovávání jsou intuitivní a snadno zapamatovatelná.

Vzdálenosti a rozměry

Třídy určené k ovládání vnitřních a vnějších marginů a rozměrů prvků jsou velmi intuitivní. Například….m-4 Zobrazit margin: 1rem;，.p-2 Zobrazit padding: 0.5rem;Co se týká rozměrů,.w-1/2 Znamená to šířku 50%..h-64 Znamená výšku 16 rem.

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.

<div class="m-4 p-6 bg-gray-100">
  <p class="text-lg">Toto je kontejner s vnějším a vnitřním okrajovým prostorem (marginem).</p>
</div>

Barva a pozadí

Třídy barev dodržují určité pravidla a standardy. <code>属性-颜色-深浅</code> Například:.text-blue-600 Text zobrazený v modré barvě..bg-red-100 Znamená pozadí v světle červené barvě..border-green-300 Ohraničení zelené barvy.

Responzivní design a stavové varianty

Tailwind CSS Rezponzivní design využívá strategii, která upřednostňuje mobilní zařízení. Výchozí třídy se vztahují na všechny velikosti obrazovek, ale přidáním předpon lze jejich výkon upravit podle konkrétních požadavků. md:、lg: To znamená, že se to vztahuje na střední, velké a větší obrazovky.

<div class="text-center md:text-left lg:text-justify">
  Na malých obrazovkách se text zobrazuje uprostřed, na středních obrazovkách se zarovnává na levou stranu a na velkých obrazovkách se zarovnává na oba konce.
</div>

Stejně tak můžete snadno přidat stavy jako „přejetí myší“ (hover) nebo „fokus“. Například:.hover:bg-blue-700 Při přejetí myší se aplikuje tmavě modré pozadí.

Doporučujeme k přečtení. Ovládnutí Tailwind CSS: Praktický průvodce front-end stylovým frameworkem od základů až po pokročilé znalosti。

Pokročilé funkce a vlastní konfigurace

Ačkoliv Tailwind CSS Je připraven k použití hned po rozbalení, ale zároveň nabízí i silné možnosti rozšíření a personalizace.

Extrahujte třídu komponentů.

Abyste se vyhnuli opakovanému psaní dlouhého řádku nástrojových tříd v HTML, můžete použít… @apply V CSS se instrukce používají k extrakci a kombinaci prvků, čímž vytvářejí vlastní třídy komponent.

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.

/* 在 input.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;
}

<!-- 在 HTML 中 -->
<button class="btn-primary">点击我</button>

Hloubkově přizpůsobitelný designový systém.

Můžete to změnit tím, že… tailwind.config.js Tyto soubory umožňují hlubokou personalizaci vašeho designového systému. Například můžete rozšířit nebo přepsat výchozí barvy témat, písma, body přerušení atd.

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

Takto můžete v projektu používat vlastní třídy. .text-brand-blue 和 .h-128。

Využívejte doplňky (pluginy) k rozšíření funkcionalit.

Tailwind CSS Disponuje bohatým ekosystémem pluginů. Například ty, které jsou poskytovány oficiálně… @tailwindcss/forms Příslušenství umožňuje lépe nastavovat styly prvků formulářů.@tailwindcss/typography Pluginy mohou poskytnout pěkné výchozí styly pro zobrazený Markdown nebo bohatý text. Stačí je nainstalovat a přidat do konfiguračního souboru. plugins Může být použit přímo v poli (array).

Závěr

Tailwind CSS Díky své jedinečné metodologii, která upřednostňuje využití praktických tříd, přineslo to revoluční zvýšení efektivity a větší volnost při návrhu webových stránek. Snižuje náklady na rozhodování při psaní stylů, zajišťuje konzistenci uživatelského rozhraní (UI) díky dobře definovanému designovému systému a dokonale se integruje s moderními nástroji pro vývoj. I když zpočátku je potřeba zapamatovat si názvy některých tříd, po zvyknutí je rychlost vývoje a přesnost kontroly stylů neporovnatelné s tradičními způsoby psaní CSS. Pro jednotlivce a týmy usilující o efektivní a personalizovaný vývoj je to velmi výhodné.Tailwind CSS Nepochybně se jedná o velmi cenný nástroj.

Časté dotazy

Budou soubory CSS vytvořené pomocí Tailwind CSS příliš velké?

Ne. Právě to je… Tailwind CSS Jednou z hlavních výhod je to, že během procesu výroby a sestavování (build process) používá… PurgeCSSPoužijte nástroje (nebo podobné nástroje) k statické analýze souborů vašeho projektu a do finálního CSS souboru zapakujte pouze ty knihovny, které skutečně používáte. Díky tomu bude finální CSS soubor obvykle velmi malý – dokonce menší než ručně napsaný CSS kód.

Písmo tolik názvů tříd v HTMLu může činit kód trochu chaotickým.

To je skutečně běžná obava. Praxe ukazuje, že i když se počet třídních jmen v HTML zvyšuje, celková čitelnost a udržovatelnost kódu se ve skutečnosti zlepšuje, protože již není potřeba spravovat samostatný soubor CSS a styly komponent jsou plně samostatné. U zvláště složitých komponent můžete použít… @apply Příkaz umožňuje extrahovat nástrojové funkce do souborů typu CSS, nebo v souladu s komponentovým přístupem frameworků jako Vue či React zapakovat uživatelské rozhraní (UI) do znovupoužitelných komponent.

S jakými frontendovými frameworky lze Tailwind CSS používat?

Tailwind CSS Dokonale komunikuje se všemi hlavními front-end frameworky a knihovnami, včetně… React、Vue.js、Angular、Svelte Atd. Název těchto tříd je pouze řetězec, který lze snadno připojit k šablonám nebo kódu typu JSX v rámci daného frameworku. Mnoho nástrojů určených k vytváření struktur aplikací („scaffolding tools“) v rámci těchto frameworků umožňují Create React App、ViteVšechny tyto funkce mají integraci poskytnutou buď oficiálně, nebo komunitou. Tailwind CSS Šablona „“.

Jak přepsat nebo přizpůsobit výchozí hodnoty stylů v Tailwind CSS?

Můžete to provést skrze adresář umístěný v kořenové složce projektu. tailwind.config.js Konfigurační soubory lze snadno přizpůsobit podle potřeb. theme.extend Přidáním nových hodnot do objektu lze rozšířit výchozí téma; theme Přímé přepsání existujícího klíče v objektu (např.) colors、spacingTímto způsobem lze nahradit výchozí systémové nastavení. Tato metoda vám umožňuje využívat výhod přednastaveného systému a zároveň plně uspokojit požadavky na brandovou personalizaci.