Using TailwindCSS in Storybook with Angular and Nx Workspace

I’ve been trying to configure the webpack of using tailwindcss in storybook within Nx Workspace in an Angular Project. No that I have found the solution, Imma share it with you guys, so we all don’t have to worry about setting it up and looking for a solution in the internet.

I really hope Nx can provide something like adding a flag for using external css library in configuring storybook like:

nx g @nrwl/angular:storybook-configuration project-name --external-css=csslib

Where csslib would be equal to tailwindcss, bootstrap, uikit, bulma, etc…

So, upon trying to run a storybook configuration within AngularConsole, i did found out that since Nx now supports generating storybook from within the workspace, i tried extending the webpack config to use external library such as tailwindcss to use in storybook in my libs/ui/.storybook/webpack.config.js folder.

libs/ui/.storybook/webpack.config.js

Ok, so what’s happens here is that, you are just pushing another rules from the existing config and telling the compiler to also use these rules on top of the existing one from ({ config, mode }) .

Conclusion

I believe in proper project architecture such as using Nx workspace and maximising the use of external css libraries such as tailwindcss and using storybook will make the development a lot easier and faster. I hope you learn something from this small story that I’ve made. Big thanks to Nx team for adding a support of storybook in Nx workspace.