1. Docs
  2. Tailwind

Flexilla - Tailwind Plugin

Simplified styling for Flexilla with variants and components

Using Tailwind3

The @flexilla/tailwind-plugin provides simplified variants and essential components for styling elements in the Flexilla library. Instead of writing verbose attribute-based styling like data-[state=open]:some-class, this plugin introduces easy-to-use variants, such as fx-open:some-class. Additionally, it includes predefined components like overlays, tab indicators, and animated modal content for quick implementation of common UI features.

Installation

To get started, install the @flexilla/tailwind-plugin using npm or yarn: 
npm i -D @flexilla/tailwind-plugin
Then, include it in your TailwindCSS configuration: 
// tailwind.config.js
module.exports = {
  plugins: [
    require('@flexilla/tailwind-plugin'),
    // other plugins...
  ],
}

With Tailwind4

Just include these variants in your main tailwind config CSS file. 
@custom-variant fx-open (&[data-state="open"]);
@custom-variant fx-close (&[data-state="open"]);
@custom-variant fx-visible (&[data-state="open"]);
@custom-variant fx-hidden (&[data-state="open"]);
@custom-variant fx-opened (&[data-state="open"]);
@custom-variant fx-closed (&[data-state="open"]);
@custom-variant fx-resized (&[data-state="resized"]);
@custom-variant fx-active (&[data-state="active"]);
@custom-variant fx-inactive (&[data-state="inactive"]);
/* Remove unwanted variants or add others if needed */

Variants

The plugin offers a range of variants that allow you to conditionally style elements based on the data-state attribute. The variants are prefixed with fx- to make the syntax concise and easy to use.

Available State Variants

Here are the supported state variants:
  • fx-open : data-state=open
  • fx-closed : data-state=closed
  • fx-active
  • fx-inactive
  • fx-visible
  • fx-hidden
And their negations:
  • fx-not-open
  • fx-not-active
  • fx-not-visible
  • and more…

Example Usage

Instead of writing: 
<div class="data-[state=open]:bg-green-500"></div>
You can simply write: 
<div class="fx-open:bg-green-500"></div>
The plugin also supports peer- and group- variants, allowing you to target peer or grouped elements based on the same states: 
<div class="group">
    <div class="peer-fx-open:bg-blue-500 group-fx-active:text-white"></div>
</div>

Components

The @flexilla/tailwind-plugin also includes essential UI components, each with predefined styles to speed up your development.

Popper

The ui-popper component positions elements based on custom CSS variables: 
<div class="ui-popper">
  <!-- Popper content -->
</div>
For an absolute positioned popper, use: 
<div class="ui-popper-absolute">
  <!-- Popper content -->
</div>

Animated Modal Content

The ui-animated-modal-content class adds required styles in can you need to add animation to the modal content 
<div class="ui-animated-modal-content">
  <!-- Modal content -->
</div>

Animated Tab Panel

Use the ui-animated-tab-panel same as ui-animated-modal-content but for tabs transitions: 
<div class="ui-animated-tab-panel">
  <!-- Tab panel content -->
</div>

Tabs Indicator

For styling tab indicators, use the ui-tabs-indicator class. It allows for dynamic positioning and sizing through CSS variables: 
<div class="ui-tabs-indicator"></div>

Overlay

The ui-overlay provides a fixed overlay for modals or other UI elements: 
<div class="ui-overlay">
  <!-- Overlay content -->
</div>