1. Docs
  2. Tailwind

Flexilla Tailwind CSS

Style Flexilla components with Tailwind CSS using state variants and helper utilities.

Tailwind CSS works well with Flexilla because Flexilla exposes state through data-* attributes. You can either define the state variants yourself in Tailwind 4, or use the @flexilla/tailwind-plugin package in Tailwind 3 projects.

Tailwind 4

In Tailwind 4, you can define the variants you need directly in your CSS. 
@custom-variant fx-open (&[data-state="open"]);
@custom-variant fx-close (&[data-state="close"]);
@custom-variant fx-opened (&[data-state="opened"]);
@custom-variant fx-closed (&[data-state="closed"]);
@custom-variant fx-visible (&[data-state="visible"]);
@custom-variant fx-hidden (&[data-state="hidden"]);
@custom-variant fx-active (&[data-state="active"]);
@custom-variant fx-inactive (&[data-state="inactive"]);
@custom-variant fx-resized (&[data-resized="true"]);

@utility ui-popper {
  position: fixed;
  top: var(--fx-popper-placement-y);
  left: var(--fx-popper-placement-x);
}

@utility ui-overlay {
  position: fixed;
  inset: 0;
}

@utility ui-animated-modal-content {
  animation: var(--un-modal-animation);
  animation-fill-mode: both;
}

@utility ui-animated-tab-panel {
  animation: var(--un-tab-show-animation);
  animation-fill-mode: both;
}

@utility ui-tabs-indicator {
  position: absolute;
  transform-origin: 0 0;
  width: var(--un-tab-indicator-width);
  height: var(--un-tab-indicator-height);
  top: var(--un-tab-indicator-top);
  left: var(--un-tab-indicator-left);
}
You do not need every variant on day one. Start with the states your components actually use.

Tailwind 3

For Tailwind 3 projects, use @flexilla/tailwind-plugin.

Installation 

npm i -D @flexilla/tailwind-plugin

Setup 

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,html}",
  ],
  plugins: [
    require("@flexilla/tailwind-plugin"),
  ],
};

What the plugin gives you

The plugin provides:
  • state variants such as fx-open: and fx-active:
  • negative variants such as fx-not-open:
  • peer- and group- versions of those variants
  • helper utilities like ui-popper, ui-overlay, ui-animated-modal-content, ui-animated-tab-panel, and ui-tabs-indicator

Common variants

The plugin supports common states including:
  • fx-open
  • fx-close
  • fx-opened
  • fx-closed
  • fx-visible
  • fx-hidden
  • fx-active
  • fx-inactive
  • fx-resized
It also supports negated states such as:
  • fx-not-open
  • fx-not-visible
  • fx-not-active

Basic usage

Instead of writing raw attribute selectors, you can write normal Tailwind classes with Flexilla-aware variants. 
<div class="invisible opacity-0 transition fx-open:visible fx-open:opacity-100">
  Popover content
</div>

Group and peer usage 

<button class="group" data-state="active">
  <span class="group-fx-active:text-zinc-950">Current tab</span>
</button>
<div class="peer" data-state="open"></div>
<div class="hidden peer-fx-open:block">Shown when peer is open</div>

Helper utilities

ui-popper 

<div id="menu" class="ui-popper z-40 rounded-xl border border-zinc-200 bg-white p-3 shadow-xl">
  Dropdown content
</div>

ui-overlay 

<div data-modal-overlay class="ui-overlay bg-black/50 backdrop-blur-sm"></div>

ui-animated-modal-content 

<div data-modal-content class="ui-animated-modal-content rounded-2xl bg-white p-6 shadow-2xl">
  Modal content
</div>

ui-animated-tab-panel 

<div data-tab-panel class="ui-animated-tab-panel">
  Tab panel
</div>

ui-tabs-indicator 

<div class="ui-tabs-indicator rounded-full bg-zinc-900"></div>

Real example

This is a simple dropdown content block styled with Tailwind classes: 
<button data-dropdown-trigger data-dropdown-id="tailwind-menu" class="rounded-lg border border-zinc-300 px-4 py-2">
  Open menu
</button>

<div
  id="tailwind-menu"
  class="ui-popper invisible z-40 min-w-56 rounded-xl border border-zinc-200 bg-white p-3 opacity-0 shadow-xl transition fx-open:visible fx-open:opacity-100"
>
  <a href="#" class="block rounded-md px-3 py-2 hover:bg-zinc-100">Profile</a>
  <a href="#" class="block rounded-md px-3 py-2 hover:bg-zinc-100">Settings</a>
</div>

Choosing between Tailwind and plain CSS

  • Use Tailwind if your project already uses utility classes.
  • Use plain CSS if you want fewer moving parts.
  • In either case, keep your styling centered around the states Flexilla exposes.

Next step

Once Tailwind is configured, move to the component page you want to use and start from its required markup structure.