Ako nainštalovať a používať Tailwind CSS v aplikácii Next.js

Ako nainštalovať a používať Tailwind CSS v aplikácii Next.js
Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

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.



ako dlho vydržia napájacie zdroje k počítaču
VYUŽITIE VIDEA DŇA

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 JavaScript spustite tieto dva terminálové príkazy:

D4CC874C158D9005DBCB6474723F8993EDC9E47

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 :

 /** @type {import('tailwindcss').Config} */  
module.exports = { 
    content: [  
        "./app/**/*.{js,ts,jsx,tsx}", 
        "./pages/**/*.{js,ts,jsx,tsx}", 
        "./components/**/*.{js,ts,jsx,tsx}", 
 
        // Or if using `src` directory:  
        "./src/**/*.{js,ts,jsx,tsx}", 
    ], 
    theme: {  
        extend: {}, 
    }, 
    plugins: [], 
}

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.



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

Spustite proces zostavenia

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

 npm run 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.

Tailwind otvoril 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:

 export default function Home() { 
    return ( 
        <body className="bg-blue-300"> 
            <h1 className='text-red-900'>Hello Tailwind CSS</h1> 
        </body> 
    ); 
}

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

Efekt TailwindCSS na text

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.

ako prevrátiť stĺpce v programe excel