Tailwind CSS er en utility first CSS framework, der giver udviklere mulighed for at designe brugerdefinerede webkomponenter uden at skifte til en CSS-fil. I denne tutorial lærer du, hvordan du installerer Tailwind CSS i React, og hvordan du kan bruge den til at bygge en simpel React-side.

Hvorfor bruge Tailwind CSS?

Der er allerede mange CSS rammer, der forenkler, hvordan udviklere designer websider. Så hvorfor skulle du bruge Tailwind CSS?

CSS-frameworks såsom Bootstrap og Foundation er opfattede rammer, hvilket betyder, at de giver udviklere foruddefinerede komponenter, der har standardstile. Dette begrænser både tilpasning og kreativitet, og du ender med hjemmesider, der ser ret generiske ud.

Medvind CSS, er dog en utility-first framework, der giver dig den kreative kontrol til at skabe dynamiske komponenter. Og i modsætning til Bootstrap kan du nemt tilpasse designs, som du vil.

En anden fordel ved at bruge Tailwind CSS er, at du ender med en lille CSS-bundtstørrelse, da den fjerner alle ubrugt CSS under byggeprocessen (som er forskellig fra Bootstrap, da den inkluderer alle CSS-filer i bygge).

Lær mere om forskelle mellem Tailwind CSS og Bootstrap fra vores artikel om emnet.

Ulemper ved at bruge Tailwind CSS

Tailwind CSS har en stejl indlæringskurve selv for erfarne udviklere. Det tager noget tid at lære, hvordan man fuldt ud bruger hjælpeklasserne, og du skal muligvis henvise til dokumentationen ofte. Men efter at have stiftet bekendtskab med klasserne, vil du finde det nemmere og hurtigere sammenlignet med almindelig CSS.

De fleste udviklere kan lide at følge princippet om adskillelse af bekymringer, således at CSS- og HTML-filerne er skrevet i forskellige filer. Med Tailwind CSS skriver du CSS'en direkte i HTML-markeringen - en ulempe for nogle.

Selv med disse ulemper er Tailwind CSS en ramme, som du seriøst bør overveje, hvis du allerede er fortrolig med CSS og ønsker at bygge designs hurtigere.

Kom godt i gang: Opret et React-projekt

Kør følgende kommando i terminalen for at stilladsere en Reagere applikation ved hjælp af opret-reager-app.

npx create-react-app react-tailwind

opret-reager-app giver en nem måde at oprette en React-app på uden at konfigurere byggeværktøjer som webpack, babel eller linters. Det betyder, at du ender med et fungerende React-miljø inden for få minutter.

Ovenstående kommando opretter en ny mappe med navnet reagere-medvind. Naviger til mappen, og åbn den ved hjælp af din foretrukne teksteditor.

cd reagere-medvind

Installer derefter Tailwind CSS og konfigurer den til at fungere med React-applikationen.

Brug Tailwind CSS i React

Installer Tailwind CSS og dens afhængigheder med denne kommando:

npm installer tailwindcss postcss autoprefixer

PostCSS bruger JavaScript-plugins til at gøre CSS kompatibel med de fleste browsere. Det tjekker den browser, applikationen kører i, og bestemmer de polyfills, der er nødvendige for at få din CSS til at fungere problemfrit. Autoprefixer er et PostCSS-plugin, der bruger værdier fra caniuse.com for automatisk at tilføje leverandørpræfikser til CSS-regler.

Initialiser Tailwind CSS

Kør medvind init kommando til at generere Tailwind CSS standard konfigurationsfiler.

npx medvindcss init

Dette skaber tailwind.config.js i rodmappen, som gemmer alle Tailwinds konfigurationsfiler og indeholder følgende:

module.exports = {
 indhold: [],
 tema: {
 forlænge: {},
 },
 plugins: [],
}

Konfigurer skabelonstier

