https://github.com/programming-with-ia/tailwindcss-shadcn-utilities

A Tailwind CSS plugin for ShadCN that provides utility classes for combining background and foreground colors based on ShadCN themes
https://github.com/programming-with-ia/tailwindcss-shadcn-utilities

color-utilities plugin shadcn shadcn-tailwind-plugin shadcn-utilites tailwindcss tailwindcss-plugin tailwindcss-shadcn-utilities utilites

Last synced: about 2 months ago
JSON representation

A Tailwind CSS plugin for ShadCN that provides utility classes for combining background and foreground colors based on ShadCN themes

• Host: GitHub
• URL: https://github.com/programming-with-ia/tailwindcss-shadcn-utilities
• Owner: programming-with-ia
• License: mit
• Created: 2024-11-13T14:30:33.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2024-11-19T10:38:58.000Z (12 months ago)
• Last Synced: 2025-08-16T17:14:23.639Z (3 months ago)
• Topics: color-utilities, plugin, shadcn, shadcn-tailwind-plugin, shadcn-utilites, tailwindcss, tailwindcss-plugin, tailwindcss-shadcn-utilities, utilites
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/tailwindcss-shadcn-utilities
• Size: 6.84 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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:

```sh

npm install tailwindcss-shadcn-utilities -D

```

```sh

pnpm add tailwindcss-shadcn-utilities -D

```

```sh

yarn add tailwindcss-shadcn-utilities --dev

```

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

```js

// 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

```html



  



Button

Button



  



```


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](./LICENSE).