radi-color-css

radi-color-css

A simple package that contains all the Radix Colors in a single importable CSS file, tailwind config, and tailwind safelist

how to use

modify your tailwind.config.js as follows:

import { radixColors, tailwindSafelist } from 'radi-color-css'

export default {
  darkMode: 'class',
  content: ['./src/**/*.{ts,tsx}'],
  // Include the safelist if Tailwind's JIT compiler dosnt show all colors unless explicitly named. This will increase your app bundle size !!!
  safelist: [
    ...tailwindSafelist
  ],
  theme: {
    // OVERRIDE the base theme completely instead of extending it
    colors: {
      ...radixColors,
    },
    // EXTEND the base theme completely instead of extending it
    extend: {
      colors: {
        ...radixColors,
      }
    }
    // ...rest of your config
  }
}

modify your global.css as follows:

// import the CSS file that contains all colors
@import "radi-color-css/dist/colors.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

License

MIT License © Omar McAdam