Tailwind CSS Academy · Les

CSS Modules en Tailwind

Gebruik Tailwind-utilities in CSS Modules om gescopeerde componentstijlen te combineren met de utility-first-aanpak in React- en Next.js-apps.

Les 3 van 413 stappen

CSS Modules en Tailwind is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 3 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.

Wat zijn CSS Modules

CSS Modules zijn CSS-bestanden waarin klassen standaard lokaal binnen een bereik vallen. Wanneer je een CSS Module in een JavaScript-component importeert, worden de klassen omgezet in unieke identificatiegegevens zoals Button_root__Xk2p1, zodat stijlen niet tussen componenten kunnen lekken. CSS Modules zijn ingebouwd in Next.js en via webpack of Vite beschikbaar in de meeste React-configuraties.

/* Button.module.css */
.root {
  display: flex;
  align-items: center;
}

// Button.tsx
import styles from './Button.module.css';

const Button = () => (
  // styles.root resolves to 'Button_root__Xk2p1' at runtime
  <button className={styles.root}>Click me</button>
);

Waarom CSS Modules combineren met Tailwind

Tailwind en CSS Modules lijken filosofisch tegenover elkaar te staan — Tailwind vermijdt het benoemen van dingen, terwijl CSS Modules juist draait om het lokaal benoemen ervan. In de praktijk vullen ze elkaar echter aan. CSS Modules verwerken complexe selectors, :focus-within-ketens en stijlen voor pseudo-elementen die Tailwind niet eenvoudig kan uitdrukken. Tailwind verwerkt het grootste deel van de visuele opmaak. Samen dekken ze 100% van de opmaakbehoeften.

@apply gebruiken in CSS Modules

Het meest gebruikelijke patroon om beide te combineren is @apply gebruiken in een CSS Module-bestand. Je definieert een lokaal begrensde klasse in het bestand .module.css en stelt die samen uit hulpprogramma's van Tailwind met @apply. Zo profiteer je van het lokale bereik van CSS Modules, terwijl je de opmaak blijft uitdrukken in de woordenschat van Tailwind.

/* Card.module.css */
.card {
  @apply rounded-xl bg-white p-6 shadow-sm;
}

.cardHeader {
  @apply border-b border-gray-100 pb-4 text-lg font-semibold text-gray-900;
}

.cardBody {
  @apply pt-4 text-sm text-gray-600 leading-relaxed;
}

Moduleklassen importeren en gebruiken

Importeer de CSS Module in de React-component en verwijs via het geïmporteerde object naar de lokale klassen. Combineer moduleklassen met globale hulpprogramma's van Tailwind in de prop className met behulp van tekenreeksinterpolatie of clsx. Moduleklassen verwerken de structuur, terwijl de hulpprogramma's van Tailwind rechtstreeks in JSX zorgen voor aanpassingen voor verschillende schermformaten of toestanden.

import styles from './Card.module.css';
import { clsx } from 'clsx';

interface CardProps {
  highlighted?: boolean;
  children: React.ReactNode;
}

export function Card({ highlighted, children }: CardProps) {
  return (
    <div
      className={clsx(
        styles.card,
        // Tailwind utilities alongside module classes
        highlighted && 'ring-2 ring-blue-500',
        'transition hover:shadow-md'
      )}
    >
      {children}
    </div>
  );
}

CSS Modules voor complexe selectors

Gebruik CSS Modules specifiek wanneer Tailwind een selector niet kan uitdrukken. Bijvoorbeeld om een onderliggend element op basis van de toestand van het bovenliggende element op te maken met een complexe selector, of om de pseudo-elementen ::before en ::after te gebruiken voor decoratieve inhoud die niet met ring- of schaduwhulpprogramma's kan worden gemaakt. Het bestand .module.css is de juiste plek voor deze uitzonderingen.

/* Dropdown.module.css */
/* Tailwind cannot easily target this nested state */
.trigger:focus-within .menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Decorative pseudo-element */
.triangle::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
  border-bottom-color: white;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

Moduleklassen samenstellen

CSS Modules ondersteunen het sleutelwoord composes om stijlen over te nemen van een andere klasse in hetzelfde bestand of in een ander modulebestand. Dit is de ingebouwde manier van CSS Modules om stijlen te hergebruiken. Met @apply voeg je hulpprogramma's van Tailwind toe, met composes voeg je andere moduleklassen toe — je kunt beide in hetzelfde bestand combineren voor maximale flexibiliteit.

/* base.module.css */
.baseButton {
  @apply inline-flex items-center rounded-lg px-4 py-2 font-semibold
         transition focus:outline-none focus:ring-2 focus:ring-offset-2;
}

/* Button.module.css */
.primary {
  composes: baseButton from './base.module.css';
  @apply bg-blue-600 text-white focus:ring-blue-500 hover:bg-blue-700;
}

.secondary {
  composes: baseButton from './base.module.css';
  @apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-400;
}

CSS Modules in Next.js

