Tailwind CSS is een eerste hulpprogramma voor CSS-framework waarmee ontwikkelaars aangepaste webcomponenten kunnen ontwerpen zonder over te schakelen naar een CSS-bestand. In deze tutorial leer je hoe je Tailwind CSS installeert in React en hoe je het kunt gebruiken om een ​​eenvoudige React-pagina te bouwen.

Waarom Tailwind CSS gebruiken?

Er zijn er al veel CSS frameworks die de manier waarop ontwikkelaars webpagina's ontwerpen, vereenvoudigen. Dus waarom zou u Tailwind CSS gebruiken?

CSS-frameworks zoals Bootstrap en Foundation zijn eigenzinnige frameworks, wat betekent dat ze ontwikkelaars vooraf gedefinieerde componenten met standaardstijlen bieden. Dit beperkt zowel maatwerk als creativiteit, en je krijgt websites die er nogal generiek uitzien.

Tailwind CSS, is echter een raamwerk waarbij het nut eerst centraal staat en u de creatieve controle geeft om dynamische componenten te maken. En in tegenstelling tot Bootstrap, kunt u eenvoudig ontwerpen naar wens aanpassen.

Een ander voordeel van het gebruik van Tailwind CSS is dat je een kleine CSS-bundelgrootte krijgt, omdat het alle ongebruikte CSS tijdens het bouwproces (wat anders is dan Bootstrap, aangezien het alle CSS-bestanden in de bouwen).

Meer informatie over de verschillen tussen Tailwind CSS en Bootstrap uit ons artikel over het onderwerp.

Nadelen van het gebruik van Tailwind CSS

Tailwind CSS heeft een steile leercurve, zelfs voor ervaren ontwikkelaars. Het kost wat tijd om te leren hoe u de hulpprogrammaklassen volledig kunt gebruiken, en het kan zijn dat u de documentatie vaak moet raadplegen. Nadat u echter vertrouwd bent geraakt met de klassen, zult u merken dat het eenvoudiger en sneller is in vergelijking met gewone CSS.

De meeste ontwikkelaars volgen graag het principe van de scheiding van zorgen, zodat de CSS- en HTML-bestanden in verschillende bestanden worden geschreven. Met Tailwind CSS schrijft u de CSS rechtstreeks in de HTML-opmaak - voor sommigen een nadeel.

Zelfs met deze nadelen is Tailwind CSS een raamwerk dat je serieus moet overwegen als je al vertrouwd bent met CSS en sneller ontwerpen wilt bouwen.

Aan de slag: een React-project maken

Voer de volgende opdracht in de terminal uit om een Reageer applicatie met behulp van maak-reageer-app.

npx maken-reageren-app reageren-wind in de rug

maak-reageer-app biedt een gemakkelijke manier om een ​​React-app te maken zonder buildtools zoals webpack, babel of linters te configureren. Hierdoor heb je binnen enkele minuten een werkende React-omgeving.

De bovenstaande opdracht maakt een nieuwe map met de naam reageren-wind in de rug. Navigeer naar de map en open deze met uw favoriete teksteditor.

cd reageren-wind in de rug

Installeer vervolgens Tailwind CSS en configureer het om met de React-toepassing te werken.

Tailwind CSS gebruiken in React

Installeer Tailwind CSS en zijn afhankelijkheden met deze opdracht:

npm installeer tailwindcss postcss autoprefixer

PostCSS gebruikt JavaScript-plug-ins om CSS compatibel te maken met de meeste browsers. Het controleert de browser waarin de toepassing wordt uitgevoerd en bepaalt de polyfills die nodig zijn om uw CSS naadloos te laten werken. Autoprefixer is een PostCSS-plug-in die waarden gebruikt van caniuse.com om automatisch leveranciersvoorvoegsels toe te voegen aan CSS-regels.

Tailwind CSS initialiseren

Voer de... uit wind in de rug commando om Tailwind CSS standaardconfiguratiebestanden te genereren.

npx rugwindcss init

Dit creëert staartwind.config.js in de hoofdmap die alle configuratiebestanden van Tailwind opslaat en het volgende bevat:

module.export = {
 inhoud: [],
 thema: {
 uitbreiden: {},
 },
 plug-ins: [],
}

Sjabloonpaden configureren

