The new Tailwind Config Generator generates production-ready Tailwind CSS configuration files — without writing a single line of config by hand.
What it generates
- tailwind.config.js — CommonJS, works with every Vite/Webpack/Next.js setup
- tailwind.config.ts — TypeScript, with
satisfies Configfor full IntelliSense - CSS custom properties — a
:root { }block for CSS-variable theming
What you can configure
Custom colors — add any number of color pairs with a name and hex value. A colour picker and hex input stay in sync. Generates bg-brand, text-brand, border-brand etc.
Font families — name + CSS font stack. Generates font-sans, font-display, etc.
Custom breakpoints — add xs, 3xl, 4xl or any name with a pixel value. Warns if you forget the unit.
Dark mode strategy — class (toggle .dark on <html>), media (OS preference), or selector (v3.4+ custom selector).
Extend vs replace — extend keeps Tailwind’s default utilities; replace gives you full control.
Try it
Open the Tailwind Config Generator, set your brand colour, pick a dark mode strategy, and copy. Your config is ready in under a minute.
Related Posts
Frequently Asked Questions
Does it support Tailwind v3 and v4?
What is the CSS Variables output for?
Explore more on Tools.Town Blog
Finance guides, tool launches, and engineering stories — updated weekly.