@kobalte/tailwindcss
TypeScript icon, indicating that this package has built-in type declarations

0.9.0 • Public • Published

@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.

Package Sidebar

Install

npm i @kobalte/tailwindcss

Weekly Downloads

1,753

Version

0.9.0

License

MIT

Unpacked Size

24.5 kB

Total Files

10

Last publish

Collaborators

  • jer3m01
  • fabienml