@kobalte/tailwindcss
v0.9.0
Published
A TailwindCSS plugin for styling Kobalte components with data-* attributes by using modifiers like ui-expanded:*
Downloads
7,818
Readme
@kobalte/tailwindcss
A TailwindCSS plugin for styling Kobalte components with data-*
attributes by using modifiers like ui-expanded:*
.
Installation
npm install -D @kobalte/tailwindcss
# or
yarn add -D @kobalte/tailwindcss
# or
pnpm add -D @kobalte/tailwindcss
Usage
Add the plugin to your tailwind.config.js
:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
// default prefix is "ui"
require("@kobalte/tailwindcss"),
// or with a custom prefix:
require("@kobalte/tailwindcss")({ prefix: "kb" }),
],
};
Style your component:
import { Popover } from "@kobalte/core";
export const MyPopover = () => (
<Popover>
<Popover.Trigger class="ui-disabled:bg-slate-100">Open</Popover.Trigger>
<Popover.Content class="ui-expanded:shadow-md">...</Popover.Content>
</Popover>
);
You can use the following modifiers:
| Modifier | Inverse modifier |
| :--------------------- | :------------------------- |
| ui-valid
| ui-not-valid
|
| ui-invalid
| ui-not-invalid
|
| ui-required
| ui-not-required
|
| ui-disabled
| ui-not-disabled
|
| ui-readonly
| ui-not-readonly
|
| ui-checked
| ui-not-checked
|
| ui-indeterminate
| ui-not-indeterminate
|
| ui-selected
| ui-not-selected
|
| ui-pressed
| ui-not-pressed
|
| ui-expanded
| ui-not-expanded
|
| ui-highlighted
| ui-not-highlighted
|
| ui-current
| ui-not-current
|
| ui-placeholder-shown
| ui-not-placeholder-shown
|
It's also possible to use inverse modifiers in the form of ui-not-*
, group and peer modifiers in the form of ui-group-*
and ui-peer-*
.
Documentation
For full documentation, visit kobalte.dev.
Acknowledgment
This plugin is an adaptation of @headlessui/tailwindcss, MIT Licensed, Copyright (c) 2020 Tailwind Labs.
Changelog
All notable changes are described in the CHANGELOG.md file.