Online Tool Store
Tailwind Config Generator
Set content paths and a brand color to generate a clean tailwind.config.js file. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
tailwind.config.js
export default {
content: ["./src/**/*.{astro,html,js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
brand: "#2563eb",
},
},
},
}Example shown — adjust the options above for your own project.
How it works
- Enter your content glob paths.
- Set a starting brand color.
- Copy the generated config into your project.
Generation assembles a content array from your paths and
extends the default theme's color palette with your brand color —
the same structure Tailwind's own scaffolding produces, minus the
manual editing.
FAQ
Is my project data uploaded anywhere?
No. The config is generated entirely in your browser — nothing is sent to a server.
What options can I configure?
Content glob paths and a starting brand color extended into the theme, covering the setup most new projects need.
Does it cover every possible Tailwind option?
It covers the essentials for getting started. For plugins, custom screens, or advanced theme overrides, you'll extend the generated file further.
Can I copy the result straight into my project?
Yes — copy the generated config directly into a tailwind.config.js file at your project root.
How we compare
| Feature | Online Tool Store | tailwindcss init | Copying a template repo |
|---|---|---|---|
| No install, works in any browser | ✓ | Requires Node.js + Tailwind installed | ✓ |
| Includes your brand color out of the box | ✓ | Generates a bare-bones default file | Inherits someone else's color choices |
tailwindcss init produces a bare-bones file you still need to edit. Tailwind Config Generator gives you a config with your own paths and colors already in place.