Component library setup with Vite, Rollup, React and tailwindcss 4

[romankoho]

Hello,

I'm trying to setup a component library.

Both projects (the ui-library and the "consuming" project) are setup with Vite, React and tailwindcss 4

My two problems:

1. I have to include an import of the ui-components css file in the main.tsx of the consuming project. There must be a way this is not necessary.
2. It seems like the compilation of the css file is not yet correctly configured. I.e. I have configured two colors in the ui-components library. In the consuming project only bg-greyscale-dark-2 is working but the color bg-greyscale-dark-1 does nothing. What's the catch? The ultimate goal would be to define a global theme which I can then use in any project.

this is the link to a debug repo: https://github.com/romankoho/LibraryTailwind4
You can find both projects (the UI-library and the consuming project in there)

I'd be happy about any input. Thanks!

[wongjn]

As it stands currently, you have two sets of Tailwind-generated CSS, one from the library and one from the consumer. Some of this would be duplicate or interfere with each other. Instead, consider having consumers compile Tailwind CSS for their own code as well as the library's.

In ui-components:

• Remove @imports in ui-components/src/lib/tailwind/theme.css:

  -@import 'tailwindcss';
  -@import 'tailwindcss/preflight.css' layer(base);
  -
   @theme {
     --font-sans: 'Inter', ui-sans-serif, system-ui;
     --font-weight-light: 300;

  This removes the duplication.
• Add @source directive in ui-components/src/lib/tailwind/theme.css:

     --color-greyscale-medium-3: #808080;
     --color-greyscale-white: #ffffff;
   }
  +
  +/* Change this path to be relative to where this CSS file ends up after packaging this library. */
  +@source "../dist"

  This hides the implementation of source code to scan inside the library so the consumer doesn't have to worry about this.
• Remove the CSS import from ui-components/src/lib/index.ts:

  -import './tailwind/theme.css'
   export * from './components/CTAButton'

  We don't import it here if the consumer library will be importing it.
• When packing ui-components, have it such that its CSS is used as-is.

In MyApp:

• @import the packaged CSS file from ui-components:

   @import "tailwindcss";
  +@import "ui-components/path/to/theme.css";
  
   @source "../node_modules/ui-components/dist/**/*.{js,jsx,ts,tsx}";

  This will include theme variables defined in the ui-components @theme, as well as its @source directive.
• Remove the consumer's @source:

   @import "tailwindcss";
   @import "ui-components/path/to/theme.css";
  -
  -@source "../node_modules/ui-components/dist/**/*.{js,jsx,ts,tsx}";
  
   @theme {
     --color-neon-yellow: #eccb08;

  Not needed since it is in the ui-components CSS file.

[romankoho]

thanks @wongjn! You guided me in the right direction. I got it working (repo is updated as well)

[timootten]

Hey, I am currently working too on a React Tailwind component library.
I am wondering if it is possible to get the tailwind autocomplete with this setup?

I didnt get it because of the missing @import "tailwindcss";