1. Docs
  2. UnoCSS

Flexilla UnoCSS Plugin

Simplified styling for Flexilla using UnoCSS with customizable state variants and components.

Introduction

The "@flexilla/uno-preset for UnoCSS provides simplified state-based variants and essential components, making styling easier and more efficient. By default, the state variants are prefixed with fx, but this can be customized based on your needs.
Instead of verbose attribute-based syntax like data-[state=open]:some-class, you can use concise, readable variants such as fx-open:some-class. Additionally, it offers pre-defined components like overlays, tab indicators, and animated modal content.

Installation

To get started, install the plugin using npm or yarn: 
npm install "@flexilla/uno-preset
Include it in your UnoCSS configuration: 
// uno.config.js
import { defineConfig } from 'unocss';
import flexilla from '"@flexilla/uno-preset';

export default defineConfig({
  presets: [
    flexilla({ prefix: 'fx' }), // you can customize the prefix here
  ],
});

Customization

You can easily customize the prefix used for state variants by passing options to the plugin. For example, to change the prefix to ui: 
import flexilla from '"@flexilla/uno-preset';

export default defineConfig({
  presets: [
    flexilla({ prefix: 'ui' }), // now use ui-open:some-class
  ],
});

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>