Als u uw apps wilt stylen met een snel, flexibel en betrouwbaar framework, is Tailwind CSS een geweldige optie. Tailwind is een CSS-framework waarmee u aangepaste webcomponenten kunt ontwerpen. U kunt componenten ontwerpen zonder heen en weer te hoeven schakelen tussen HTML- en CSS-bestanden.

In tegenstelling tot Bootstrap heeft Tailwind geen vooraf gedefinieerde klassen. In plaats daarvan kun je je eigen aanpassen. Met Tailwind kun je complexe componenten bouwen met primitieve hulpprogramma's, functies en richtlijnen.

Leer hoe u Tailwind installeert en gebruikt om verbluffende gebruikersinterfaces te creëren in uw Next.js-projecten.

Installeer Tailwind CSS in Next.js

Ga aan de slag door Tailwind te installeren in een Next.js-toepassing. Het proces is vergelijkbaar met Tailwind installeren in een React-app, met een klein verschil in het configuratieproces.

Ga naar de Tailwind CSS-installatie

bladzijde. Ga dan naar de Kadergidsen gedeelte en selecteer Volgende.js. Dit gedeelte bevat alle instructies die u nodig hebt om Tailwind in te stellen in uw Next.js-project.

Om Tailwind te installeren via npm, de JavaScript-pakketbeheerder, voer deze twee terminalopdrachten uit:

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

Deze opdrachten maken twee configuratiebestanden met de naam staartwind.config.js En postcss.config.js in de hoofdmap van het project. Deze bestanden geven aan dat TailwindCSS met succes is geïnstalleerd. Je kunt Tailwind CSS ook installeren via de Tailwind CLI of als een PostCSS-plug-in.

Sjablonen configureren

Na de installatie moet u de sjabloonpaden in de installatiehandleiding configureren voor uw app-configuratiebestand. Voeg de volgende code toe aan het tailwind.config.js-bestand:

/** @type {import('tailwindcss').Config}*/
moduul.export = {
 inhoud: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Of als u de map `src` gebruikt: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 thema: { 
 verlengen: {},
 },
 plug-ins: [],
}

Tailwind-richtlijn toevoegen aan app

Voeg vervolgens de volgende Tailwind-richtlijnen toe aan uw App CSS-bestand. Dit is het bestand met de naam global.css. U moet de inhoud van het global.css-bestand verwijderen en de Tailwind-richtlijnen toevoegen.

@staartwindbasis;
@tailwind-componenten;
@tailwind-hulpprogramma's;

Voer het bouwproces uit

Voer nu op de terminal de CLI-tool uit met de volgende opdracht:

npm run dev

Deze opdracht scant uw sjabloonbestanden op klassen en bouwt uw CSS. Er wordt een poort voor u geopend om de browser te bekijken.

Als u nu naar de server navigeert op http://localhost: 3000 je ziet je app. U zou een kleine verandering in de inhoud moeten opmerken. Dit geeft aan dat het installatieproces een succes is en dat Tailwind CSS live is.

Gebruik Tailwind in het project

Laten we vervolgens Tailwind CSS-functies testen door klassen toe te passen op uw project. Je hebt bijvoorbeeld een app met de tekst "Hallo Tailwind". Je wilt het een rode kleur geven met een lichtblauwe achtergrond.

Maak een Thuis.tsx bestand en voeg de volgende code toe:

exporterenstandaardfunctieThuis() {
opbrengst (
"bg-blauw-300">
'tekst-rood-900'>Hallo Tailwind-CSS</h1>
 </body>
 );
} 

Wanneer u nu naar de browser navigeert, ziet u dat de tekst in rood is veranderd en dat de achtergrond blauw is.

U kunt andere Tailwind CSS-functies verkennen om andere componenten van uw app vorm te geven. Met de voorwaardelijke modificaties kunt u reactieve toestanden creëren, zoals zweven en focus. U kunt uw pagina's ook aanpassen aan donkere en lichte modi volgens de voorkeur van de gebruiker.

Voordelen van het gebruik van Tailwind CSS

Tailwind CSS, gemaakt door Adam Wathan in 2017, verschilt op veel manieren van andere CSS-bibliotheken. Het heeft geen looptijd, waardoor het razendsnel is. En is eenvoudig te installeren. Tailwind scant alle HTML-bestanden en JavaScript-componenten op klassenamen in uw app. Vervolgens genereert het de overeenkomstige stijlen die de elementen ontwerpen.

Met Tailwind CSS kunt u complexe componenten ontwerpen vanuit primitieve hulpprogramma's. U kunt stijlen in verschillende componenten hergebruiken en modifiers gebruiken om responsieve gebruikersinterfaces te stylen. Gebruik de stappen hier om te leren hoe u Tailwind CSS kunt installeren en gebruiken om apps aan te passen die bij uw merk passen.