I am building a reusable component library using Vite and TailwindCSS. The library is structured as follows:

.
├── lib
│   └── components-core
│       ├── tailwind.config.js
│       ├── vite.config.ts
│       ├── lib
│       ├── dist
│       │   ├── assets
│       │   │   ├── main.css
│       │   └── main.js
│       ├── src
│       │   ├── components
│       │   └── main.ts

Inside marketing-initiative/src/main.tsx, I import the compiled CSS like this:

import "@massmarketlabs/components-core/dist/assets/main.css"; However, the styles are not applying. My vite.config.ts for the library includes:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    dts({
      include: ['lib/**/*'],
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es'],
    },
    rollupOptions: {
      external: ['react', 'react/jsx-runtime'],
    }
  },
});

I suspect Tailwind is not properly processing my component styles, or they are being stripped in production. How can I ensure that Tailwind styles from the component library are applied in the consuming application?

I am building a reusable component library using Vite and TailwindCSS. The library is structured as follows:

.
├── lib
│   └── components-core
│       ├── tailwind.config.js
│       ├── vite.config.ts
│       ├── lib
│       ├── dist
│       │   ├── assets
│       │   │   ├── main.css
│       │   └── main.js
│       ├── src
│       │   ├── components
│       │   └── main.ts

Inside marketing-initiative/src/main.tsx, I import the compiled CSS like this:

import "@massmarketlabs/components-core/dist/assets/main.css"; However, the styles are not applying. My vite.config.ts for the library includes:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    dts({
      include: ['lib/**/*'],
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es'],
    },
    rollupOptions: {
      external: ['react', 'react/jsx-runtime'],
    }
  },
});

I suspect Tailwind is not properly processing my component styles, or they are being stripped in production. How can I ensure that Tailwind styles from the component library are applied in the consuming application?

• reactjs
• tailwind-css
• vite

1 Answer 1

Within CSS, import the necessary extra styles like this:

@import "tailwindcss";
@import "@massmarketlabs/components-core/dist/assets/main.css";

From v4 onwards, it's advisable to place such classes under the native CSS cascade if you want TailwindCSS classes to still be able to override them.

@import "tailwindcss";
@import "@massmarketlabs/components-core/dist/assets/main.css" layer(base);

• Cascade layers - MDN Docs
• From v4 the reset style cannot be overridden by TailwindCSS classes - StackOverflow