Tailwind Plus

https://tailwindcss.com/plus/ui-blocks/documentation
Admin
Tailwind Plus is a commercial UI component library and design system featuring JavaScript...
Tokens:8,059
Snippets:110
Trust Score:9.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Elements via npm

Source: https://tailwindcss.com/plus/ui-blocks/documentation/elements

Install Elements using npm if you have a build pipeline. Then, import it into your root layout.

```bash
npm install @tailwindplus/elements
```

```javascript
import '@tailwindplus/elements';
```

--------------------------------

### Install Vue Dependencies

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-vue

Install Headless UI and Heroicons for interactive behavior and icons in your Vue project.

```bash
npm install @headlessui/vue @heroicons/vue
```

--------------------------------

### Install React Dependencies

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-react

Install Headless UI and Heroicons for interactive behavior and icons. Requires React version 18 or higher.

```bash
npm install @headlessui/react @heroicons/react
```

--------------------------------

### Install Tailwind Plus Elements via npm

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-html

Install the Elements UI component library using npm if you have a build pipeline. A commercial license is required to use Tailwind Plus Elements.

```bash
npm install @tailwindplus/elements
```

--------------------------------

### Using Elements with React

Source: https://tailwindcss.com/plus/ui-blocks/documentation/elements

For React projects, install via npm and use the React-specific exports. This ensures Elements loads correctly during hydration.

```bash
npm install @tailwindplus/elements
```

```javascript
import { ElDisclosure } from '@tailwindplus/elements/react'
import { useId } from 'react'

export default function MyAccordion() {
  let id = useId()

  return (
    <>
      <button command="--toggle" commandfor={id}>
        How do you make holy water?
      </button>
      <ElDisclosure id={id} hidden>
        You boil the hell out of it.
      </ElDisclosure>
    </>
  )
}
```

--------------------------------

### Vue Stacked List Component Example

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-vue

A basic Vue component demonstrating a stacked list of people with images, names, and emails. Useful as a starting point for list UIs.

```vue
<template>
  <ul class="divide-y divide-gray-200">
    <li v-for="person in people" :key="person.email" class="flex py-4">
      <img class="size-10 rounded-full" :src="person.image" alt="" />
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-900">{{ person.name }}</p>
        <p class="text-sm text-gray-500">{{ person.email }}</p>
      </div>
    </li>
  </ul>
</template>

<script setup>
  const people = [
    {
      name: 'Calvin Hawkins',
      email: 'calvin.hawkins@example.com',
      image:
        'https://images.unsplash.com/photo-1491528323818-fdd1faba627791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
    {
      name: 'Kristen Ramos',
      email: 'kristen.ramos@example.com',
      image:
        'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
    {
      name: 'Ted Fox',
      email: 'ted.fox@example.com',
      image:
        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  ]
</script>
```

--------------------------------

### Import Tailwind Plus Elements

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-html

Import the Elements UI component library into your root layout after installing it via npm.

```javascript
import '@tailwindplus/elements';
```

--------------------------------

### Install Tailwind Plus Elements via CDN

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-html

Add this script to your project's <head> tag to include the Elements UI component library via CDN. A commercial license is required to use Tailwind Plus Elements.

```html
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>
```

--------------------------------

### Refactored React List Component for Teams

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-react

An example of breaking down the stacked list component into smaller, reusable parts for a specific data structure like a hockey team list. Demonstrates component composition.

```jsx
function HockeyTeamItem({ team }) {
  return (
    <li className="flex py-4">
      <img className="size-10 rounded-full" src={team.logo} alt="" />
      <div className="ml-3">
        <p className="text-sm font-medium text-gray-900">{team.name}</p>
        <p className="text-sm text-gray-500">{team.city}</p>
      </div>
    </li>
  )
}

export default function HockeyTeamList({ teams }) {
  return (
    <ul className="divide-y divide-gray-200">
      {teams.map((team) => (
        <HockeyTeamItem key={team.id} team={team} />
      ))}
    </ul>
  )
}
```

--------------------------------

### React Stacked List Component

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-react

A basic React component demonstrating a stacked list of people with images, names, and emails. Useful as a starting point for custom list UIs.

