Generate Tailwind CSS configuration files instantly. Customize themes, colors, fonts, breakpoints, plugins, and content paths. Export as JS, TS, or JSON.
Project Preset
Config Format
Content Paths
Enter glob patterns, one per line
Theme Customization
Enter color name and value pairs, one per line (e.g. primary: #3b82f6)
Enter font family stacks, one per line (e.g. sans: Inter, system-ui, sans-serif)
Options
Plugins
Generated Config
Your Tailwind config will appear here...
Install Dependencies
Run this command to install the required packages:
About Tailwind CSS Config Generator
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML. This generator creates ready-to-use tailwind.config.js files tailored to your project type and preferences, saving you time and reducing setup friction. All generation happens client-side — no data is sent to any server.
Features
6 project presets: React, Vue, Angular, Svelte, Laravel, Vanilla HTML
Export as tailwind.config.js, .ts, .mjs, or JSON
Custom content paths with project-specific defaults
Theme customization: colors, fonts, extend or override
Dark mode support: media query or class strategy
Optional CSS prefix and important selector
Popular official plugins: forms, typography, aspect-ratio, line-clamp, container queries