Next.js ondersteunt CSS Modules direct, zonder configuratie — elk bestand dat eindigt op .module.css krijgt automatisch een lokaal bereik. De PostCSS-pijplijn die Tailwind verwerkt, verwerkt ook CSS Modules. Daardoor werkt @apply zonder extra configuratie in modulebestanden. Dit maakt Next.js de ideale omgeving voor de combinatie van Tailwind en CSS Modules.

// next.config.js — no extra config needed
// CSS Modules and Tailwind work automatically

// Any .module.css file is locally scoped:
// components/Hero/Hero.module.css  ← scoped
// styles/globals.css               ← global (Tailwind entry)

// Verify your postcss.config.js has tailwindcss:
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Wanneer je CSS Modules NIET gebruikt

CSS Modules voegen per component een bestand en een extra abstractielaag toe, wat voor de meeste Tailwind-componenten overdreven is. Vermijd ze bij eenvoudige componenten waarvan alle opmaak probleemloos met hulpprogramma's in className past. Bewaar CSS Modules voor componenten met werkelijk complexe CSS die verder gaat dan wat hulpprogrammaklassen kunnen uitdrukken — in een typisch Tailwind-project gaat het meestal om minder dan 10% van de componenten.

// DON'T: CSS Module for a simple button — overkill
/* Button.module.css */
/* .btn { @apply px-4 py-2 rounded bg-blue-600 text-white; } */

// DO: Just use classes directly — much simpler
const Button = ({ children }) => (
  <button className="rounded bg-blue-600 px-4 py-2 font-semibold text-white
                     transition hover:bg-blue-700">
    {children}
  </button>
);

Globale en lokale CSS in Next.js

In Next.js kunnen alleen globale stijlbladen (globals.css) worden geïmporteerd in _app.js of layout.tsx. CSS Modules worden alleen geïmporteerd in de component die ze gebruikt. Deze beperking is bewust — ze voorkomt dat stijlen per ongeluk naar het globale bereik lekken. De globale instructies van Tailwind staan altijd in globals.css; modulebestanden bevatten alleen regels die tot een component behoren.

// app/layout.tsx — import globals (Tailwind entry) here
import '../styles/globals.css';     // ✅ global CSS
// import './Card.module.css';      // ❌ Error: CSS Modules not allowed here

// components/Card.tsx — import module CSS here
import styles from './Card.module.css'; // ✅ scoped to this file

export function Card() {
  return <div className={styles.card}>...</div>;
}

Namen van CSS Module-klassen opsporen

In de ontwikkelmodus bevatten namen van CSS Module-klassen de bestandsnaam en de oorspronkelijke klassenaam, zodat ze leesbaar blijven: Card_root__Xk2p1. In productie worden ze ingekort tot ondoorzichtige hashes om ruimte te besparen. Als een moduleklasse niet wordt toegepast, inspecteer je het element in de browserontwikkelaarstools om de gegenereerde klassenaam te bekijken en te controleren of die in de klassenlijst van het element staat. Controleer op typefouten bij de eigenschapstoegang: styles.cardHeader en niet styles.card-header (camelCase is vereist).

/* Card.module.css */
.card-header { /* ← hyphenated CSS class */ }

// Card.tsx
import styles from './Card.module.css';

// Accessing hyphenated classes requires bracket notation:
const el = <div className={styles['card-header']}>...</div>;

// Better: use camelCase in the module file:
/* .cardHeader { } */
const el2 = <div className={styles.cardHeader}>...</div>;

TypeScript-ondersteuning voor CSS Modules

TypeScript kent standaard de vorm van CSS Module-imports niet. Daardoor wordt styles.anyClass bij typecontrole als any behandeld. Installeer typescript-plugin-css-modules of gebruik typed-css-modules om voor elk modulebestand .d.ts-typedefinities te genereren. Zo krijg je automatisch aanvullen voor klassenamen in je editor en worden typefouten tijdens het compileren gevonden.

npm install -D typescript-plugin-css-modules

// tsconfig.json
{
  "compilerOptions": {
    "plugins": [
      { "name": "typescript-plugin-css-modules" }
    ]
  }
}

// Now styles.cardHeader shows autocomplete in VS Code
// and TypeScript warns if you access a class that does not exist

Korte controle

Test je begrip van de concepten uit deze les over Tailwind CSS Mastery.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd hoe je @apply in CSS Modules gebruikt om klassen met een lokaal bereik te combineren met hulpprogramma's van Tailwind, wanneer je CSS Modules gebruikt in plaats van in className te blijven (bij complexe selectors en pseudo-elementen), en hoe je TypeScript-ondersteuning inzet voor typeveilige toegang tot CSS Module-klassen. Hierna bekijken we hoe je Tailwind in monorepo's opschaalt.

Gratis beginnen

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

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “CSS Modules en Tailwind” gratis?

Ja — de volledige tekst van “CSS Modules en Tailwind” 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 “CSS Modules en Tailwind”?

Gebruik Tailwind-utilities in CSS Modules om gescopeerde componentstijlen te combineren met de utility-first-aanpak in React- en Next.js-apps. 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 3 van 4.

Hoe lang duurt de les “CSS Modules en Tailwind”?

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

← Terug naar Tailwind CSS Academy