How to share tailwind configuration between nuxt layers

Ismael Garcia - Jun 28 - - Dev Community

While working in the nuxt-layer-monorepo I encounter a issue with the tailwind styles:

  • UI Layer have a tailwind config file and override the default tailwind CSS configurations
  • Then using the UI Layer in the Content layer

Tailwind configurations got reset to the base for some reason, even that the layers' config should be use

So the solution that I found and is currently working is just to create a new tailwind.config.ts in the Content layer

and put the following on it:

import twc from "@local-monorepo/ui/tailwind.config"


export default twc
Enter fullscreen mode Exit fullscreen mode

Basically importing the tailwind config from the UI Layer and using that in the Content layer.

Note

This is working for me, but please if there is a better way kindly let me know.

**Happy hacking!

Working on the audio version

The Loop VueJs Podcast

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .