Extend theme classes not included in rollup tailwind build

[chrisj-skinner]

Description and use:

Instance of a typescript react tailwind UI lib that will packaged up and consumed in other react apps via npm package.

Expected:

On build all tailwind classes used throughout the ui lib in components INCLUDING those declared within the extend section of tailwind.config.ts should be included in the build js file.

Happening:

None of the classes declared within the extend section of the tailwding.config.ts file are included within the dist dir.

So with the example code below the colors primary and secondary are not included in the dist folder js file.

---

For example: the tailwind class text-primary (which is declared within the extend) wants to be available to the app that consumes the UI lib but it is not.

Interestingly the custom card.css which is used in one of the components and which calls on the primary color works fine and the styles of card.css are included within the dist dir. And the tailwind class text-primary works within the UI lib on components. It;s just not included within the final build.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
// Preflight (reset) is automatically injected when you include @tailwind base in your CSS: https://unpkg.com/[email protected]/src/css/preflight.css

module.exports = {
  content: ['./src/components/**/*.tsx'],
  theme: {
    extend: {
      colors: {
        primary: '#FF6363',
        secondary: {
          100: '#E2E2D5',
          200: '#888883'
        }
      }
    }
  },
  plugins: []
};

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

// rollup.config.mjs

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import packageJson from './package.json' assert { type: 'json' };
import dts from 'rollup-plugin-dts';

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true
      }
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: './tsconfig.build.json' }),
      postcss(),
      terser(),
      peerDepsExternal()
    ]
  },
  {
    input: 'src/index.ts',
    output: [{ dir: 'dist', format: 'esm' }],
    plugins: [dts()],
    external: [/\.css$/, 'react-dom']
  }
];

/// card.css

.card {
   color: theme('colors.primary')
}

[haseebahmed248]

I faced a similar issue with Tailwind’s extend values (like custom colors) not making it into the final build when using Rollup to package a UI component library.

What worked for me:

I resolved this by building the library first, and then importing the generated CSS (index.css) manually into my dist/index.js file. That way, the Tailwind classes including the ones from the theme.extend section—get picked up and included in the consuming app.

// In your dist/index.js (or the entry point of the dist build)
import './index.css';
This isn't ideal though, because it should be auto-included by Rollup if everything is configured correctly.