Tailwind CSS er et verktøys første CSS-rammeverk som lar utviklere designe tilpassede webkomponenter uten å bytte til en CSS-fil. I denne opplæringen lærer du hvordan du installerer Tailwind CSS i React og hvordan du kan bruke den til å bygge en enkel React-side.

Hvorfor bruke Tailwind CSS?

Det er allerede mange CSS rammeverk som forenkler hvordan utviklere designer nettsider. Så hvorfor bør du bruke Tailwind CSS?

CSS-rammeverk som Bootstrap og Foundation er oppfattede rammeverk, noe som betyr at de gir utviklere forhåndsdefinerte komponenter som har standardstiler. Dette begrenser både tilpasning og kreativitet, og du ender opp med nettsider som ser ganske generiske ut.

Medvind CSS, derimot, er et nytte-først rammeverk som gir deg kreativ kontroll for å lage dynamiske komponenter. Og i motsetning til Bootstrap, kan du enkelt tilpasse design som du vil.

En annen fordel med å bruke Tailwind CSS er at du ender opp med en liten CSS-buntstørrelse siden den fjerner alle ubrukt CSS under byggeprosessen (som er forskjellig fra Bootstrap, siden den inkluderer alle CSS-filer i bygge).

Lær mer om forskjeller mellom Tailwind CSS og Bootstrap fra vår artikkel om emnet.

Ulemper ved å bruke Tailwind CSS

Tailwind CSS har en bratt læringskurve selv for erfarne utviklere. Det tar litt tid å lære å bruke verktøyklassene fullt ut, og du må kanskje se dokumentasjonen ofte. Men etter å ha blitt kjent med klassene, vil du finne det enklere og raskere sammenlignet med vanlig CSS.

De fleste utviklere liker å følge separasjonsprinsippet slik at CSS- og HTML-filene skrives i forskjellige filer. Med Tailwind CSS skriver du CSS direkte i HTML-markeringen – en ulempe for noen.

Selv med disse ulempene, er Tailwind CSS et rammeverk som du bør vurdere seriøst hvis du allerede er komfortabel med CSS og ønsker å bygge design raskere.

Komme i gang: Lag et React-prosjekt

Kjør følgende kommando i terminalen for å stillas a Reagere applikasjon ved hjelp av lag-reager-app.

npx create-react-app react-tailwind

lag-reager-app gir en enkel måte å lage en React-app på uten å konfigurere byggeverktøy som webpack, babel eller linters. Dette betyr at du ender opp med et fungerende React-miljø i løpet av minutter.

Kommandoen ovenfor oppretter en ny mappe kalt reagere-medvind. Naviger til mappen og åpne den med ditt foretrukne tekstredigeringsprogram.

cd reagere-medvind

Installer deretter Tailwind CSS og konfigurer den til å fungere med React-applikasjonen.

Bruk Tailwind CSS i React

Installer Tailwind CSS og dens avhengigheter med denne kommandoen:

npm installer tailwindcss postcss autoprefixer

PostCSS bruker JavaScript-plugins for å gjøre CSS kompatibel med de fleste nettlesere. Den sjekker nettleseren applikasjonen kjører i og bestemmer polyfillene som trengs for å få CSS-en din til å fungere sømløst. Autoprefixer er en PostCSS-plugin som bruker verdier fra caniuse.com for automatisk å legge til leverandørprefikser i CSS-regler.

Initialiser Tailwind CSS

Kjør medvind init kommando for å generere Tailwind CSS standard konfigurasjonsfiler.

npx medvindcss init

Dette skaper tailwind.config.js i rotmappen som lagrer alle Tailwinds konfigurasjonsfiler og inneholder følgende:

module.exports = {
 innhold: [],
 tema: {
 forlenge: {},
 },
 plugins: [],
}

Konfigurer malbaner

