Variants for styling cmdk attributes.
npm i -D tailwindcss-cmdk
yarn add -D tailwindcss-cmdk
pnpm add -D tailwindcss-cmdk
Add the plugin to your plugins array:
module.exports = {
theme: {
// --snip--
},
variants: {
// --snip--
},
plugins: [require("tailwindcss-cmdk")],
};
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 thecmdk-group-heading
variants directly to theCommand.Group
component.
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:
).
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:
.
MIT