Adding Tailwind CSS for Shared UI Components

[cvrlnolan]

Hello,
Is there a more effective way of implementing Tailwind CSS for shared ui components package than the one I have attempted or implemented in this public example repository ?

turborepo-tailwindcss

That is, avoiding to download multiple tailwindcss dependencies for each app project that needs it & only importing it from the ui package workspace. I have also attempted installing it directly in the ui package with the required tailwindcss setup & configurations, but for some reason you need to also install it in your apps project which causes some redundancy.

The cleanest solution or implementation I've found/tried so far, is the one found in the turborepo-tailwindcss I pushed earlier.

[monoppa]

Hi! I'm also working on something like this.

Ended up using tailwind CLI to output a final CSS file eg. packages/ui/dist/output.css
output.css is then imported to each of the app that needs it

Here's the repo I'm working on, hope you find it useful:
https://github.com/monoppa/tokyo-monorepo

The main folders you might be interested in are:

• packages/ui
• packages/tw-config
• apps/web

[cvrlnolan]

It looks good ! Basically you used the Tailwind CLI to implement the same workaround this repo uses: turborepo-tailwindcss. The solution or workaround is broken down as follows:

1. Install the tailwind css & postcss dependencies to your workspaces.
2. Create shared tailwind & postcss configuration files which can be imported/extended by different workspaces.
3. Depending on the apps framework you are using, for example for Next.js apps, you will need to create a styles directory & add global.css file. Inside this file, you will insert the tailwind directives for each of Tailwind's layers.
4. Finally, adding or importing the global.css stylesheet to the Next.js app's entry point via the _app.tsx file.

The advantage of your solution is that, for Next.js applications, it skips the creation of the styles directory & global.css file & directly imports the output.css file generated from the Tailwind CLI build process.
To conclude, I think your idea is clear & needs more use cases for other frameworks.

[jaredpalmer]

If the packages are not being published, the best solution is to leverage tailwind JIT in the applications such that there are no interim CSS files produced at all.

If the packages are being published, then you will need to generate independent CSS files, or document/state in docs that the package needs to be included in the JIT settings somehow

[cvrlnolan]

Thought as much .. If I may ask, do you have an example of how to accomplish the scenario of not publishing the packages ? Or can you describe the process of leveraging the Tailwind JIT in the applications ?