tailwindcss-radix-scale v0.1.1

TailwindCSS Radix Scale

A package to simplify using Radix Colors when using Tailwind.

Installation

npm install -D tailwindcss-radix-scale

Usage

Import the colours you'd like to use above where you import Tailwind in your CSS entrypoint.

@import '@radix-ui/colors/blue.css';
@import '@radix-ui/colors/blue-dark.css';

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

Then use the library in your Tailwind config to generate the classes you'd like to use.

import { generateScale } from "tailwindcss-radix-scale";

module.exports = {
  content: [],
  theme: {
    colors: {
      blue: generateScale("blue"),
    },
  },
  plugins: [],
};

Acknowledgements

Fynn (@fyn) for writing the article that motivated creating this package.