```jsx
const people = [
  {
    name: 'Calvin Hawkins',
    email: 'calvin.hawkins@example.com',
    image: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
  },
  {
    name: 'Kristen Ramos',
    email: 'kristen.ramos@example.com',
    image: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
  },
  {
    name: 'Ted Fox',
    email: 'ted.fox@example.com',
    image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
  },
]

export default function Example() {
  return (
    <ul className="divide-y divide-gray-200">
      {people.map((person) => (
        <li key={person.email} className="flex py-4">
          <img className="size-10 rounded-full" src={person.image} alt="" />
          <div className="ml-3">
            <p className="text-sm font-medium text-gray-900">{person.name}</p>
            <p className="text-sm text-gray-500">{person.email}</p>
          </div>
        </li>
      ))}
    </ul>
  )
}
```

--------------------------------

### <el-options>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/select

The options container that handles the popover behavior.

```APIDOC
## <el-options>

### Description
The options container that handles the popover behavior.

### Attributes
- **popover** (boolean) - Required to enable the popover behavior.
- **anchor** (string) - Configures the way the options are anchored to the button.
- **anchor-strategy** (string) - Sets the `position` CSS property of the popover to either`absolute` (default) or `fixed`.

### CSS variables
- **--anchor-gap** (string) - Sets the gap between the anchor and the popover.
- **--anchor-offset** (string) - Sets the distance that the popover should be nudged from its original position.

### Data attributes (Read-only)
- **data-closed** (boolean) - Present before transitioning in, and when transitioning out.
- **data-enter** (boolean) - Present when transitioning in.
- **data-leave** (boolean) - Present when transitioning out.
- **data-transition** (boolean) - Present when transitioning in or out.

### Methods
- **togglePopover()** - Toggles the options visibility.
- **showPopover()** - Shows the options.
- **hidePopover()** - Hides the options.
```

--------------------------------

### <el-command-list> Component

Source: https://tailwindcss.com/plus/ui-blocks/documentation/command-palette

Contains all the command items and groups. All focusable children will be considered options.

```APIDOC
## <el-command-list>

### Description
Contains all the command items and groups. All focusable children will be considered options.
```

--------------------------------

### <el-copyable>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/copy-button

Wraps the text content that should be copied to the clipboard when the copy command is triggered.

```APIDOC
## Component API

### <el-copyable>

Wraps the text content that should be copied to the clipboard when the copy command is triggered.

Commands  
---
`--copy`| Copies the text to the clipboard.
```

--------------------------------

### <el-command-preview> Component API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/command-palette

Optional preview content shown when a specific item is active.

```APIDOC
## <el-command-preview>

### Description
Optional preview content shown when a specific item is active.

### Attributes
- **for** (string) - The `id` of the item this preview content is associated with.
```

--------------------------------

### Enable Dark Mode and Set Background

Source: https://tailwindcss.com/plus/ui-blocks/documentation

Configure the `<html>` element for dark mode support by adding `dark:scheme-dark` and a dark background class. This ensures correct rendering of native UIs and sets a default dark background.

```html
<html class="bg-white dark:bg-gray-950 scheme-light dark:scheme-dark">
```

--------------------------------

### Dropdown Menu Component API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/dropdown-menu

API documentation for the `<el-dropdown>` and `<el-menu>` components used for creating dropdown menus.

```APIDOC
## Component API

### `<el-dropdown>`
Connects the button with the menu.

CSS variables  
--input-width| Provides the width of the input element (read-only).

### `<el-menu>`
Contains all the menu items. All focusable children will be considered options.

Attributes  
---
`popover`| Required to enable the popover behavior.
`open`| Controls the open/closed state of the menu.
`anchor`| Where to position the dropdown menu. Supports values like "bottom", "bottom-start", "bottom-end", etc.
`anchor-strategy`| Sets the `position` CSS property of the popover to either`absolute` (default) or `fixed`.

CSS variables  
`--anchor-gap`| Sets the gap between the anchor and the popover.
`--anchor-offset`| Sets the distance that the popover should be nudged from its original position.

Data attributes (Read-only)  
`data-closed`| Present before transitioning in, and when transitioning out.
`data-enter`| Present when transitioning in.
`data-leave`| Present when transitioning out.
`data-transition`| Present when transitioning in or out.

Methods  
`togglePopover()`| Toggles the menu visibility.
`showPopover()`| Shows the menu.
`hidePopover()`| Hides the menu.
```

--------------------------------

### <dialog>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/dialog

The native dialog element.

```APIDOC
## <dialog>

### Description
The native dialog element.

### Commands
- `show-modal` - Opens the dialog.
- `close` - Closes the dialog.
```

--------------------------------

### <el-options> Component API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/autocomplete

The options container handles the popover behavior for the autocomplete suggestions.

