Warning: this is not the official Kobalte package

Check out https://www.npmjs.com/package/@kobalte/tailwindcss instead.

@trellis-app/kobalte-tailwindcss

A TailwindCSS plugin for styling Kobalte components with data-* attributes by using modifiers like ui-expanded:*.

Installation

npm install -D @trellis-app/kobalte-tailwindcss
# or
yarn add -D @trellis-app/kobalte-tailwindcss
# or
pnpm add -D @trellis-app/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("@trellis-app/kobalte-tailwindcss"),

		// or with a custom prefix:
		require("@trellis-app/kobalte-tailwindcss")({ prefix: "kb" }),
	],
};

Style your component:

import { Popover } from "@trellis-app/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.