Pokud chcete stylizovat své aplikace pomocí rychlého, flexibilního a spolehlivého rámce, Tailwind CSS je skvělá volba. Tailwind je framework CSS, který vám pomáhá navrhovat vlastní webové komponenty. Komponenty můžete navrhovat, aniž byste museli přepínat tam a zpět mezi soubory HTML a CSS.

Na rozdíl od Bootstrapu nemá Tailwind předdefinované třídy. Místo toho si můžete přizpůsobit své vlastní. S Tailwindem můžete vytvářet složité komponenty s primitivními utilitami, funkcemi a direktivami.

Přečtěte si, jak nainstalovat a používat Tailwind k vytváření úžasných uživatelských rozhraní ve vašich projektech Next.js.

Nainstalujte Tailwind CSS do Next.js

Začněte instalací Tailwind v aplikaci Next.js. Proces je podobný instalaci Tailwind v aplikaci React, s malým rozdílem v procesu konfigurace.

Přejít na Instalace CSS Tailwind strana. Pak přejděte na Rámcové příručky sekce a vyberte Next.js. Tato část obsahuje všechny pokyny, které potřebujete k nastavení Tailwindu v projektu Next.js.

Chcete-li nainstalovat Tailwind přes npm, správce balíčků JavaScript, spusťte tyto dva terminálové příkazy:

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

Tyto příkazy vytvoří dva konfigurační soubory pojmenované tailwind.config.js a postcss.config.js v kořenové složce projektu. Tyto soubory označují, že TailwindCSS byla úspěšně nainstalována. Tailwind CSS můžete také nainstalovat prostřednictvím rozhraní CLI Tailwind nebo jako plugin PostCSS.

Konfigurace šablon

Po instalaci musíte nakonfigurovat cesty šablony uvedené v instalační příručce ke konfiguračnímu souboru aplikace. Přidejte následující kód do soubor tailwind.config.js:

/** @typ {import('tailwindcss').Config}*/
modul.exports = {
 obsah: [ 
"./app/**/*.{js, ts, jsx, tsx",
"./pages/**/*.{js, ts, jsx, tsx",
"./components/**/*.{js, ts, jsx, tsx}",
// Nebo pokud používáte adresář `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 téma: { 
 rozšířit: {},
 },
 pluginy: [],
}

Přidejte směrnici Tailwind do aplikace

Poté do souboru CSS aplikace přidejte následující direktivy Tailwind. Toto je soubor s názvem global.css. Měli byste odstranit obsah souboru global.css a přidat direktivy Tailwind.

@základna zadního větru;
komponenty @tailwind;
@tailwind utility;

Spusťte proces sestavení

Nyní na terminálu spusťte nástroj CLI s následujícím příkazem:

npm spustit dev

Tento příkaz prohledá vaše soubory šablon na třídy a sestaví vaše CSS. Otevře se vám port pro zobrazení prohlížeče.

Nyní, pokud přejdete na server na adrese http://localhost: 3000 uvidíte svou aplikaci. Měli byste si všimnout mírné změny v obsahu. To znamená, že proces instalace byl úspěšný a CSS Tailwind je aktivní.

Použijte Tailwind v projektu

Dále otestujeme funkce CSS Tailwind použitím tříd na váš projekt. Máte například aplikaci s textem „Hello Tailwind“. Chcete mu dát červenou barvu se světle modrým pozadím.

Vytvořit Home.tsx soubor a poté přidejte následující kód:

vývoznívýchozífunkceDomov() {
vrátit se (
"bg-blue-300">
'text-red-900'>Ahoj Tailwind CSS</h1>
 </body>
 );
} 

Nyní, když přejdete do prohlížeče, uvidíte, že se text změnil na červenou a pozadí je modré.

Můžete prozkoumat další funkce CSS Tailwind a upravit tak další součásti své aplikace. Podmíněné modifikátory vám umožňují vytvářet reaktivní stavy, jako je visení a zaostření. Své stránky můžete také upravit do tmavého a světlého režimu podle preferencí uživatele.

Výhody použití Tailwind CSS

Tailwind CSS, vytvořený Adamem Wathanem v roce 2017, se v mnoha ohledech liší od ostatních knihoven CSS. Má nulovou dobu běhu, takže je bleskurychlý. A snadno se instaluje. Tailwind prohledává všechny soubory HTML a komponenty JavaScriptu a hledá názvy tříd ve vaší aplikaci. Poté vygeneruje odpovídající styly, které navrhují prvky.

Tailwind CSS vám umožňuje navrhovat složité komponenty z primitivních utilit. Styly můžete znovu použít napříč komponentami a použít modifikátory ke stylování responzivních uživatelských rozhraní. Pomocí zde uvedených kroků se dozvíte, jak nainstalovat a používat Tailwind CSS k přizpůsobení aplikací, které odpovídají vaší značce.