Tailwind Config CLI Generator

Using Tailwind outside a framework, straight from the CLI, is pleasant right up until you have to write the config. The init command leaves an empty skeleton and you still have to recall the shape of the content array and where brand colors actually go, theme or theme.extend. Getting that wrong quietly wipes out the default palette.

The block comes out finished, with nothing to configure, and it is already on screen when the page loads. It includes the JSDoc type comment, a content array pointing at ./src for html, js, ts, jsx, tsx and ejs files, a theme.extend.colors.brand with the 50, 500 and 900 shades, and an empty plugins array. Because it extends the theme instead of replacing it, every built-in Tailwind color still works.

Notice that content only covers ./src. An index.html sitting in the project root is left out, and its classes vanish from the compiled CSS with no warning at all, which is good for several minutes of confusion. Also, this is the Tailwind 3 format. Version 4 moved configuration into the stylesheet with @theme, and only reads a JS config when you point at it with @config. Runs in your browser.