Tailwind CSS är ett verktygs första CSS-ramverk som tillåter utvecklare att designa anpassade webbkomponenter utan att byta till en CSS-fil. I den här handledningen kommer du att lära dig hur du installerar Tailwind CSS i React och hur du kan använda den för att bygga en enkel React-sida.

Varför använda Tailwind CSS?

Det finns redan många CSS ramverk som förenklar hur utvecklare designar webbsidor. Så varför ska du använda Tailwind CSS?

CSS-ramverk som Bootstrap och Foundation är opinionsbildade ramverk, vilket innebär att de förser utvecklare med fördefinierade komponenter som har standardstilar. Detta begränsar både anpassning och kreativitet, och du slutar med webbplatser som ser ganska generiska ut.

Medvind CSS, däremot, är ett ramverk som är först med verktyget som ger dig den kreativa kontrollen för att skapa dynamiska komponenter. Och till skillnad från Bootstrap kan du enkelt anpassa design som du vill.

En annan fördel med att använda Tailwind CSS är att du får en liten CSS-paketstorlek eftersom den tar bort alla oanvänd CSS under byggprocessen (vilket skiljer sig från Bootstrap, eftersom det inkluderar alla CSS-filer i bygga).

Lär dig mer om skillnader mellan Tailwind CSS och Bootstrap från vår artikel om ämnet.

Nackdelar med att använda Tailwind CSS

Tailwind CSS har en brant inlärningskurva även för erfarna utvecklare. Det tar lite tid att lära sig hur man använder verktygsklasserna fullt ut, och du kan behöva hänvisa till dokumentationen ofta. Men efter att ha blivit bekant med klasserna kommer du att tycka att det är enklare och snabbare jämfört med vanlig CSS.

De flesta utvecklare gillar att följa separationsprincipen så att CSS- och HTML-filerna skrivs i olika filer. Med Tailwind CSS skriver du CSS direkt i HTML-uppmärkningen – en nackdel för vissa.

Även med dessa nackdelar är Tailwind CSS ett ramverk som du allvarligt bör överväga om du redan är bekväm med CSS och vill bygga design snabbare.

Komma igång: Skapa ett React-projekt

Kör följande kommando i terminalen för att bygga en Reagera applikation med hjälp av skapa-reagera-app.

npx create-react-app react-tailwind

skapa-reagera-app ger ett enkelt sätt att skapa en React-app utan att konfigurera byggverktyg som webpack, babel eller linters. Det betyder att du får en fungerande React-miljö inom några minuter.

Kommandot ovan skapar en ny mapp med namnet reagera-medvind. Navigera till mappen och öppna den med din föredragna textredigerare.

cd reagera-medvind

Installera sedan Tailwind CSS och konfigurera den för att fungera med React-applikationen.

Använd Tailwind CSS i React

Installera Tailwind CSS och dess beroenden med detta kommando:

npm installera tailwindcss postcss autoprefixer

PostCSS använder JavaScript-plugins för att göra CSS kompatibel med de flesta webbläsare. Den kontrollerar webbläsaren som programmet körs i och bestämmer vilka polyfills som behövs för att din CSS ska fungera sömlöst. Autoprefixer är ett PostCSS-plugin som använder värden från caniuse.com för att automatiskt lägga till leverantörsprefix till CSS-regler.

Initiera Tailwind CSS

Springa det medvind init kommando för att generera Tailwind CSS standardkonfigurationsfiler.

npx tailwindcss init

Detta skapar tailwind.config.js i rotmappen som lagrar alla Tailwinds konfigurationsfiler och innehåller följande:

module.exports = {
 innehåll: [],
 tema: {
 förlänga: {},
 },
 plugins: [],
}

Konfigurera mallsökvägar

Du måste berätta för Tailwind CSS vilka filer den ska kontrollera för att se vilka CSS-klasser som används. Detta gör att Tailwind kan identifiera och ta bort oanvända klasser och minskar därför storleken på den genererade CSS.

I tailwind.config.js, lägg till mallsökvägarna under innehållsnyckeln.

module.exports = {
 innehåll: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 förlänga: {},
 },
 plugins: [],
}

Injicera Tailwind CSS i React

Nästa steg är att inkludera Tailwind CSS i applikationen med hjälp av @medvind direktiv.

Ta bort allt i index.css och lägg till följande för att importera basstilarna, komponenterna och verktygen.

@medvindsbas;
@medvindskomponenter;
@medvindsverktyg;

Slutligen, se till index.css är importerad i index.js och Tailwind CSS kommer att vara redo att användas.

Använda Tailwind CSS för att utforma en React-komponent

Du kommer att skapa den enkla webbsidan nedan och styla den med hjälp av Tailwinds verktygsklasser.

Den här sidan innehåller två huvudavsnitt: a navigeringsfält, och hjältesektionen (som har en rubrik och en knapp).

För att illustrera hur Tailwind CSS gör det enklare att skriva CSS, prova att styla webbsidan med vanlig CSS och Tailwind CSS.

Kom igång genom att ändra App.js i src mapp för att ta bort den onödiga koden.

importera './App.css'
function App() {
 lämna tillbaka (



 );
}
exportera standardapp;

Lägg sedan till webbsidans innehåll till App.js.

importera "./App.css";
function App() {
 lämna tillbaka (







 Tailwind CSS gör styling av React-komponenter enklare!



Komma igång






 );
}

För att använda vanlig CSS, lägg till CSS till App.css.

nav {
 display: flex;
 motivera-innehåll: mellanslag-mellan;
 stoppning: 16px 36px;
 färg: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logotyp {
 teckenstorlek: 18px;
 font-weight: fet;
}
ul {
 list-stil: ingen;
 display: inline-flex;
}
ul li {
 marginal-vänster: 16px;
 markör: pekare;
}
.hero {
 display: flex;
 flex-riktning: kolumn;
 align-items: center;
 margin-top: 64px;
}
h1 {
 teckenstorlek: 36px;
 text-align: center;
}
.btn {
 bakgrundsfärg: #000000;
 färg: #fff;
 stoppning: 10px;
 bredd: passformsinnehåll;
 margin-top: 36px;
}

Med Tailwind CSS behöver du inte skriva CSS-reglerna för varje klass. Istället använder du verktygsklasser. Dessa är klasser som omfattas av en enda CSS-egenskap. Om du till exempel vill skapa en knapp med svart bakgrund och vit textfärg måste du använda bg-svart och text-vit bruksklasser.

App.js ska se ut så här.

function App() {
 lämna tillbaka (







 Tailwind CSS gör styling av React-komponenter enklare!




 Komma igång







 );
}

Du behöver inte importera App.css eftersom stilarna som genereras av Tailwind CSS lagras i index.css som du importerade in index.js tidigare.

Jämfört med vanlig CSS resulterar detta tillvägagångssätt i mindre kod som är lätt att förstå.

Kod i stil med Tailwind CSS

I den här artikeln lärde du dig om Tailwind CSS, dess styrkor, nackdelar och hur du kan använda dess verktygsklasser i React-applikationer. Förutom klasser erbjuder Tailwind CSS även andra ytterligare funktioner, inklusive möjligheten att skapa responsiva layouter och återanvändbara komponenter.

Men, som vi nämnde tidigare, är Tailwind långt ifrån det enda CSS-ramverket på marknaden. Vilket kommer du att använda för ditt nästa projekt?

Tailwind CSS vs. Bootstrap: Vilket är ett bättre ramverk?

När du väljer ett CSS-ramverk är det viktigt att hitta det som uppfyller dina krav.

Läs Nästa

Om författaren