TypeScript configuration file support

[innocenzi]

Hey,

It's common in the front-end ecosystem, and especially around Vite, to have TypeScript configuration files. It has a few advantages:

• We get type autocompletion by default
• We can use ESM syntax
• It's consistent with other configuration files

I would love for Tailwind to have support for it. It could be implemented fairly easily, I think, thanks to esbuild, a project which I'm sure you're familiar with.

Here is what the Vite implementation looks like: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/config.ts#L975
Here is a library that makes the process easier (though I don't think it's adapted for Tailwind, I do think it's a good source to learn): https://github.com/egoist/bundle-require

I would like to try PRing this feature to Tailwind, but before I try to work on it, I'd like approval from the team that it would be welcome.

EDIT - I could have searched before dropping the Discussion, I just looked at the issues before. That said I didn't see an answer, so this still stands!

[adamwathan]

Hey! Starting to look at this today a bit — do you know if any tools support postcss.config.ts files? If Vite supports it can you help me out with a sample project that has that configured properly? Played with it for a minute but keep running into errors about needing to add more and more configuration to get things working.

I feel like if you can't use TypeScript for your PostCSS config it doesn't feel like a huge win to be able to use it for the Tailwind config since you're still stuck with JS for the PostCSS config.

Would adding proper types for the config file and a comment at the top of the generated file like this get us 95% of the benefit?

// tailwind.config.js

/** @type {import('tailwindcss').TailwindConfig} */
module.exports = {
  // ...
}

I've been playing with Next.js as well and it doesn't seem like there's any way to even use a postcss.config.js file when using it in ESM mode, and while they support TypeScript they don't support it for the next.config.js file. Feels like a bit of an uphill battle to get this all working in a way that has any pay off because of the rest of the ecosystem.

What do you think?

[Fumler]

Just to add my two cents here @adamwathan in the hopes it might help sway opinion.

I feel like if you can't use TypeScript for your PostCSS config it doesn't feel like a huge win to be able to use it for the Tailwind config since you're still stuck with JS for the PostCSS config.
Being able to use TypeScript (or even ESM) in a Tailwind config would have huge benefits for my team and I and I would imagine this goes for many other people as well.

Our particular use case is that we have our design system tokens defined in TypeScript, and we would like to import this into our Tailwind config. Since our monorepo consists of mostly Vite-based React SPAs, but also a few Next.js projects the solution we went for is to keep the actual design system tokens in CommonJS files (ie they use require instead of import and module.exports instead of export) and this works fine with Next.js since webpack can handle this for us, but in the Vite side of things getting CommonJS to work together with TypeScript is a real PITA, so the best solution for us right now would be to have a separate build step just to transpile our Tailwind config to CommonJS, which adds another layer of complexity for how we build and develop the individual projects.

So merging something like #3544 or #7327 would help us by a large amount.