Package Exports

tailwindcss-shadcn-utilities
tailwindcss-shadcn-utilities/dist/index.js

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 (tailwindcss-shadcn-utilities) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tailwindcss-shadcn-utilities

A plugin for Tailwind CSS v3.2+ that provides utility classes for combining background and foreground colors based on ShadCN themes. This allows you to apply consistent color combinations for elements like buttons, cards, popovers, and more with a single CSS class.

Installation

Install the plugin from npm:

npm install tailwindcss-shadcn-utilities -D

pnpm add tailwindcss-shadcn-utilities -D

yarn add tailwindcss-shadcn-utilities --dev

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-shadcn-utilities"),
    // ...
  ],
};

Usage

After adding the plugin, you can use the following utility classes to apply both background and foreground colors in one go:

~~Normal Use~~	with `tailwindcss-shadcn-utilities`
`bg-card text-card-foreground`	`card`
`bg-popover text-popover-foreground`	`popover`
`bg-primary text-primary-foreground`	`primary`
`bg-secondary text-secondary-foreground`	`secondary`
`bg-muted text-muted-foreground`	`muted`
`bg-accent text-accent-foreground`	`accent`
`bg-destructive text-destructive-foreground`	`destructive`

Example

<div class="card p-4 rounded-lg">
  <!-- ... -->
</div>

<button class="primary md:secondary">Button</button>

<button class="secondary hover:primary">Button</button>

<div class="popover p-4">
  <!-- ... -->
</div>

These utility classes will automatically apply both background and text colors based on the ShadCN UI theme.

License

tailwindcss-shadcn-utilities is open-source and licensed under the MIT License.