search

nuxt-modules / tailwindcss

Tailwind CSS module for Nuxt
https://tailwindcss.nuxtjs.org
MIT License
1.68k stars 183 forks source link

npx tailwindcss --postcss not working #914

Closed samuelreichor closed 3 days ago

samuelreichor commented 3 days ago

Hi, I'm not entirely sure if this qualifies as a bug or a feature request, so please feel free to adjust the label accordingly. 🙂

I need to run a tailwind CLI command that looks like this:

npx tailwindcss -c ./tailwind.config.js -i ./assets/css/cp.pcss -o ../web/dist/assets/cp.css --postcss

The purpose of this command is to compile all Tailwind styles into a static CSS file, which I can then use outside of the project. In my case, I need this file for a PHP CMS.

The issue arises with the --postcss flag in the tailwind CLI, as it requires a valid postcss configuration. It's generally recommended to avoid creating a standalone PostCSS file when working with Nuxt, which means I need two separate PostCSS configurations: one defined in the Nuxt config and another as a standalone file for the CLI that does nothing.

This setup feels a bit inconvenient. Is there a way to disable Nuxt’s PostCSS configuration temporarily and rely solely on the standalone PostCSS config file for this use case?

samuelreichor commented 3 days ago

Ideally, it would be great if the PostCSS config defined in the Nuxt config could work seamlessly here as well. However, I assume this is out of your control due to how Tailwind handles its own stuff.

ineshbose commented 3 days ago

Hey, thanks for opening an issue on this repository. I would be happy to help you in this scenario.

First, about the config, you could pass ./.nuxt/tailwind.config.cjs to the CLI instead of your own config as that may be more inline to your Nuxt project.

Is there a way to disable Nuxt’s PostCSS configuration

You could still share the PostCSS options between Nuxt and your CLI by having a postcss.config.js (and import it to nuxt.config).

You can see here how we handle the PostCSS options:

https://github.com/nuxt-modules/tailwindcss/blob/4a050097a359f61def5ce7ef782b42829a352b31/src/module.ts#L122-L133

Maybe we can provide you with an option to also override the tailwindcss value there (but its tricky as this is the main functionality of the module unless one explicitly overrides it) - what value would you be looking to pass that can help with your case? I think the above would help equally. Let me know what you think (closing but we can continue the thread).

samuelreichor commented 1 day ago

Hii @ineshbose thank you for your great help! This works for me :)