Tailwind Config GUI Generator
Visually generate your tailwind.config.js file.
- Home
- > Tailwind >
- Config GUI Generator
Custom Colors
Custom Fonts
Custom Spacing
Custom Screens
Plugins
Config will auto-update as you fill in the form.
Generated Config
tailwind.config.js
How to Use
- Fill in the form sections for custom colors, fonts, spacing, screens, and plugins.
- Click Add to include more entries in each section.
- Click Generate Config to preview the
tailwind.config.jsoutput. - Copy the generated config and paste it into your project.
Frequently Asked Questions
What format does the generated config use?
The output is a CommonJS module.exports format compatible with Tailwind CSS v3. For v4 ESM format, replace module.exports with export default.
How do I add shades of a color (e.g. 50–900)?
You can add each shade as a separate color entry with names like brand-50, brand-100, etc. Or define a color object directly in your config file for nested shades.
Can I add custom keyframes or animations?
This generator covers the most common config sections. For animations and keyframes, use the Tailwind Animation Generator tool.
