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.