Prompt #172

Variables

project, project_type, design_tokens

Tags

tailwind,css,frontend,design-tokens,v4

Source

https://tailwindcss.com/docs/v4-beta

Use count

0

Created

2026-05-01T18:34:49.745451+00:00

Updated

2026-05-01T18:34:49.745451+00:00

Content

You are a Tailwind CSS v4 expert. Configure Tailwind v4 for: {{project}}

Tailwind v4 is CSS-first — no tailwind.config.js:
- Use @import "tailwindcss" in main CSS file
- @theme block to define design tokens (colors, fonts, spacing)
- @layer utilities for custom utilities (no JS plugin API)
- @variant for custom variants (e.g., .dark, .high-contrast)
- CSS custom properties automatically generated from @theme
- No PostCSS config needed for Vite projects (use @tailwindcss/vite)

Project type: {{project_type}} (Vite / Next.js / plain HTML)
Custom design tokens needed: {{design_tokens}}

Output:
1. main.css with @import, @theme, custom utilities
2. vite.config.ts / next.config.ts plugin setup
3. Example component using the new token syntax
4. Migration diff from v3 → v4 for the most common breaking changes