Replies: 3 comments 3 replies
-
Do you have any custom CSS in the input CSS of |
Beta Was this translation helpful? Give feedback.
-
Hi @Kinbaum, I'm also thinking of creating a test ui-lib using tailwindcss4, how has it been working out and is there a repo that I can take a peak? 😉 |
Beta Was this translation helpful? Give feedback.
-
@adamwathan @wongjn In order to import the uncompiled css from my-lib into my-app, I had to modify the postcss config to the following const path = require('node:path');
module.exports = {
plugins: {
'@tailwindcss/postcss': {
base: path.resolve(__dirname, '../../packages/registry')
}
}
}; While I can now see my library styles coming through, the application-specific styles are no longer rendered due to the base directory changing. If I use the root of my monorepo I get an infinite loop it seems as there are two separate tailwind instances here. Outside of my monorepo, I want to distribute this lib as an npm package, so not sure if it'll work properly. The more I mess with this, I'm wondering if node_modules is just being ignored completely? |
Beta Was this translation helpful? Give feedback.
-
I am currently working on a component library (my-lib) built with Tailwind v4. The situation involves a consuming application (my-app) that pulls components from my-lib and imports the compiled CSS from my-lib into the root layout.
Both the component library and the consuming application use Tailwind v4. The concern arises from duplicate classes being generated in the final CSS output. For instance, if a button in my-lib has the class
overflow-hidden
, this class is included in the root layout via import.In my-app, if I define
overflow-hidden
on a JSX element, this class gets compiled into the app-specific CSS, resulting in two different .overflow-hidden
definitions being shipped to the browser (and understandably so as these are two separate Tailwind processes).My question is, is there a way to ensure only a single instance of this class is shipped to the browser? Is there something I can do differently to have Tailwind dedupe these classes? Is there a way to deliver the uncompiled CSS from with my-lib and then
@import
it into my-app's CSS file (I tried the second option using a monorepo, but I was getting a bunch of post-css errors)?Beta Was this translation helpful? Give feedback.
All reactions