Herbruikbare componentclasses maken
Gebruik @apply om .btn-, .card- en .badge-classes te bouwen in een globaal CSS-bestand en verminder duplicatie in HTML-templates.
Herbruikbare componentclasses maken is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Componentklassen versus hulpprogrammaklassen
Tailwind stimuleert een utility-first-aanpak: u past klassen met één duidelijk doel rechtstreeks toe op HTML. Maar voor complexe componenten zoals knoppen, kaarten en badges die in een project op meerdere plaatsen voorkomen, vermindert het extraheren ervan naar componentklassen met @apply herhaling en creëert het een consistente, benoemde woordenschat voor uw team. Het doel is niet om traditionele CSS na te maken, maar om een kleine set waardevolle abstracties te creëren op plaatsen waar duplicatie echt kostbaar is.
Een componentklasse voor een knop maken
Een knop is een van de beste kandidaten voor een componentklasse, omdat elke interactieve gebruikersinterface veel knoppen heeft met dezelfde basisstijlen. Definieer een basisklasse .btn voor de gedeelde structuur en maak vervolgens modifierklassen zoals .btn-primary, .btn-secondary en .btn-outline voor varianten. Gebruikers passen beide klassen toe voor de volledige knopstijl, zonder dat ze de onderliggende utilities hoeven te kennen.
@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;
}
}Componentklassen voor knoppen gebruiken in HTML
Wanneer componentklassen zijn gedefinieerd, wordt HTML beknopt en goed leesbaar. Gebruik btn btn-primary voor een primaire knop of btn btn-outline voor een secundaire optie. U kunt nog steeds afzonderlijke utilityklassen toevoegen om specifieke eigenschappen te overschrijven — bijvoorbeeld w-full om een knop de volledige breedte te laten innemen — omdat utilities in de Tailwind-laaghiërarchie altijd voorrang hebben op componentklassen.
<!-- 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>Een componentklasse voor een kaart maken
Kaarten zijn containercomponenten die inhoudssecties omhullen. Een basisklasse .card verzorgt de visuele container, terwijl modifierklassen zoals .card-compact of .card-bordered variaties toevoegen. Dit patroon houdt de HTML overzichtelijk en maakt toch flexibele configuratie mogelijk: een ontwikkelaar voegt card toe voor de standaardweergave en optioneel een modifier voor een 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;
}
}Componentklassen voor badges
Badges zijn kleine, pilvormige labels die worden gebruikt voor statusindicatoren, aantallen en categorietags. Ze zijn uitstekende kandidaten voor componentklassen, omdat ze vaak voorkomen en altijd dezelfde pilvorm hebben. Definieer een basisklasse .badge en modifierklassen voor kleuren. Houd ze klein en doelgericht: badges mogen geen complexe interne structuur hebben.
@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>Componentklassen voor formulierinvoer
Formulierinvoervelden hebben veel gedeelde stijlen — rand, opvulling, afronding van de rand en focusring — die in elk tekstveld, tekstgebied en selectievak in een project terugkomen. Extraheer deze stijlen naar een klasse .form-input en modifierklassen voor verschillende toestanden. Dit is vooral nuttig in combinatie met de plugin @tailwindcss/forms, die eerst de standaardstijlen van browsers normaliseert.
@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;
}
}Componentklassen voor meldingen en toastberichten
Meldingen geven belangrijke feedback aan gebruikers en komen voor in meerdere semantische varianten: informatie, succes, waarschuwing en fout. Ze hebben allemaal dezelfde structuur, maar gebruiken verschillende kleuren. Definieer een basisklasse .alert voor de indeling en een reeks modifierklassen voor elk semantisch type. De basisklasse verzorgt de opvulling, de afronding van de rand en de uitlijning van pictogrammen, terwijl de modifiers het kleurthema bepalen.
@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>Klassen voor navigatielinks
Navigatielinks zijn nog een uitstekende kandidaat voor componentklassen, omdat ze altijd dezelfde basisweergave hebben met variaties voor de actieve toestand. Definieer een klasse .nav-link voor de standaardtoestand en een klasse .nav-link-active voor de gemarkeerde link naar de huidige pagina. Als u een JavaScript-framework gebruikt, past u de actieve klasse doorgaans programmatisch toe op basis van de huidige route.
@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>Componentklassen ordenen in bestanden
Naarmate het aantal componentklassen groeit, houdt u ze georganiseerd in speciale CSS-bestanden, gegroepeerd per categorie. Importeer ze allemaal in uw belangrijkste CSS-invoerbestand met @import of importeer meerdere bestanden via PostCSS. Een gebruikelijke structuur heeft afzonderlijke bestanden voor knoppen, formulieren, kaarten, badges, navigatie en typografie, allemaal binnen het bereik van @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';Componentklassen met formaatmodifiers
Veel componenten zijn beschikbaar in verschillende formaten: klein, middelgroot en groot. Definieer formaatmodifierklassen die de opvulling en lettergrootte van de basisklasse overschrijven. Omdat formaatmodifiers na de basisklasse in de CSS-bron worden toegepast (binnen dezelfde laag), overschrijven ze de basiswaarden correct zonder een hogere specificiteit of !important nodig te hebben.
@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>Componentklassen testen
Maak een eenvoudige visuele testpagina waarop elke variant van de componentklasse naast de andere wordt weergegeven. Dit dient als een levende stijlgids en vangt regressies op wanneer u de componentklassen aanpast. Neem elke variant voor formaat, kleur en toestand op. Deel deze pagina met ontwerpers om te controleren of de componentklassen overeenkomen met de beoogde specificatie van het ontwerpsysteem voordat u ze in productie gebruikt.
<!-- 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>Korte controle
Test uw begrip van het maken van herbruikbare componentklassen met de @apply-directive van Tailwind.
Samenvatting van de les
In deze les hebt u geleerd hoe u componentklassen met een basis en modifiers definieert met @apply binnen @layer components voor knoppen, kaarten en badges. Met formaatmodifiers kan één basisklasse meerdere formaatvarianten ondersteunen. Componentklassen moeten bovendien naarmate het project groeit worden georganiseerd in afzonderlijke bestanden per categorie. Hierna bekijken we het systeem @layer van Tailwind voor het ordenen van aangepaste CSS.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Herbruikbare componentclasses maken” gratis?
Ja — de volledige tekst van “Herbruikbare componentclasses maken” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Herbruikbare componentclasses maken”?
Gebruik @apply om .btn-, .card- en .badge-classes te bouwen in een globaal CSS-bestand en verminder duplicatie in HTML-templates. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Herbruikbare componentclasses maken”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Wat @apply doet en wanneer u het gebruikt
- Herbruikbare componentclasses maken
- Aangepaste CSS organiseren met layers
- Valkuilen en alternatieven voor @apply