Skapa återanvändbara komponentklasser
Använd @apply för att bygga klasserna .btn, .card och .badge i en global CSS-fil och minska duplicering i HTML-mallar.
Skapa återanvändbara komponentklasser är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Komponentklasser kontra utility-klasser
Tailwind uppmuntrar till utility-first – att tillämpa klasser med ett enda syfte direkt på HTML-element. Men för komplexa komponenter som knappar, kort och märken som förekommer på många ställen i ett projekt minskar det upprepning att bryta ut dem till komponentklasser med @apply och skapar en konsekvent, namngiven vokabulär för teamet. Målet är inte att återskapa traditionell CSS, utan att skapa en liten uppsättning värdefulla abstraktioner där duplicering verkligen blir kostsam.
Skapa en komponentklass för knappar
En knapp är en av de bästa kandidaterna för en komponentklass, eftersom alla interaktiva användargränssnitt innehåller många knappar med samma grundläggande stilar. Definiera en basklass .btn för den gemensamma strukturen och skapa sedan modifierarklasser som .btn-primary, .btn-secondary och .btn-outline för olika varianter. Användaren tillämpar båda klasserna för att få knappens fullständiga stil utan att behöva känna till de underliggande utilities.
@layer components {
.btn {
@apply inline-flex items-center justify-center gap-2
px-4 py-2 rounded-lg text-sm font-semibold
transition-all duration-150
focus:outline-none focus:ring-2 focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed;
}
.btn-primary {
@apply btn bg-blue-600 text-white
hover:bg-blue-700 active:bg-blue-800
focus:ring-blue-500;
}
.btn-outline {
@apply btn border border-gray-300 text-gray-700 bg-white
hover:bg-gray-50 active:bg-gray-100
focus:ring-gray-400;
}
}Använda komponentklasser för knappar i HTML
När komponentklasserna är definierade blir HTML-koden kortfattad och lättläst. Använd btn btn-primary för en primär knapp eller btn btn-outline för ett sekundärt alternativ. Du kan fortfarande lägga till individuella utility-klasser för att åsidosätta specifika egenskaper – till exempel w-full för att få en knapp att sträcka sig över hela bredden – eftersom utilities alltid vinner över komponentklasser i Tailwind-lagrenas hierarki.
<!-- Clean, readable HTML using component classes -->
<button class="btn btn-primary">Save Changes</button>
<button class="btn btn-outline">Cancel</button>
<!-- Utility override still works -->
<button class="btn btn-primary w-full">Full Width Button</button>
<!-- Disabled state from btn class -->
<button class="btn btn-primary" disabled>Loading...</button>Skapa en komponentklass för kort
Kort är containerkomponenter som omsluter innehållssektioner. En basklass .card hanterar den visuella containern, medan modifierarklasser som .card-compact eller .card-bordered lägger till variationer. Det här mönstret håller HTML-koden ren samtidigt som det ger flexibel konfiguration – utvecklaren lägger till card för standardutseendet och kan vid behov lägga till en modifierare för en variant.
@layer components {
.card {
@apply bg-white rounded-xl shadow-sm border border-gray-200
overflow-hidden;
}
.card-body {
@apply p-6;
}
.card-header {
@apply px-6 py-4 border-b border-gray-100 font-semibold text-gray-900;
}
.card-footer {
@apply px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end gap-3;
}
/* Dark mode variant */
.dark .card {
@apply bg-gray-800 border-gray-700;
}
}Komponentklasser för märken
Märken är små, pillerformade etiketter som används för statusindikatorer, antal och kategoritaggar. De passar utmärkt som komponentklasser eftersom de förekommer ofta och alltid har samma pillerform. Definiera en basklass .badge och modifierarklasser för färgerna. Håll dem små och fokuserade – märken bör inte ha en komplex intern struktur.
@layer components {
.badge {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full
text-xs font-medium;
}
.badge-blue { @apply badge bg-blue-100 text-blue-700; }
.badge-green { @apply badge bg-green-100 text-green-700; }
.badge-yellow { @apply badge bg-yellow-100 text-yellow-700; }
.badge-red { @apply badge bg-red-100 text-red-700; }
.badge-gray { @apply badge bg-gray-100 text-gray-600; }
}
<!-- Usage -->
<span class="badge-green">Active</span>
<span class="badge-red">Overdue</span>Komponentklasser för formulärfält
Formulärfält har många gemensamma stilar – kantlinje, utfyllnad, border-radius och fokusring – som upprepas för varje textfält, textarea och select i ett projekt. Bryt ut dessa till en klass .form-input och modifierarklasser för olika tillstånd. Detta är särskilt användbart tillsammans med tillägget @tailwindcss/forms, som först normaliserar webbläsarens standardstilar.
@layer components {
.form-field {
@apply w-full rounded-lg border border-gray-300 bg-white
px-4 py-2.5 text-sm text-gray-900
placeholder:text-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100
dark:placeholder:text-gray-500;
}
.form-field-error {
@apply form-field border-red-500 focus:ring-red-500;
}
.form-label {
@apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}
}Komponentklasser för aviseringar och toast-meddelanden
Aviseringar förmedlar viktig återkoppling till användarna och förekommer i flera semantiska varianter: information, lyckat, varning och fel. Alla har samma struktur men använder olika färger. Definiera en basklass .alert för layouten och en uppsättning modifierarklasser för varje semantisk typ. Basklassen hanterar utfyllnad, border-radius och ikonjustering, medan modifierarna hanterar färgtemat.
@layer components {
.alert {
@apply flex items-start gap-3 p-4 rounded-lg text-sm;
}
.alert-info { @apply alert bg-blue-50 text-blue-800 border border-blue-200; }
.alert-success { @apply alert bg-green-50 text-green-800 border border-green-200; }
.alert-warning { @apply alert bg-yellow-50 text-yellow-800 border border-yellow-200; }
.alert-error { @apply alert bg-red-50 text-red-800 border border-red-200; }
}
<!-- Usage -->
<div class="alert-success">
<span>Your profile was saved successfully.</span>
</div>Klasser för navigeringslänkar
Navigeringslänkar är ytterligare en utmärkt kandidat för komponentklasser, eftersom de alltid har samma grundutseende med variationer för aktivt tillstånd. Definiera en klass .nav-link för standardtillståndet och en klass .nav-link-active för länken till den markerade aktuella sidan. Om du använder ett JavaScript-ramverk tillämpar du vanligtvis den aktiva klassen programmatiskt baserat på den aktuella routen.
@layer components {
.nav-link {
@apply flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
text-gray-600 hover:bg-gray-100 hover:text-gray-900
transition-colors duration-150;
}
.nav-link-active {
@apply nav-link bg-blue-50 text-blue-700 hover:bg-blue-100;
}
}
<nav>
<a href="/" class="nav-link-active">Dashboard</a>
<a href="/settings" class="nav-link">Settings</a>
</nav>Organisera komponentklasser i filer
När antalet komponentklasser växer bör du hålla dem organiserade i dedikerade CSS-filer, grupperade efter kategori. Importera dem alla till din huvudsakliga CSS-fil med @import eller genom att importera flera filer via PostCSS. En vanlig struktur har separata filer för knappar, formulär, kort, märken, navigering och typografi – allt inom omfånget @layer components.
/* src/styles/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Component class files */
@import './components/buttons.css';
@import './components/cards.css';
@import './components/badges.css';
@import './components/forms.css';
@import './components/navigation.css';
/* Custom utilities */
@import './utilities/text-balance.css';Komponentklasser med storleksmodifierare
Många komponenter finns i olika storlekar – liten, medelstor och stor. Definiera storleksmodifierarklasser som åsidosätter utfyllnaden och teckenstorleken från basklassen. Eftersom storleksmodifierarna tillämpas efter basklassen i CSS-källan (inom samma lager) åsidosätter de basvärdena korrekt utan att högre specificitet eller !important behövs.
@layer components {
/* Base button */
.btn { @apply inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium; }
/* Size modifiers */
.btn-xs { @apply px-2.5 py-1.5 text-xs rounded; }
.btn-sm { @apply px-3 py-1.5 text-sm rounded-md; }
.btn-lg { @apply px-5 py-2.5 text-base rounded-lg; }
.btn-xl { @apply px-6 py-3 text-lg rounded-xl; }
}
<!-- Usage -->
<button class="btn btn-primary btn-sm">Small Primary</button>
<button class="btn btn-primary">Default Primary</button>
<button class="btn btn-primary btn-lg">Large Primary</button>Testa komponentklasser
Skapa en enkel visuell testsida som visar alla varianter av varje komponentklass bredvid varandra. Den fungerar som en levande stilguide och upptäcker regressioner när du ändrar komponentklasserna. Inkludera alla varianter för storlek, färg och tillstånd. Dela sidan med designers så att de kan kontrollera att komponentklasserna stämmer överens med den avsedda specifikationen för designsystemet innan de används i produktion.
<!-- Component test page snippet -->
<div class="p-8 space-y-8">
<div>
<h3 class="text-xs font-mono text-gray-400 mb-3">Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-primary" disabled>Disabled</button>
</div>
</div>
<div>
<h3 class="text-xs font-mono text-gray-400 mb-3">Badges</h3>
<div class="flex flex-wrap gap-2">
<span class="badge-blue">Blue</span>
<span class="badge-green">Green</span>
<span class="badge-red">Red</span>
</div>
</div>
</div>Snabbkontroll
Testa din förståelse av hur man skapar återanvändbara komponentklasser med Tailwinds @apply-direktiv.
Sammanfattning av lektionen
I den här lektionen har du lärt dig att definiera komponentklasser med bas + modifierare med hjälp av @apply inuti @layer components för knappar, kort och märken, att storleksmodifierare låter en enda basklass stödja flera storleksvarianter och att komponentklasser bör organiseras i separata filer efter kategori i takt med att projektet växer. Härnäst utforskar vi Tailwinds @layer-system för att organisera anpassad CSS.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Skapa återanvändbara komponentklasser” gratis?
Ja – hela texten till ”Skapa återanvändbara komponentklasser” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skapa återanvändbara komponentklasser”?
Använd @apply för att bygga klasserna .btn, .card och .badge i en global CSS-fil och minska duplicering i HTML-mallar. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Skapa återanvändbara komponentklasser”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Vad @apply gör och när det bör användas
- Skapa återanvändbara komponentklasser
- Organisera anpassad CSS med lager
- Fallgropar med @apply och alternativ