1. Docs
  2. Tailwind

Flexilla - Tailwind Plugin

Simplified styling for Flexilla with variants and components

Introduction

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...
  ],
}

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>