#Class Syntax Basics

This page describes the general parsing rules for .class(...) strings. For usage instructions, see Atomic Class Support. For the complete list of layout classes, see Layout Class Syntax.

#Entry Point

use flor::view::builder::ClassBuilder;

view.class("flex gap-2 p-4");

ClassBuilder requires the class feature to be enabled. There is only one public entry point:

pub trait ClassBuilder<M> {
    fn class(self, class_str: M) -> Self;
}

M needs to implement ClassProp. Currently supported inputs include:

The closure form is re-evaluated by the reactive updater, suitable for scenarios where the class string depends on signals.

#Splitting Rules

The input string is split by whitespace characters:

"flex flex-col gap-2 p-4"

Will be split into:

flex
flex-col
gap-2
p-4

There is no quote escaping or preserving spaces within class tokens. If special characters are needed in values, use the bracket arbitrary value syntax.

#State Prefixes

Class tokens can have a state prefix:

Example:

.class("p-2 hover:p-4 focus:bg-blue-50 disabled:opacity-50")

State prefixes are only parsed one level deep. Combined prefixes like md:hover:p-4 or hover:focus:p-4 are not currently parsed as multiple states.

#Arbitrary Value Syntax

Many classes support bracket notation:

w-[320px]
rounded-[10px]
text-[#0f172a]
aspect-[16/9]

The parser removes the outer [ and ], then parses the value according to the corresponding property's syntax. Brackets are not supported for all classes; check the specific class documentation or view implementation.

#Length Values

Layout classes and some view style classes use unified length parsing.

Examples:

p-4
w-1/2
h-[240px]
mt-[1rem]
max-h-[80vh]

#Keywords

Different properties support different keywords. Common keywords include:

For the scope of layout class support for these keywords, see Layout Class Syntax. For view style class support, see the view library documentation for specific views.

#Color Values

View style classes using Flor's shared color parsing typically support:

Whether color parsing is used for a specific class is determined by the view. For example, whether text-blue-600 or bg-slate-100 works depends on whether the current view implements the corresponding style class.

#Shared Style Helper Syntax

Some views reuse these parsing functions:

These are shared parsing capabilities, not automatically supported by all views. Views must use these parsing results in their own class update logic.

#Processing Path

Class names passed to .class(...) go through these user-visible processing steps:

1. Split by whitespace into multiple class tokens.
2. z-* is handled as view layer level.
3. Other tokens are split into state and actual class name by state prefix.
4. The actual class name is passed to the view's style parsing logic.
5. The same batch of classes is also passed to the layout class parsing logic.

For specific layout class support, see Layout Class Syntax. For view style class support, see the view documentation or view source code.