- Docs
- UnoCSS
Flexilla UnoCSS Plugin
Simplified styling for Flexilla using UnoCSS with customizable state variants and components.
@flexilla/uno-preset
will no no longer be supported, if using it make sure to have the 0.0.4 version, npm i @flexilla/uno-preset@0.0.4
It will be moved to @unifydev/flexilla
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>