U moet Tailwind CSS de bestanden vertellen die het moet controleren om te zien welke CSS-klassen worden gebruikt. Hierdoor kan Tailwind de ongebruikte klassen identificeren en verwijderen en wordt de gegenereerde CSS daardoor kleiner.

In staartwind.config.js, voeg de sjabloonpaden toe onder de inhoudssleutel.

module.export = {
 inhoud: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 thema: {
 uitbreiden: {},
 },
 plug-ins: [],
}

Tailwind CSS injecteren om te reageren

De volgende stap is om Tailwind CSS in de applicatie op te nemen met behulp van @wind in de rug richtlijnen.

Alles verwijderen in index.css en voeg het volgende toe om de basisstijlen, componenten en hulpprogramma's te importeren.

@wind in de rug;
@tailwind componenten;
@tailwind nutsbedrijven;

Zorg er ten slotte voor dat index.css wordt geïmporteerd in index.js en Tailwind CSS is klaar voor gebruik.

Tailwind CSS gebruiken om een ​​React-component op te maken

U maakt de eenvoudige webpagina hieronder en geeft deze vorm met behulp van de hulpprogrammaklassen van Tailwind.

Deze pagina bevat twee hoofdsecties: a navigatiebalk, en het heldengedeelte (met een kop en een knop).

Om te illustreren hoe Tailwind CSS het schrijven van CSS gemakkelijker maakt, kunt u proberen de webpagina te stylen met gewone CSS en Tailwind CSS.

Ga aan de slag door de. te wijzigen App.js in de src map om de onnodige code te verwijderen.

importeer './App.css'
functie App() {
 opbrengst (



 );
}
export standaard app;

Voeg vervolgens de inhoud van de webpagina toe aan App.js.

importeer "./App.css";
functie App() {
 opbrengst (







 Tailwind CSS maakt het stylen van React-componenten eenvoudiger!



Begin






 );
}

Om gewone CSS te gebruiken, voegt u de CSS toe aan App.css.

navigatie {
 weergave: flexibel;
 rechtvaardigen-inhoud: spatie-tussen;
 opvulling: 16px 36px;
 kleur: #000;
 box-schaduw: 0px 2px 5px 0px rgba (168, 168, 168, 0.75);
}
.logo {
 lettergrootte: 18px;
 lettergewicht: vet;
}
ul {
 lijststijl: geen;
 weergave: inline-flex;
}
ul li {
 marge-links: 16px;
 cursor: aanwijzer;
}
.held {
 weergave: flexibel;
 flex-richting: kolom;
 align-items: midden;
 marge-top: 64px;
}
h1 {
 lettergrootte: 36px;
 tekst uitlijnen: midden;
}
.btn {
 achtergrondkleur: #000000;
 kleur: #fff;
 opvulling: 10px;
 breedte: pasvorm-inhoud;
 marge-top: 36px;
}

Met Tailwind CSS hoef je niet voor elke klasse de CSS-regels te schrijven. In plaats daarvan gebruikt u hulpprogrammaklassen. Dit zijn klassen die binnen een enkele CSS-eigenschap vallen. Als u bijvoorbeeld een knop wilt maken met een zwarte achtergrond en een witte tekstkleur, moet u de gebruiken bg-zwart en tekst-wit utiliteitsklassen.

App.js zou er zo uit moeten zien.

functie App() {
 opbrengst (







 Tailwind CSS maakt het stylen van React-componenten eenvoudiger!




 Begin







 );
}

U hoeft niet te importeren App.css aangezien de stijlen gegenereerd door Tailwind CSS worden opgeslagen in index.css waarin je hebt geïmporteerd index.js eerder.

In vergelijking met gewone CSS resulteert deze aanpak in minder code die gemakkelijk te begrijpen is.

Codeer in stijl met Tailwind CSS

In dit artikel heb je geleerd over Tailwind CSS, de sterke en zwakke punten en hoe je de utility-klassen kunt gebruiken in React-applicaties. Naast klassen biedt Tailwind CSS ook andere extra functies, waaronder de mogelijkheid om responsieve lay-outs en herbruikbare componenten te maken.

Maar, zoals we eerder vermeldden, Tailwind is verre van het enige CSS-framework op de markt. Welke ga je gebruiken voor je volgende project?

Tailwind CSS vs. Bootstrap: wat is een beter framework?

Bij het kiezen van een CSS-framework is het belangrijk om degene te vinden die aan uw eisen voldoet.

Lees volgende

Over de auteur