[v4] Custom colors not working

[TommyAlmeida]

We are developing an internal component library using Vite's library mode and encountering the following issues:

• Custom colors only work outside the component library if they are explicitly declared in the component library, so we had to enforce a safelist using a text file.
• Hover, focus, and other state-based styles don't apply to these custom colors.

main.css:

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@import 'tailwindcss';

@plugin 'tailwindcss-animate';
@plugin 'tailwind-scrollbar';

@theme {
  /* Censored Design system */
  /* Neutral color */
  --color-brand-black: hsla(0, 0%, 5%, 1);
  --color-brand-grey: hsla(0, 1%, 42%, 1);
  --color-brand-grey-light: hsla(220, 23%, 95%, 1);
  --color-brand-white: hsla(0, 0%, 100%, 1);

  /* Alpha color */
  --color-brand-black-alpha: hsla(0, 0%, 5%, 0.5);
  --color-brand-white-alpha: hsla(0, 0%, 100%, 0.5);
  --color-brand-blue-alpha: hsla(240, 77%, 95%, 0.5);

  /* Indigo / Primary color */
  --color-brand-primary-900: hsla(276, 100%, 25%, 1);
  --color-brand-primary-100: hsla(275, 70%, 91%, 1);

  /* Other colors */
  --color-brand-green-900: hsla(89, 100%, 26%, 1);
  --color-brand-green-100: hsla(90, 80%, 90%, 1);
  --color-brand-orange-900: hsla(38, 96%, 45%, 1);
  --color-brand-orange-100: hsla(38, 90%, 85%, 1);
  --color-brand-red-900: hsla(339, 85%, 47%, 1);
  --color-brand-red-100: hsla(339, 100%, 94%, 1);
  --color-brand-blue-900: hsla(240, 91%, 31%, 1);
  --color-brand-blue-100: hsla(240, 77%, 95%, 1);

  --font-albert: 'Albert Sans', sans-serif;

  --radius: 0.6rem;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

@layer base {
  * {
      @apply border-border outline-ring/50;
  }
  body {
      @apply bg-background text-foreground font-albert;
  }
}

Vite config (in case its needed):

import path, { resolve } from 'path';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import preserveDirectives from 'rollup-preserve-directives';

export default defineConfig({
  plugins: [
    react(),
    dts({
      tsconfigPath: './tsconfig.app.json',
      exclude: ['src/components/**/*.stories.*'],
      insertTypesEntry: true,
    }),
    preserveDirectives(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'main',
      formats: ["es"],
      fileName: (format) => `main.${format}.js`,
    },
    cssCodeSplit: true,
    rollupOptions: {
      external: ["react", "react-dom", "react/jsx-runtime", "tailwindcss"],
      output: {
        banner: '"use client";',
        assetFileNames: 'assets/[name][extname]',
      },
    },
  },
});

postcss config:

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

export default config;

[rahmanpajri]

I have the same issue. Have you found a solution?

[mehediScriptDev]

make sure your consumer project (the one importing the library) includes its own Tailwind setup with @import "tailwindcss"; at the top level

Iet mw know if it work

[KaloudasDev]

Hello! This is a common issue when building component libraries with Tailwind CSS v4. The problem occurs because custom colors defined in your library aren't automatically available in consumer applications. Here's the complete solution:

1. Update Your Library's Tailwind Configuration
Create a proper tailwind.config.js in your library:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          black: 'hsla(0, 0%, 5%, 1)',
          grey: 'hsla(0, 1%, 42%, 1)',
          'grey-light': 'hsla(220, 23%, 95%, 1)',
          white: 'hsla(0, 0%, 100%, 1)',
          'black-alpha': 'hsla(0, 0%, 5%, 0.5)',
          'white-alpha': 'hsla(0, 0%, 100%, 0.5)',
          'blue-alpha': 'hsla(240, 77%, 95%, 0.5)',
          primary: {
            900: 'hsla(276, 100%, 25%, 1)',
            100: 'hsla(275, 70%, 91%, 1)',
          },
          green: {
            900: 'hsla(89, 100%, 26%, 1)',
            100: 'hsla(90, 80%, 90%, 1)',
          },
          orange: {
            900: 'hsla(38, 96%, 45%, 1)',
            100: 'hsla(38, 90%, 85%, 1)',
          },
          red: {
            900: 'hsla(339, 85%, 47%, 1)',
            100: 'hsla(339, 100%, 94%, 1)',
          },
          blue: {
            900: 'hsla(240, 91%, 31%, 1)',
            100: 'hsla(240, 77%, 95%, 1)',
          }
        }
      },
      fontFamily: {
        albert: ['Albert Sans', 'sans-serif'],
      },
      borderRadius: {
        DEFAULT: '0.6rem',
        sm: 'calc(0.6rem - 4px)',
        md: 'calc(0.6rem - 2px)',
        lg: '0.6rem',
        xl: 'calc(0.6rem + 4px)',
      }
    },
  },
  plugins: [
    require('tailwindcss-animate'),
    require('tailwind-scrollbar'),
  ],
}

2. Export CSS from Your Library
Update your main.css to use standard Tailwind directives:

@import 'tailwindcss';
@import 'tailwindcss/utilities' layer(utilities);

@plugin 'tailwindcss-animate';
@plugin 'tailwind-scrollbar';

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-albert;
  }
}

3. Consumer Application Setup
In the consuming project's CSS file:

@import "your-component-library/main.css";
@import "tailwindcss";

4. Build Configuration Update
Ensure your Vite build includes the CSS properly:

// vite.config.js
build: {
  lib: {
  },
  rollupOptions: {
    external: ["react", "react-dom", "tailwindcss"],
    output: {
      assetFileNames: (assetInfo) => {
        if (assetInfo.name === 'style.css') return 'main.css';
        return 'assets/[name][extname]';
      },
    },
  },
}

5. For State Variants (Hover, Focus)
Ensure you're using the correct class names:

<button class="bg-brand-primary-900 hover:bg-brand-primary-700 focus:bg-brand-primary-800">
  Click me
</button>

The key is providing a complete Tailwind configuration from your library that consumer applications can extend, rather than relying solely on CSS custom properties.