Why Isn't tailwindcss v4 a devdependency like v3?

[radiorambo]

The default installation command mentioned in the alpha release blog is npm install tailwindcss@next @tailwindcss/vite@next which when installed, getting installed as a dependency rather than devdependency. But tailwindcss compiles to css when npm run build then why not install as devdependency?

[adamwathan]

You can install it as a dev dependency if you want, doesn’t really matter. I’ve generally made things dependencies if they are required to produce the build and dev dependencies if they aren’t (like prettier, eslint, etc.) but it doesn’t really matter since everything is bundled anyways. In Vite it might actually be better for it to be a dev dependency so it doesn’t think it needs to actually serve the source files through the Vite dev server, that used to matter but not sure anymore.

[jsingerlenovo]

@adamwathan I was confused by this as well. I'm still learning so please correct me if I'm wrong, but my understanding is:

• dependencies = runtime dependencies needed to run the production app
• devDependencies = anything needed for building/developing/deploying the app

From https://docs.npmjs.com/cli/v11/configuring-npm/package-json#dependencies

Please do not put test harnesses or transpilers or other "development" time tools in your dependencies object.

From https://docs.npmjs.com/cli/v11/configuring-npm/package-json#devdependencies

For build steps ... make the required package a devDependency.

And just in general, libraries like typescript, for example, are required to build the app, but they are put in the devDependencies. Is there anything in tailwindcss or @tailwindcss/vite that would be needed while the app is running? If not, it seems like we should recommend:

npm install -D tailwindcss @tailwindcss/vite

Thoughts? Again, if I misunderstood, please point me in the right direction, thanks!

[adamwathan]

Technically nothing is required at run-time because we all use bundlers that produce a separate JS artifact right? So if you're using webpack or Vite/Rollup or something literally nothing should be a dependency which feels even more wrong to me.

[rozsazoltan]

https://vite.dev/guide/dep-pre-bundling.html#automatic-dependency-discovery

[jsingerlenovo]

@adamwathan Interesting point. You may be right at a technical level but that feels like an implementation detail of the build.

From a conceptual level, it seems like the dependencies would be libraries that we make function calls on from our code (or some other runtime dependency), which then runs the library's code during runtime.

It doesn't matter that the library's code is bundled because even inside the bundle, it still gets called from our code and is required for our code to function properly at runtime.

On the other hand, a transpiler is required during a build step and its output is used during runtime, but the transpiler itself is never called during runtime. Wouldn't Tailwind be similar?

[Deanfei]

Totally agree. It should be in dev dependency as that's the purpose of the "devDependency".