tailwindcss-cmdk

Variants for styling cmdk attributes.

Installation

1npm i -D tailwindcss-cmdk
2yarn add -D tailwindcss-cmdk
3pnpm add -D tailwindcss-cmdk

Setup

Add the plugin to your plugins array:

1module.exports = {
2  theme: {
3    // --snip--
4  },
5  variants: {
6    // --snip--
7  },
8  plugins: [require("tailwindcss-cmdk")],
9};

Usage

cmdk has a number of CSS attributes that are applied to parts of the component. Use the variants named the same as the atributes listed in the cmdk docs (e.g. cmdk-root:bg-white).

Note: cmdk-group-heading is an element you don't create directly so you need to apply the cmdk-group-heading variants directly to the Command.Group component.

Group & Peer usage

There are variants for group and peer for all the attributes and they're the same just prefixed with group- and peer- respectively (e.g. peer-cmdk-input:).

cmdk-item Aria states

The cmdk-item attributes also include base, group, and peer variants for aria-disabled aria-selected (e.g. cmdk-item:aria-disabled:)

cmdk-root Hidden state

The cmdk-root attribute includes base, group, and peer variants for the hidden attribute: cmdk-root-hidden:.

License

MIT