Theme variables - Core concepts - Tailwind CSS

Using utility classes as an API for your design tokens.

Theme variables - Core concepts - Tailwind CSS v 4.3 ⌘K Ctrl K Docs Blog Showcase Partners Plus Core concepts Theme variables Core concepts Theme variables Using utility classes as an API for your design tokens. Overview Tailwind is a framework for building custom designs, and different designs need different typography, colors, shadows, breakpoints, and more. These low-level design decisions are often called design tokens , and in Tailwind projects you store those values in theme variables . What are theme variables? Theme variables are special CSS variables defined using the @theme directive

related reading

• Tailwind CSS Colors - All colors + Custom color generatoruicolors.app
• DESIGN.md Generator — Design System for AI Agents | design.devdesign.dev
• DESIGN.md Examples for AI Agents | Refero Stylesstyles.refero.design
• ui.sh — Agent skills for interface buildersui.sh
• Geistvercel.com
• Impeccable: The missing upgrade to Anthropic's impeccable skillimpeccable.style
• Subframe – The AI design tool built for codesubframe.com
• GitHub - dominikmartn/nothing-design-skill: A Claude Code skill for generating UI in the Nothing design language. Monochrome, typographic, industrial.github.com
• daisyUI and Tailwind CSS theme generatordaisyui.com
• Realtime Colorsrealtimecolors.com
• Wonder — What you see is what you shipwonder.design
• UI Skills for Design Engineers | UI Skillsui-skills.com