Nx: Question: how to use Tailwinds CSS with Nx?

[mcblum]

Thanks for all of your work on Nx. I'm trying to incorporate Tailwinds into our Nx monorepo. There are a lot of instructions out there that would work great if the project was a single project, but I don't understand enough about how apps are actually built / assembled when within a workspace.

Could anyone provide a bit of guidance as to how I can modify the webpack config of each app individually? Or is there a better way to do this?

[vsavkin]

Nx is a CLI project. So the only modification allowed are the ones allowed by the CLI. I'd read through the CLI docs to see what options are available

What do you need to modify to make it work?

[mcblum]

@vsavkin you're on top of these issues today :)

Looks like the most common way is to eject the project. Does that cause any issues? Here's an SO issue that goes over the basics.

https://stackoverflow.com/questions/47381149/angular-4-tailwindcss-setup

I think a lot of my lack of understanding of how this works comes from not being able to visualize how to set different config options for the different apps within the Nx Workspace.

[vsavkin]

In CLI 1.x you have to inject to be able to change the webpack configuration of any of your apps. Nx uses CLI 1.x.

Does that cause any issues?

After ejecting ng generate will continue to work, but ng build, ng test, and ng serve won't. The npm scripts will be rewritten to invoke webpack directly.

We are currently working on making Nx run on top of CLI 6, which allows you to customize your build step. Once it's released, you won't have to eject to be able to incorporate Tailwinds.

[vdiaz1130]

Has anyone been successful in implementing Tailwind with NX Angular project? Can anyone direct me to steps, suggestions or sample repo?
Thanks!

[vdiaz1130]

I was able to get it to work following the instructions here:
https://github.com/tehpsalmist/ng-tailwindcss

[dsebastien]

For those interested, I’ve written an article explaining how to integrate Tailwind with Nx, Angular and Storybook over here: https://medium.com/@dSebastien/adding-tailwind-support-to-a-nrwl-nx-workspace-with-angular-and-storybook-bf890ea882e

[derHodrig]

@dsebastien i followed your guide and end up with true

true is not a PostCSS plugin

I followed your guide right before the point Adding Tailwind support to Nx’s Storybook build.
Hm are there any breaking changes?

---

Update

I found this https://github.com/vercel/next.js/issues/17236 and yes there are breaking changes.
So you got two choices:

1. Stay with [email protected]
   or
2. Update PostCss

"peerDependencies": {
        "postcss": "^8.0.0"
},

https://github.com/postcss/autoprefixer/releases/tag/10.0.0

[dsebastien]

@derHodrig Indeed, the last PostCSS major version has broken plugins, I've had the same kind of error messages when trying to use PostCSS-import..

[derHodrig]

For those interested, I’ve written an article explaining how to integrate Tailwind with Nx, Angular and Storybook over here: https://medium.com/@dSebastien/adding-tailwind-support-to-a-nrwl-nx-workspace-with-angular-and-storybook-bf890ea882e

behind a paywall :(

[JoA-MoS]

@derHodrig - open the link incognito

[derHodrig]

@JoA-MoS oh this is a great tipp. thanks.

[gilles-bertrand]

Hi nothing snce to work now, this is the error I receive
'customWebpackConfig' is not found in schema