Ak chcete upraviť svoje aplikácie pomocou rýchleho, flexibilného a spoľahlivého rámca, Tailwind CSS je skvelá voľba. Tailwind je rámec CSS, ktorý vám pomáha navrhovať vlastné webové komponenty. Komponenty môžete navrhovať bez toho, aby ste museli prepínať tam a späť medzi súbormi HTML a CSS.

Na rozdiel od Bootstrapu nemá Tailwind preddefinované triedy. Namiesto toho si môžete prispôsobiť svoje vlastné. S Tailwindom môžete vytvárať zložité komponenty s primitívnymi pomôckami, funkciami a príkazmi.

Zistite, ako nainštalovať a používať Tailwind na vytváranie úžasných používateľských rozhraní vo vašich projektoch Next.js.

Nainštalujte Tailwind CSS v Next.js

Začnite inštaláciou Tailwind v aplikácii Next.js. Proces je podobný inštalácia Tailwind v aplikácii React, s malým rozdielom v procese konfigurácie.

Choďte na Inštalácia CSS Tailwind stránku. Potom prejdite na Rámcové príručky sekciu a vyberte

Next.js. Táto sekcia obsahuje všetky pokyny, ktoré potrebujete na nastavenie Tailwindu v projekte Next.js.

Ak chcete nainštalovať Tailwind cez npm, správca balíkov JavaScriptspustite tieto dva terminálové príkazy:

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

Tieto príkazy vytvárajú dva konfiguračné súbory s názvom tailwind.config.js a postcss.config.js v koreňovom priečinku projektu. Tieto súbory naznačujú, že TailwindCSS bol úspešne nainštalovaný. Tailwind CSS môžete nainštalovať aj cez Tailwind CLI alebo ako doplnok PostCSS.

Konfigurovať šablóny

Po inštalácii musíte nakonfigurovať cesty šablóny uvedené v inštalačnej príručke do konfiguračného súboru aplikácie. Pridajte nasledujúci kód do súbor 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}",
// Alebo ak používate adresár `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 téma: { 
 predĺžiť: {},
 },
 pluginy: [],
}

Pridajte smernicu Tailwind do aplikácie

Potom do súboru CSS aplikácie pridajte nasledujúce príkazy Tailwind. Toto je súbor s názvom global.css. Mali by ste odstrániť obsah súboru global.css a pridať príkazy Tailwind.

@základňa zadného vetra;
@zadný vietor komponenty;
@tailwind utility;

Spustite proces zostavenia

Teraz na termináli spustite nástroj CLI s nasledujúcim príkazom:

npm spustiť dev

Tento príkaz prehľadá vaše súbory šablón pre triedy a vytvorí váš CSS. Otvorí sa vám port na zobrazenie prehliadača.

Ak teraz prejdete na server na adrese http://localhost: 3000 uvidíte svoju aplikáciu. Mali by ste si všimnúť miernu zmenu v obsahu. Znamená to, že proces inštalácie bol úspešný a štýl CSS Tailwind je aktívny.

Použite Tailwind v projekte

Ďalej otestujme funkcie CSS Tailwind použitím tried na svoj projekt. Máte napríklad aplikáciu s textom „Ahoj Tailwind“. Chcete mu dať červenú farbu so svetlomodrým pozadím.

Vytvor Home.tsx súbor a potom pridajte nasledujúci kód:

exportpredvolenáfunkciuDomov() {
vrátiť (
"bg-blue-300">
'text-red-900'>Ahoj Tailwind CSS</h1>
 </body>
 );
} 

Teraz, keď prejdete do prehliadača, uvidíte text zmenený na červenú a pozadie je modré.

Môžete preskúmať ďalšie funkcie CSS Tailwind a upraviť tak ostatné súčasti svojej aplikácie. Podmienené modifikátory vám umožňujú vytvárať reaktívne stavy, ako je vznášanie sa a zaostrenie. Môžete tiež prispôsobiť svoje stránky do tmavého a svetlého režimu podľa preferencií používateľa.

Výhody používania Tailwind CSS

CSS Tailwind, ktoré vytvoril Adam Wathan v roku 2017, sa v mnohých smeroch líši od iných knižníc CSS. Má nulovú dobu chodu, vďaka čomu je bleskurýchly. A ľahko sa inštaluje. Tailwind skenuje všetky súbory HTML a komponenty JavaScriptu a hľadá názvy tried vo vašej aplikácii. Potom vygeneruje zodpovedajúce štýly, ktoré navrhujú prvky.

Tailwind CSS vám umožňuje navrhovať zložité komponenty z primitívnych nástrojov. Štýly môžete znova použiť v rámci komponentov a použiť modifikátory na úpravu responzívnych používateľských rozhraní. Pomocou týchto krokov sa dozviete, ako nainštalovať a používať Tailwind CSS na prispôsobenie aplikácií, ktoré zodpovedajú vašej značke.