Du skal fortælle Tailwind CSS, hvilke filer den skal tjekke for at se, hvilke CSS-klasser der bruges. Dette giver Tailwind mulighed for at identificere og fjerne de ubrugte klasser og reducerer derfor størrelsen af ​​den genererede CSS.

I tailwind.config.js, tilføje skabelonstierne under indholdsnøglen.

module.exports = {
 indhold: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 forlænge: {},
 },
 plugins: [],
}

Injicer Tailwind CSS i React

Det næste trin er at inkludere Tailwind CSS i applikationen ved hjælp af @medvind direktiver.

Slet alt i index.css og tilføje følgende for at importere basisstile, komponenter og hjælpeprogrammer.

@medvindsbase;
@tailwind komponenter;
@tailwind hjælpeprogrammer;

Sørg endelig for index.css er importeret i index.js og Tailwind CSS vil være klar til brug.

Brug af Tailwind CSS til at style en React-komponent

Du vil oprette den enkle webside nedenfor og style den ved hjælp af Tailwinds hjælpeklasser.

Denne side indeholder to hovedafsnit: a navigations bar, og heltesektionen (som har en overskrift og en knap).

For at illustrere, hvordan Tailwind CSS gør det nemmere at skrive CSS, prøv at style websiden ved hjælp af almindelig CSS og Tailwind CSS.

Kom i gang ved at ændre App.js i src mappe for at fjerne den unødvendige kode.

importer './App.css'
funktion App() {
 Vend tilbage (



 );
}
eksport standard app;

Tilføj derefter websidens indhold til App.js.

import "./App.css";
funktion App() {
 Vend tilbage (







 Tailwind CSS gør styling af React-komponenter nemmere!



Kom igang






 );
}

For at bruge almindelig CSS skal du tilføje CSS til App.css.

nav {
 display: flex;
 retfærdiggøre-indhold: mellemrum-mellem;
 polstring: 16px 36px;
 farve: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 skriftstørrelse: 18px;
 font-weight: fed;
}
ul {
 liste-stil: ingen;
 display: inline-flex;
}
ul li {
 margin-venstre: 16px;
 markør: pointer;
}
.hero {
 display: flex;
 flex-retning: kolonne;
 align-items: center;
 margin-top: 64px;
}
h1 {
 skriftstørrelse: 36px;
 tekst-align: center;
}
.btn {
 baggrundsfarve: #000000;
 farve: #fff;
 polstring: 10px;
 bredde: pasform-indhold;
 margin-top: 36px;
}

Med Tailwind CSS behøver du ikke skrive CSS-reglerne for hver klasse. I stedet bruger du hjælpeklasser. Disse er klasser, der er omfattet af en enkelt CSS-egenskab. For eksempel, hvis du vil oprette en knap med sort baggrund og hvid tekstfarve, skal du bruge bg-sort og tekst-hvid brugsklasser.

App.js skal se sådan ud.

funktion App() {
 Vend tilbage (







 Tailwind CSS gør styling af React-komponenter nemmere!




 Kom igang







 );
}

Du behøver ikke at importere App.css da de stilarter, der genereres af Tailwind CSS, er gemt i index.css som du har importeret i index.js tidligere.

Sammenlignet med almindelig CSS resulterer denne tilgang i mindre kode, der er let at forstå.

Kode i stil med Tailwind CSS

I denne artikel lærte du om Tailwind CSS, dens styrker, ulemper, og hvordan du kan bruge dens hjælpeklasser i React-applikationer. Udover klasser tilbyder Tailwind CSS også andre ekstra funktioner, herunder muligheden for at skabe responsive layouts og genbrugelige komponenter.

Men, som vi nævnte tidligere, er Tailwind langt fra den eneste CSS-ramme på markedet. Hvilken vil du bruge til dit næste projekt?

Tailwind CSS vs. Bootstrap: Hvilken er en bedre ramme?

Når du vælger en CSS-ramme, er det vigtigt at finde den, der opfylder dine krav.

Læs Næste

Om forfatteren