Du må fortelle Tailwind CSS filene den skal sjekke for å se hvilke CSS-klasser som brukes. Dette lar Tailwind identifisere og fjerne de ubrukte klassene og reduserer derfor størrelsen på CSS-en som genereres.

I tailwind.config.js, legg til malbanene under innholdsnøkkelen.

module.exports = {
 innhold: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 forlenge: {},
 },
 plugins: [],
}

Injiser Tailwind CSS i React

Det neste trinnet er å inkludere Tailwind CSS i applikasjonen ved hjelp av @medvind direktiver.

Slett alt inn index.css og legg til følgende for å importere basisstilene, komponentene og verktøyene.

@medvindbase;
@tailwind komponenter;
@tailwind-verktøy;

Til slutt, sørg for index.css er importert i index.js og Tailwind CSS vil være klar til bruk.

Bruke Tailwind CSS for å style en React-komponent

Du vil lage den enkle nettsiden nedenfor og style den ved å bruke Tailwinds verktøyklasser.

Denne siden inneholder to hovedseksjoner: a navigasjonslinjen, og helteseksjonen (som har en overskrift og en knapp).

For å illustrere hvordan Tailwind CSS gjør det enklere å skrive CSS, prøv å style nettsiden med vanlig CSS og Tailwind CSS.

Kom i gang ved å endre App.js i src mappe for å fjerne den unødvendige koden.

importer './App.css'
funksjon App() {
 komme tilbake (



 );
}
eksport standard app;

Deretter legger du til innholdet på nettsiden App.js.

import "./App.css";
funksjon App() {
 komme tilbake (







 Tailwind CSS gjør styling av React-komponenter enklere!



Kom i gang






 );
}

For å bruke vanlig CSS, legg til CSS i App.css.

nav {
 display: flex;
 rettferdiggjøre-innhold: mellomrom-mellom;
 polstring: 16px 36px;
 farge: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 skriftstørrelse: 18px;
 font-weight: fet;
}
ul {
 liste-stil: ingen;
 display: inline-flex;
}
ul li {
 marg-venstre: 16px;
 markør: peker;
}
.hero {
 display: flex;
 flex-retning: kolonne;
 align-items: center;
 marg-top: 64px;
}
h1 {
 skriftstørrelse: 36px;
 tekst-align: center;
}
.btn {
 bakgrunnsfarge: #000000;
 farge: #fff;
 polstring: 10px;
 bredde: passform-innhold;
 marg-top: 36px;
}

Med Tailwind CSS trenger du ikke skrive CSS-reglene for hver klasse. I stedet bruker du verktøyklasser. Dette er klasser som omfatter en enkelt CSS-egenskap. Hvis du for eksempel vil lage en knapp med svart bakgrunn og hvit tekstfarge, må du bruke bg-svart og tekst-hvit bruksklasser.

App.js skal se slik ut.

funksjon App() {
 komme tilbake (







 Tailwind CSS gjør styling av React-komponenter enklere!




 Kom i gang







 );
}

Du trenger ikke importere App.css siden stilene generert av Tailwind CSS er lagret i index.css som du importerte inn index.js Tidligere.

Sammenlignet med vanlig CSS, resulterer denne tilnærmingen i mindre kode som er lett å forstå.

Kode i stil med Tailwind CSS

I denne artikkelen lærte du om Tailwind CSS, dens styrker, ulemper og hvordan du kan bruke verktøyklassene i React-applikasjoner. Bortsett fra klasser, tilbyr Tailwind CSS også andre tilleggsfunksjoner, inkludert muligheten til å lage responsive layouter og gjenbrukbare komponenter.

Men, som vi nevnte tidligere, er Tailwind langt fra det eneste CSS-rammeverket på markedet. Hvilken vil du bruke til ditt neste prosjekt?

Tailwind CSS vs. Bootstrap: Hvilket er et bedre rammeverk?

Når du velger et CSS-rammeverk er det viktig å finne det som oppfyller dine krav.

Les Neste

Om forfatteren