```APIDOC
## <el-options>

### Description
The options container that handles the popover behavior.

### Attributes
- `popover` (Required): Enables the popover behavior.
- `anchor`: Configures how the options are anchored to the button.
- `anchor-strategy`: Sets the `position` CSS property of the popover to either `absolute` (default) or `fixed`.

### CSS Variables
- `--anchor-gap`: Sets the gap between the anchor and the popover.
- `--anchor-offset`: Sets the distance the popover should be nudged from its original position.

### Data Attributes (Read-only)
- `data-closed`: Present before transitioning in, and when transitioning out.
- `data-enter`: Present when transitioning in.
- `data-leave`: Present when transitioning out.
- `data-transition`: Present when transitioning in or out.

### Methods
- `togglePopover()`: Toggles the options visibility.
- `showPopover()`: Shows the options.
- `hidePopover()`: Hides the options.
```

--------------------------------

### <el-select>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/select

Manages form integration and coordinates with its child components.

```APIDOC
## <el-select>

### Description
Manages form integration and coordinates with its child components.

### Attributes
- **name** (string) - The form field name for the select when used in forms.
- **value** (any) - The selected value of the select. Can be read and set programmatically.

### Events
- **input** - Dispatched when the selected option changes.
- **change** - Dispatched when the selected option changes.

### CSS variables (Read-only)
- **--input-width** (string) - Provides the width of the input element.
```

--------------------------------

### <el-dialog>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/dialog

Wrapper around the native <dialog> element used to manage the open state and transitions.

```APIDOC
## <el-dialog>

### Description
Wrapper around the native `<dialog>` element used to manage the open state and transitions.

### Attributes
- `open` (boolean) - Indicates whether the dialog is open or closed. Can be changed dynamically.

### Data attributes (Read-only)
- `data-closed` - Present before transitioning in, and when transitioning out.
- `data-enter` - Present when transitioning in.
- `data-leave` - Present when transitioning out.
- `data-transition` - Present when transitioning in or out.

### Events
- `open` - Dispatched when the dialog is opened in any way other than by updating the `open` attribute.
- `close` - Dispatched when the dialog is closed in any way other than by updating the `open` attribute.
- `cancel` - Dispatched when the user attempts to dismiss the dialog via Escape key or clicking outside. Calling `preventDefault()` prevents the dialog from closing.

### Methods
- `show()` - Shows the dialog in modal mode.
- `hide(options?: { restoreFocus?: boolean })` - Hides the dialog. Takes an optional object with a `restoreFocus` property to disable the default focus restoration.
```

--------------------------------

### <el-selectedcontent>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/select

Automatically displays the content of the currently selected option.

```APIDOC
## <el-selectedcontent>

### Description
Automatically displays the content of the currently selected option.
```

--------------------------------

### <el-dialog-backdrop>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/dialog

The visual backdrop behind your dialog panel.

```APIDOC
## <el-dialog-backdrop>

### Description
The visual backdrop behind your dialog panel.

### Data attributes (Read-only)
- `data-closed` - Present before transitioning in, and when transitioning out.
- `data-enter` - Present when transitioning in.
- `data-leave` - Present when transitioning out.
- `data-transition` - Present when transitioning in or out.
```

--------------------------------

### <el-defaults> Component

Source: https://tailwindcss.com/plus/ui-blocks/documentation/command-palette

Optional container for suggestion items that are shown when the input is empty.

```APIDOC
## <el-defaults>

### Description
Optional container for suggestion items that are shown when the input is empty.
```

--------------------------------

### <el-option>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/select

Individual selectable option within the select.

```APIDOC
## <el-option>

### Description
Individual selectable option within the select.

### Attributes
- **value** (any) - The value of the option (required for selection).
- **disabled** (boolean) - Whether the option is disabled.

### ARIA attributes (Read-only)
- **aria-selected** (boolean) - Present when the option is selected.
```

--------------------------------

### <el-tab-list>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/tabs

The container for tab buttons.

```APIDOC
## <el-tab-list>

### Description
The container for tab buttons.
```

--------------------------------

### <button>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/dialog

A button that opens the dialog when clicked.

```APIDOC
## <button>

### Description
A button that opens the dialog when clicked.

### ARIA attributes (Read-only)
- `aria-expanded` - Set to "true" when the dialog is open, "false" when closed.
```

--------------------------------

### <el-command-palette> Component API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/command-palette

The main command component that manages filtering and coordinates with its child components.

