JSPM

tailwind-4-radix-colors

1.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q23128F
  • License MIT

A utility to integrate Radix UI colors into Tailwind CSS 4.0

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-4-radix-colors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Tailwind 4.0 + Radix Colors

    This package creates a Tailwind 4.0 @theme CSS file with Radix colors, not including alpha colors.

    Installation

    npm install -D tailwind-4-radix-colors

    Usage

    1. Import the CSS file: Add the generated @theme CSS file to the main CSS file of your project:
    @import "tailwindcss";
@import "tailwind-4-radix-colors/dist/theme.css";
    1. Use the Radix Colors using Tailwind syntax:
    <div class="bg-violet-2 dark:bg-violet-dark-2 text-violet-12 dark:text-violet-12 border border-violet-9">
  Hello, world!
</div>

    Using P3 Colors

    Use the supports-p3 custom variant to add P3 colors to your project:

    <div class="bg-violet-2 supports-p3:bg-violet-p3-2 dark:bg-violet-dark-2 dark:supports-p3:bg-violet-dark-p3-2">
  Hello, world with more color space!
</div>

    Radix Colors

    Radix Colors is an open-source color system designed for adaptive, accessible design. Learn more about Radix Colors at https://www.radix-ui.com/colors.