How to add tailwind to NX Storybook: missing instructions

[CMadden8]

Documentation issue

• [ ] Reporting a typo
• [ ] Reporting a documentation bug
• [x ] Documentation improvement
• [x ] Documentation feedback

Is there a specific documentation page you are reporting?

Storybook Angular Documentation

Additional context or description

Tailwind is a major part of NX, but there is no documentation re: how to add Tailwind to a story within the NX ecosystem. I've googled around on the topic, and multiple answers have been provided, none of which worked for me. They vary widely and in general seem to be hacks.

There's surely a straightforward way of doing this, given how common it is to add Tailwind to NX applications.

On a side-note, ngx-translate is also extremely common for translating strings in Angular applications.

Does the NX team know of a 'best approach' as to how ngx-translate can be set up to work with Storybook? Again, I've tried several solutions from googling around, and none of them work.

This would also be highly useful documentation, if there's a known solution, as it will save devs hours, and perhaps days, looking for answers to these 'setup' requirements.

[mandarini]

Hi there @CMadden8 ! Would these docs work for your use case?

• https://egghead.io/lessons/tailwind-configure-tailwind-for-your-storybook-setup-in-an-nx-workspace
• https://blog.nrwl.io/use-storybook-with-tailwind-in-an-nx-workspace-5ceb08edad71
• https://juristr.com/blog/2021/08/nextjs-storybook-tailwind-nx/

[CMadden8]

@mandarini It seems these solutions are similar to the solution mentioned here.

The author of the article mentions a maintainability issue with these approaches, as it requires duplicating the tailwind.config per lib.

He referenced this article, where the config is a preset, shared between all apps and libs. The libs in question must be converted to buildable to make use of this.

I'm going to try this and see how it works, and will let you know if I have any success with it. However, there doesn't seem to be a straightforward way of including Tailwind with Storybook NX.

[CMadden8]

All right, I got this working while avoiding a ton of architectural changes to the current nx lib (ie - it's not buildable).

I just followed the instructions from the first article. It's as simple as this:

1. Add the style.css to styles array in build-storybook (I'd already done this, but was wondering why it was never picked up by Storybook)
2. Copy the tailwind.config.js to the lib

That's literally it. IMO, it should definitely be included in the nx docs, as step 2 is very easy to miss and doesn't make sense unless you read the low level detail in the second article, where it describes in detail how Tailwind works.

The only issue now is making one Tailwind config that can be shared across all libs/apps. The preset solution from the second article causes storybook to fail the build, so I'll see if I can find something reliable around that as well.

[CMadden8]

@mandarini Although this is tangential to the original post, the correct method for the setting up the boilerplate for the standalone components I'm using is apparently to use applicationConfig. Eg:

 applicationConfig({

      providers: [importProvidersFrom([SomeBootstrapModule])],

    }), 

This works as a silver bullet for most of the other Storybook setup issues with Angular, and ngx-translate is finally trying to look for translation files, but it cannot find the files at the usual paths.

I've tried adding the paths to an 'assets' array in the storybook-builder, but it appears to have no impact on adding the missing assets folders to the Storybook build.

I'm going to try create a minimum reproducible version of this.

Indirectly, this is all related to the same issue: trying to get passed the initial Storybook NX boilerplate setup for stock Angular apps (which will more than likely use ngx-translate. The Tailwind issue is resolved in a simple way, so now there's just ngx-translate (and some strange issues re: relative paths for services using other services within the SomeBootstrapModule boilerplate).

If the services' paths are changed to aliased paths, Storybook 'understands' the issue and starts working again. However, this means refactoring the architecture etc

I'll try to also reproduce the relative paths issue with the most minimal setup as well, and maybe there's some simple explanation for all of these setup woes.

[mandarini]

@CMadden8 thanks for the detailed information!

So, if I understand correctly, first issue is solved, and you managed to configure everything in a simple way, and we should just add a page in the docs to explain how to do this?

Regarding the second issue, I am not sure I understand the issue 100%, so if you can create a new GitHub issue with it, and a simple reproduction repository, that would be amazing!!!

In any case, thanks again for all the details!

[CMadden8]

@mandarini Yes, I agree the first issue would be helpful to document. If you also know a way of sharing the Tailwind preset across NX apps/libs that would also be very useful info, as I imagine a lot of people will need that.

I'll close this and try to reproduce the second issue with the least amount of code, then create another ticket for that.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.