[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;