Tailwind Theme Generator
Create a custom Tailwind theme by picking what looks good. No config file wrestling required.
Generate Your ThemeWhy Custom Tailwind Themes?
Stand Out
Default Tailwind colors are everywhere. A custom theme makes your project instantly recognizable.
Team Consistency
A shared theme config ensures everyone uses the same colors and spacing. No more "which blue is the right blue?"
Easy Updates
Need to rebrand? Update your theme tokens once, and your entire UI updates automatically.
Three Steps to Your Custom Theme
Pick Colors
Choose between curated color palettes. We show you complete themes—primary, secondary, accent, and semantic colors all together.
Pick Style
Typography, spacing, border radius, shadows. Binary choices that shape your entire design system in minutes.
Export Config
Download a production-ready tailwind.config.js plus CSS variables, TypeScript types, and AI skill files.
What You Get
A complete tailwind.config.js that extends your existing setup with custom design tokens.
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: 'var(--color-primary)',
foreground: 'var(--color-primary-foreground)',
},
secondary: {
DEFAULT: 'var(--color-secondary)',
foreground: 'var(--color-secondary-foreground)',
},
muted: {
DEFAULT: 'var(--color-muted)',
foreground: 'var(--color-muted-foreground)',
},
accent: {
DEFAULT: 'var(--color-accent)',
foreground: 'var(--color-accent-foreground)',
},
// ... 20+ more color tokens
},
borderRadius: {
sm: 'var(--radius-sm)',
md: 'var(--radius-md)',
lg: 'var(--radius-lg)',
},
fontFamily: {
sans: ['var(--font-family)', 'sans-serif'],
heading: ['var(--font-family-heading)', 'sans-serif'],
},
},
},
}Supporting Tailwind CSS
20% of every PickCSS purchase goes directly to support Tailwind CSS development. We believe in giving back to the ecosystem that makes our work possible.
Learn More About Our PledgeFrequently Asked Questions
How do I create a custom Tailwind theme?
With PickCSS, you create a custom Tailwind theme by making simple A-or-B choices. Pick between color palettes, typography options, and spacing scales. We generate a complete tailwind.config.js that extends your existing setup.
What's included in the generated Tailwind config?
The generated tailwind.config.js includes custom colors (primary, secondary, accent, muted, destructive), typography settings (font families, sizes, line heights), spacing scale, border radius tokens, and shadow definitions—all configured to work with your existing Tailwind setup.
Does this work with Tailwind CSS v4?
Yes. PickCSS generates CSS custom properties that work with both Tailwind v3 and v4. The CSS variables approach is forward-compatible with Tailwind's evolving architecture.
Can I use this with shadcn/ui?
Absolutely. PickCSS generates a globals.css file that's a drop-in replacement for shadcn/ui's default theme. Your generated tokens use the same CSS variable naming conventions shadcn expects.
Ready to Create Your Tailwind Theme?
Stop wrestling with config files. Start picking what looks good.