```APIDOC
## <el-command-palette>

### Description
The main command component that manages filtering and coordinates with its child components.

### Attributes
- **name** (string) - The form field name for the command when used in forms.
- **value** (any) - The selected value of the command. Can be read and set programmatically.

### Events
- **change** - Dispatched when the active item changes. Detail contains `relatedTarget` property with the active item or `null`.

### Methods
- **setFilterCallback(cb)** - Allows you to customize the filtering behavior of the command. The callback receives an object with `query`, `node` and `content` properties, and should return a `boolean`.
- **reset()** - Resets the command to its initial state.
```

--------------------------------

### <button>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/copy-button

A button that triggers the copy operation when clicked. It provides feedback on the copy status via data attributes.

```APIDOC
### <button>

A button that triggers the copy operation when clicked.

Data attributes (Read-only)  
---
`data-copied`| Present for two seconds after the text has been successfully copied.  
`data-error`| Present when the copy operation fails for whatever reason.
```

--------------------------------

### <el-command-group> Component

Source: https://tailwindcss.com/plus/ui-blocks/documentation/command-palette

Groups related command items together.

```APIDOC
## <el-command-group>

### Description
Groups related command items together.
```

--------------------------------

### <el-no-results> Component

Source: https://tailwindcss.com/plus/ui-blocks/documentation/command-palette

Optional element shown when no items match the current query.

```APIDOC
## <el-no-results>

### Description
Optional element shown when no items match the current query.
```

--------------------------------

### <el-tab-panels>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/tabs

The container for tab panels. All direct children are considered panels.

```APIDOC
## <el-tab-panels>

### Description
The container for tab panels. All direct children are considered panels.
```

--------------------------------

### <el-option> Component API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/autocomplete

Represents an individual selectable option within the autocomplete dropdown.

```APIDOC
## <el-option>

### Description
Individual selectable option within the autocomplete.

### Attributes
- `value` (Required): The value of the option (required for selection).
- `disabled`: Whether the option is disabled.

### ARIA Attributes (Read-only)
- `aria-selected`: Present when the option is selected.
```

--------------------------------

### <el-tab-group>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/tabs

The main container that coordinates the tabs and panels. It provides methods to control the active tab.

```APIDOC
## <el-tab-group>

### Description
The main container that coordinates the tabs and panels.

### Methods
#### `setActiveTab(index)`
Sets the active tab by index.

- **index** (number) - The index of the tab to set as active.
```

--------------------------------

### <button> Element API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/autocomplete

A button that toggles the options dropdown when clicked.

```APIDOC
## <button>

### Description
A button that toggles the options dropdown when clicked.

### ARIA Attributes (Read-only)
- `aria-expanded`: Set to "true" when the options dropdown is open, "false" when closed.
```

--------------------------------

### <el-autocomplete> Component API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/autocomplete

The main autocomplete component manages form integration, filtering, and coordinates with child components.

```APIDOC
## <el-autocomplete>

### Description
The main autocomplete component that manages form integration, filtering, and coordinates with its child components.

### CSS Variables (Read-only)
- `--input-width`: Provides the width of the input element.
- `--button-width`: Provides the width of the button element.
```

--------------------------------

### <el-popover> Component API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/popover

The <el-popover> component is used to display floating panels with arbitrary content. It supports various attributes for positioning and behavior, and emits events for interaction.

```APIDOC
## <el-popover>

### Description
Contains the content of the popover.

### Attributes
#### Path Parameters
- **anchor** (string) - Optional - Where to position the popover. Supports values like "bottom", "bottom-start", "bottom-end", etc.
- **anchor-strategy** (string) - Optional - Sets the `position` CSS property of the popover to either `absolute` (default) or `fixed`.

#### Data attributes (Read-only)
- **data-closed** (boolean) - Present before transitioning in, and when transitioning out.
- **data-enter** (boolean) - Present when transitioning in.
- **data-leave** (boolean) - Present when transitioning out.
- **data-transition** (boolean) - Present when transitioning in or out.

### Events
- **toggle** (CustomEvent) - Dispatched when the popover opens or closes.

### Methods
- **togglePopover()** - Toggles the popover visibility.
- **showPopover()** - Shows the popover.
- **hidePopover()** - Hides the popover.
```

--------------------------------

### <el-disclosure> Component API

Source: https://tailwindcss.com/plus/ui-blocks/documentation/disclosure

API details for the `<el-disclosure>` component, which manages the visibility of its content.

