Run any Skill in Manus with one click

Get Started

tailwind-expert

Stars38

Forks15

UpdatedMarch 14, 2026 at 18:18

Tailwind CSS v4 patterns for Next.js — configuration, utilities, theming, and dark mode

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Klimabevaegelsen

Klimabevaegelsen/landbruget.dk

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	tailwind-expert
description	Tailwind CSS v4 patterns for Next.js — configuration, utilities, theming, and dark mode

Tailwind CSS v4 Expert

Version: Tailwind CSS 4.x with @tailwindcss/postcss. This project uses tailwindcss@^4.

Key Changes from v3

v3	v4
`tailwindcss` in postcss	`@tailwindcss/postcss` plugin
`@tailwind base/components/utilities`	`@import "tailwindcss"`
`tailwind.config.ts`	CSS-first config via `@theme`
`theme.extend` in JS	`@theme { --color-brand: ... }` in CSS
`darkMode: 'class'` config	`@variant dark (...)` in CSS

PostCSS Config

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}
export default config

CSS Entry Point

/* app/globals.css */
@import "tailwindcss";

/* Custom theme tokens */
@theme {
  --color-brand: oklch(0.55 0.2 145);
  --color-brand-foreground: oklch(0.98 0 0);
  --font-sans: 'Inter', sans-serif;
  --radius: 0.5rem;
}

Utility Patterns

// Responsive
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" />

// Dark mode (automatic via prefers-color-scheme, or class-based)
<div className="bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50" />

// Group hover
<div className="group">
  <span className="opacity-0 group-hover:opacity-100 transition-opacity" />
</div>

// Arbitrary values
<div className="w-[372px] top-[117px]" />

// CSS variable utilities
<div className="text-[var(--color-brand)]" />

Theming with shadcn/ui (CSS variables)

/* globals.css */
@import "tailwindcss";

@theme {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
}

@media (prefers-color-scheme: dark) {
  @theme {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
  }
}

Common Utility Classes

Layout:     flex items-center justify-between gap-4
            grid grid-cols-12 col-span-4
            container mx-auto px-4

Spacing:    p-4 px-6 py-3 m-0 mt-8 space-y-4 gap-6

Typography: text-sm text-base text-lg text-xl text-2xl
            font-medium font-semibold font-bold
            text-muted-foreground leading-relaxed tracking-tight

Borders:    border border-border rounded-lg rounded-full
            ring-1 ring-border ring-offset-2

Shadows:    shadow-sm shadow shadow-lg shadow-xl

Sizing:     w-full h-full max-w-screen-lg min-h-screen
            w-10 h-10 size-4 (shorthand for w-4 h-4)

Interactivity: hover:bg-accent focus-visible:ring-2
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors duration-200 ease-in-out
               cursor-pointer select-none

Overflow:   overflow-hidden truncate line-clamp-2 whitespace-nowrap

Rules

Use @import "tailwindcss" not the old three-line directive
Configure via @theme {} in CSS, not tailwind.config.ts
Use postcss.config.mjs with "@tailwindcss/postcss" (not tailwindcss)
size-{n} is the v4 shorthand for w-{n} h-{n}
oklch() color space is preferred for theme tokens (perceptually uniform)
Arbitrary values with [] when you need exact pixel values

More from this repository

same repository

data-pipeline-operations

Klimabevaegelsen/landbruget.dk

Activates when working with Python data pipelines, GCS operations, or medallion architecture (Bronze/Silver/Gold). Use this skill for: running pipelines, debugging data transformations, GCS uploads/downloads, data quality validation, CVR/CHR/BFE identifier handling, GeoPandas/PostGIS operations, and DuckDB queries for large files. Keywords: pipeline, bronze, silver, gold, GCS, parquet, CVR, CHR, BFE, transform, ingest, ETL, DuckDB, large files

2026-04-1238

r2-husdyr-data

Klimabevaegelsen/landbruget.dk

Activates when querying livestock and animal data from R2. Use this skill for: CHR registry, pig movements, animal welfare, antibiotics, animal density, mortality rates, herd tracking, svineflytning. Keywords: husdyr, livestock, animal, dyr, CHR, svin, pig, ko, cattle, antibiotika, dyrevelfærd, flytning, movement

2026-04-0638

r2-landbrugsareal-data

Klimabevaegelsen/landbruget.dk

