Build your Tailwind config visually
Visual configuration builder for Tailwind CSS. Generate custom colors, spacing, fonts, and breakpoints with live preview.
Processed Locally • Your Data Stays Private
Custom Colors
primary
50
100
200
300
400
500
600
700
800
900
950
secondary
50
100
200
300
400
500
600
700
800
900
950
Generated Config
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#f1f1fe',
100: '#e3e3fc',
200: '#bdbff9',
300: '#9395f5',
400: '#6063f1',
500: '#1519ea',
600: '#1215c5',
700: '#0e119f',
800: '#0b0d75',
900: '#070950',
950: '#04052f'
},
secondary: {
50: '#f5f1fe',
100: '#eae2fd',
200: '#cfbbfb',
300: '#b090f9',
400: '#8a5bf6',
500: '#530df2',
600: '#460bcb',
700: '#3809a4',
800: '#2a0779',
900: '#1c0552',
950: '#110330'
}
},
fontFamily: {
sans: [
'Inter',
'system-ui',
'sans-serif'
]
},
screens: {
xs: '475px'
}
}
}
}