```APIDOC
## <el-disclosure>

### Description
Contains the content of the disclosure.

### Attributes
- `hidden` (boolean) - Whether the disclosure is initially hidden (closed).
- `open` (boolean) - Automatically synced with the `hidden` attribute.

### Data attributes (Read-only)
- `data-closed`: Present before transitioning in, and when transitioning out.
- `data-enter`: Present when transitioning in.
- `data-leave`: Present when transitioning out.
- `data-transition`: Present when transitioning in or out.

### Methods
- `show()`: Shows the disclosure.
- `hide()`: Hides the disclosure.
- `toggle()`: Toggles the disclosure.

### Commands
- `--show`: Shows the disclosure.
- `--hide`: Hides the disclosure.
- `--toggle`: Toggles the disclosure.
```

--------------------------------

### <el-dialog-panel>

Source: https://tailwindcss.com/plus/ui-blocks/documentation/dialog

The main content area of your dialog. Clicking outside of this will trigger the dialog to close.

```APIDOC
## <el-dialog-panel>

### Description
The main content area of your dialog. Clicking outside of this will trigger the dialog to close.

### Data attributes (Read-only)
- `data-closed` - Present before transitioning in, and when transitioning out.
- `data-enter` - Present when transitioning in.
- `data-leave` - Present when transitioning out.
- `data-transition` - Present when transitioning in or out.
```

--------------------------------

### Update Tailwind CSS

Source: https://tailwindcss.com/plus/ui-blocks/documentation

Ensure you are using the latest version of Tailwind CSS by updating via npm. This is a prerequisite for using Tailwind Plus components.

```bash
npm install tailwindcss@latest
```

--------------------------------

### Vue Hockey Team List Components

Source: https://tailwindcss.com/plus/ui-blocks/documentation/using-vue

Refactored Vue components for a hockey team list, separating the main list from individual team items. Demonstrates component breakdown for better project structure.

```vue
<!-- HockeyTeamList.vue -->
<template>
  <ul class="divide-y divide-gray-200">
    <HockeyTeamItem v-for="team in teams" :key="team.id" :team="team" />
  </ul>
</template>

<script setup>
  const { teams } = defineProps(['teams'])
</script>
```

```vue
<!-- HockeyTeamListItem.vue -->
<template>
  <li class="flex py-4">
    <img class="size-10 rounded-full" :src="team.logo" alt="" />
    <div class="ml-3">
      <p class="text-sm font-medium text-gray-900">{{ team.name }}</p>
      <p class="text-sm text-gray-500">{{ team.city }}</p>
    </div>
  </li>
</template>

<script setup>
  const { team } = defineProps(['team'])
</script>
```

--------------------------------

### <button> Element Interaction

Source: https://tailwindcss.com/plus/ui-blocks/documentation/disclosure

Details on how a button interacts with the disclosure component, specifically its ARIA attributes.

```APIDOC
## <button>

### Description
A button that triggers the disclosure when clicked.

### ARIA attributes (Read-only)
- `aria-expanded` (string) - Set to "true" when the disclosure is open, "false" when closed.
```

--------------------------------

### Add Inter Font Family via CDN

Source: https://tailwindcss.com/plus/ui-blocks/documentation

Include the Inter font using a CDN link in your HTML. This allows for consistent font rendering across browsers and operating systems.

```html
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
```

--------------------------------

### Configure Inter Font in Tailwind v3.x

Source: https://tailwindcss.com/plus/ui-blocks/documentation

For Tailwind CSS v3.x, configure the Inter font family in the `tailwind.config.js` file. This extends the default sans-serif font.

```javascript
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  // ...
}
```

--------------------------------

### <button> for Popover Toggling

Source: https://tailwindcss.com/plus/ui-blocks/documentation/popover

A button element can be used to toggle the visibility of a popover. It includes ARIA attributes for accessibility.

```APIDOC
## <button>

### Description
A button that toggles the popover when clicked.

### ARIA attributes (Read-only)
- **aria-expanded** (boolean) - Set to "true" when the popover is open, "false" when closed.
```

--------------------------------

### <el-popover-group> Component

Source: https://tailwindcss.com/plus/ui-blocks/documentation/popover

The <el-popover-group> component links related popovers to prevent them from closing when focus is moved between them.

```APIDOC
## <el-popover-group>

### Description
Links related popovers to prevent them from closing when focus is moved between them.
```

--------------------------------

### Configure Inter Font in Tailwind Theme

Source: https://tailwindcss.com/plus/ui-blocks/documentation

Set the Inter font as the default sans-serif font in your Tailwind theme configuration. This applies the custom font to your project.

```css
@theme {
  --font-sans: InterVariable, sans-serif;
  --font-sans--font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
```
Tokens:
Raw