tailwindcss-cmdk

Variants for styling cmdk attributes.

Installation

``sh
npm i -D tailwindcss-cmdk
yarn add -D tailwindcss-cmdk
pnpm add -D tailwindcss-cmdk
`

Setup

Add the plugin to your plugins array:

`js
module.exports = {
theme: {
// --snip--
},
variants: {
// --snip--
},
plugins: [require("tailwindcss-cmdk")],
};
`

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.

$3

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:).

$3

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

$3

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

License

MIT