Activates when querying agricultural land and field data from R2. Use this skill for: field boundaries, crop data, land use, organic farming, production estimates, cadastral data, agricultural blocks, building data. Keywords: landbrugsareal, field, mark, marker, crop, afgrøde, organic, økologisk, production, areal, cadastral, matrikel

2026-04-0638

r2-medarbejdere-data

Klimabevaegelsen/landbruget.dk

Activates when querying employee and workplace safety data from R2. Use this skill for: Arbejdstilsynet inspections, work permits, safety violations, workplace accidents, compliance rates, foreign workers, incident tracking. Keywords: medarbejdere, employees, worker, arbejdstilsynet, inspection, tilsyn, safety, arbejdsmiljø, accident, ulykke, compliance

2026-04-0638

r2-miljo-data

Klimabevaegelsen/landbruget.dk

Activates when querying environmental data from R2. Use this skill for: pesticides, nitrogen leaching, BNBO drinking water protection, wetlands, soil types, environmental compliance, biodiversity. Keywords: miljø, environment, pesticide, pesticid, nitrogen, kvælstof, BNBO, wetlands, vådomr, soil, jord, biodiversity

2026-04-0638

r2-okonomi-data

Klimabevaegelsen/landbruget.dk

Activates when querying financial/economic data from R2. Use this skill for: subsidies, farm financials, property values, CVR enrichment, ownership data, støtte per hektar, samlet støtte, grundværdi. Keywords: økonomi, finance, subsidies, støtte, tilskud, CVR, property, ejendom, grundværdi

2026-04-0638

Tailwind CSS v4 Expert

Version: Tailwind CSS 4.x with @tailwindcss/postcss. This project uses tailwindcss@^4.

Key Changes from v3

tailwindcss in postcss

@tailwindcss/postcss plugin

@tailwind base/components/utilities

@import "tailwindcss"

tailwind.config.ts

CSS-first config via @theme

theme.extend in JS

@theme { --color-brand: ... } in CSS

darkMode: 'class' config

@variant dark (...) in CSS

PostCSS Config

// postcss.config.mjs const config = { plugins: { "@tailwindcss/postcss": {}, }, } export default config

CSS Entry Point

/* app/globals.css */ @import "tailwindcss"; /* Custom theme tokens */ @theme { --color-brand: oklch(0.55 0.2 145); --color-brand-foreground: oklch(0.98 0 0); --font-sans: 'Inter', sans-serif; --radius: 0.5rem; }

Utility Patterns

// Responsive <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" /> // Dark mode (automatic via prefers-color-scheme, or class-based) <div className="bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50" /> // Group hover <div className="group"> <span className="opacity-0 group-hover:opacity-100 transition-opacity" /> </div> // Arbitrary values <div className="w-[372px] top-[117px]" /> // CSS variable utilities <div className="text-[var(--color-brand)]" />

Theming with shadcn/ui (CSS variables)

/* globals.css */ @import "tailwindcss"; @theme { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --border: oklch(0.922 0 0); --radius: 0.625rem; } @media (prefers-color-scheme: dark) { @theme { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); } }

Common Utility Classes

Layout: flex items-center justify-between gap-4 grid grid-cols-12 col-span-4 container mx-auto px-4 Spacing: p-4 px-6 py-3 m-0 mt-8 space-y-4 gap-6 Typography: text-sm text-base text-lg text-xl text-2xl font-medium font-semibold font-bold text-muted-foreground leading-relaxed tracking-tight Borders: border border-border rounded-lg rounded-full ring-1 ring-border ring-offset-2 Shadows: shadow-sm shadow shadow-lg shadow-xl Sizing: w-full h-full max-w-screen-lg min-h-screen w-10 h-10 size-4 (shorthand for w-4 h-4) Interactivity: hover:bg-accent focus-visible:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 ease-in-out cursor-pointer select-none Overflow: overflow-hidden truncate line-clamp-2 whitespace-nowrap

Rules

Use @import "tailwindcss" not the old three-line directive

Configure via @theme {} in CSS, not tailwind.config.ts

Use postcss.config.mjs with "@tailwindcss/postcss" (not tailwindcss)

size-{n} is the v4 shorthand for w-{n} h-{n}

oklch() color space is preferred for theme tokens (perceptually uniform)

Arbitrary values with [] when you need exact pixel values