tailwindcss-cmdk

Variants for styling cmdk attributes.

Installation

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

Setup

Add the plugin to your plugins array:

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.

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