Tailwind CSS Academy · Lektion

CSS Modules och Tailwind

Använd Tailwind-verktyg i CSS Modules för att kombinera avgränsade komponentstilar med det utility-first-baserade arbetssättet i React- och Next.js-appar.

Lektion 3 av 413 steg

CSS Modules och Tailwind är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 3 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.

Vad är CSS Modules

CSS Modules är CSS-filer där klassnamn som standard har lokalt omfång. När Ni importerar en CSS Module i en JavaScript-komponent omvandlas klassnamnen till unika identifierare som Button_root__Xk2p1, vilket förhindrar att stilar läcker mellan komponenter. CSS Modules ingår i Next.js och finns tillgängligt i de flesta React-konfigurationer via webpack eller Vite.

/* 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>
);

Varför kombinera CSS Modules med Tailwind

Tailwind och CSS Modules kan verka stå i filosofisk motsats till varandra – Tailwind undviker att namnge saker, medan CSS Modules helt bygger på lokal namngivning. I praktiken kompletterar de dock varandra. CSS Modules hanterar komplexa selektorer, kedjor med :focus-within och stil för pseudoelement som Tailwind inte enkelt kan uttrycka. Tailwind hanterar merparten av den visuella utformningen. Tillsammans täcker de alla stilbehov.

Använda @apply i CSS Modules

Det vanligaste sättet att kombinera de två är att använda @apply i en CSS Module-fil. Ni definierar en lokalt avgränsad klass i filen .module.css och bygger ihop den av Tailwinds verktygsklasser med @apply. På så sätt får Ni CSS Modules fördelar med lokalt omfång, samtidigt som utformningen uttrycks med Tailwinds vokabulär.

/* 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;
}

Importera och använda modulklasser

Importera CSS-modulen i React-komponenten och referera till de lokala klassnamnen via det importerade objektet. Kombinera modulklassnamn med globala Tailwind-verktygsklasser i egenskapen className med hjälp av stränginterpolation eller clsx. Modulklasser hanterar strukturen, medan Tailwinds verktygsklasser hanterar responsiva åsidosättningar eller åsidosättningar för specifika tillstånd direkt i JSX.

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 för komplexa selektorer

Använd CSS Modules specifikt när Tailwind inte kan uttrycka en selektor. Det kan till exempel handla om att utforma ett underordnat element utifrån ett överordnat elements tillstånd med en komplex selektor, eller att använda pseudoelementen ::before och ::after för dekorativt innehåll som inte kan skapas med verktygsklasser för ringar eller skuggor. Filen .module.css är rätt plats för dessa undantag.

/* 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%);
}

Sätta samman modulklasser

CSS Modules stöder nyckelordet composes för att ärva stilar från en annan klass i samma fil eller i en annan modulfil. Detta är CSS Modules inbyggda sätt att återanvända stilar. Medan @apply hämtar in Tailwinds verktygsklasser hämtar composes in andra modulklasser – Ni kan kombinera båda i samma fil för maximal flexibilitet.

/* 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 i Next.js

Next.js stöder CSS Modules direkt utan någon konfiguration – alla filer som slutar på .module.css får automatiskt ett lokalt omfång. Den PostCSS-pipeline som bearbetar Tailwind bearbetar även CSS Modules, så @apply fungerar i modulfilen utan ytterligare konfiguration. Det gör Next.js till en idealisk miljö för kombinationen Tailwind och 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: {},
  },
};

När CSS Modules INTE ska användas

CSS Modules innebär en fil per komponent och ett lager av indirektion som är överdrivet för de flesta Tailwind-komponenter. Undvik dem för enkla komponenter där all utformning utan problem ryms i className med verktygsklasser. Använd CSS Modules för komponenter med verkligt komplex CSS som överstiger vad verktygsklasser kan uttrycka – i ett typiskt Tailwind-projekt gäller det vanligtvis färre än 10 procent av komponenterna.

// 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>
);

Global kontra lokal CSS i Next.js

I Next.js kan endast globala stilmallar (globals.css) importeras i _app.js eller layout.tsx. CSS Modules importeras endast i den komponent som använder dem. Denna begränsning är avsiktlig – den förhindrar att stilar oavsiktligt läcker ut globalt. Tailwinds globala direktiv finns alltid i globals.css; modulfiler innehåller endast komponentavgränsade regler.

// 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>;
}

Felsöka CSS Modules klassnamn

I utvecklingsläge innehåller CSS Modules klassnamn filnamnet och det ursprungliga klassnamnet för att underlätta läsning: Card_root__Xk2p1. I produktion förkortas de till ogenomskinliga hashvärden för att minska storleken. Om en modulklass inte tillämpas kan Ni granska elementet i webbläsarens DevTools för att se det genererade klassnamnet och bekräfta att det finns i elementets klasslista. Kontrollera om egenskapsreferensen innehåller stavfel: styles.cardHeader, inte styles.card-header (camelCase krävs).

/* 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-stöd för CSS Modules

TypeScript känner som standard inte till strukturen hos importerade CSS Modules, vilket gör att styles.anyClass typkontrolleras som any. Installera typescript-plugin-css-modules eller använd typed-css-modules för att generera typdeklarationer i .d.ts för varje modulfil. Då får Ni autokomplettering för klassnamn i editorn och stavfel upptäcks vid kompilering.

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

Snabbtest

Testa Er förståelse av koncepten i Tailwind CSS Mastery från den här lektionen.

Besvara frågan i den interaktiva lektionen

Lektionens sammanfattning

I den här lektionen har Ni lärt Er att använda @apply i CSS Modules för att kombinera lokalt avgränsade klassnamn med Tailwinds verktygsklasser, veta när CSS Modules bör användas i stället för att stanna i className (komplexa selektorer och pseudoelement), samt använda TypeScript-stöd för typsäker åtkomst till CSS Module-klasser. Nästa steg är att utforska hur Tailwind skalas i monorepon.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”CSS Modules och Tailwind” gratis?

Ja – hela texten till ”CSS Modules och Tailwind” 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 ”CSS Modules och Tailwind”?

Använd Tailwind-verktyg i CSS Modules för att kombinera avgränsade komponentstilar med det utility-first-baserade arbetssättet i React- och Next.js-appar. 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 3 av 4.

Hur lång tid tar lektionen ”CSS Modules och Tailwind”?

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

← Tillbaka till Tailwind CSS Academy