Home-theater-designers
Om du vill styla dina appar med ett snabbt, flexibelt och pålitligt ramverk är Tailwind CSS ett bra alternativ. Tailwind är ett CSS-ramverk som hjälper dig att designa anpassade webbkomponenter. Du kan designa komponenter utan att behöva växla fram och tillbaka mellan HTML- och CSS-filer.
Till skillnad från Bootstrap har Tailwind inga fördefinierade klasser. Istället får du skräddarsy din egen. Med Tailwind kan du bygga komplexa komponenter med primitiva verktyg, funktioner och direktiv.
MAKEUSE AV DAGENS VIDEO
Lär dig hur du installerar och använder Tailwind för att skapa fantastiska användargränssnitt i dina Next.js-projekt.
Installera Tailwind CSS i Next.js
Kom igång genom att installera Tailwind i en Next.js-applikation. Processen liknar installera Tailwind i en React-app , med en liten skillnad i konfigurationsprocessen.
Gå till Tailwind CSS installation sida. Gå sedan till Ramguider avsnitt och välj Next.js . Det här avsnittet innehåller alla instruktioner du behöver för att ställa in Tailwind i ditt Next.js-projekt.
För att installera Tailwind via npm, JavaScript-pakethanteraren , kör dessa två terminalkommandon:
D4CC874C158D9005DBCB6474723F8993EDC9E47Dessa kommandon skapar två namngivna konfigurationsfiler tailwind.config.js och postcss.config.js i rotprojektmappen. Dessa filer indikerar att TailwindCSS har installerats. Du kan också installera Tailwind CSS genom Tailwind CLI eller som ett PostCSS-plugin.
Konfigurera mallar
Efter installationen måste du konfigurera mallsökvägarna i installationsguiden till din appkonfigurationsfil. Lägg till följande kod till tailwind.config.js-filen :
/** @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: [],
}
Lägg till medvindsdirektiv i appen
Lägg sedan till följande Tailwind-direktiv till din App CSS-fil. Det här är filen som heter global.css. Du bör ta bort innehållet i filen global.css och lägga till Tailwind-direktiven.
@tailwind base;
@tailwind components;
@tailwind utilities;
Kör byggprocessen
Kör nu CLI-verktyget på terminalen med följande kommando:
npm run dev
Detta kommando skannar dina mallfiler efter klasser och bygger din CSS. Det öppnar en port så att du kan se webbläsaren.
Nu, om du navigerar till servern på http://localhost:3000 du kommer att se din app. Du bör märka en liten förändring i innehållet. Detta indikerar att installationsprocessen är en framgång och att Tailwind CSS är live.
Använd Tailwind i projektet
Låt oss sedan testa Tailwind CSS-funktioner genom att tillämpa klasser på ditt projekt. Du har till exempel en app med texten 'Hello Tailwind'. Du vill ge den en röd färg med en ljusblå bakgrund.
rippa cd till mp3 med spårnamn
Skapa en Home.tsx fil lägg sedan till följande kod:
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='text-red-900'>Hello Tailwind CSS</h1>
</body>
);
}
Nu, när du navigerar till webbläsaren, kommer du att se texten ändrad till röd och bakgrunden är blå.
Du kan utforska andra Tailwind CSS-funktioner för att styla andra komponenter i din app. De villkorliga modifierarna låter dig skapa reaktiva tillstånd som hovring och fokus. Du kan också anpassa dina sidor till mörka och ljusa lägen enligt användarens önskemål.
Fördelar med att använda Tailwind CSS
Tailwind CSS, gjord av Adam Wathan 2017, skiljer sig från andra CSS-bibliotek på många sätt. Den har noll körtid, vilket gör den blixtsnabb. Och är lätt att installera. Tailwind skannar alla HTML-filer och JavaScript-komponenter efter klassnamn i din app. Den genererar sedan motsvarande stilar som designar elementen.
Tailwind CSS låter dig designa komplexa komponenter från primitiva verktyg. Du kan återanvända stilar över komponenter och använda modifierare för att utforma responsiva användargränssnitt. Använd stegen här för att lära dig hur du installerar och använder Tailwind CSS för att anpassa appar som matchar ditt varumärke.