Styling

Fluid Primitives is completely unstyled. Use any CSS approach you prefer: Tailwind, vanilla CSS, Sass, PostCSS or whatever you like.

When you add a component via the typo3 ui:add <component> command, you get basic Tailwind styles as a starting point. If you don't use Tailwind, simply ask your AI to convert these classes to your preferred CSS syntax.

Data Attributes

Every component part has data-scope and data-part attributes for precise targeting:

<div data-scope="accordion" data-part="item" data-state="open"></div>

Interactive components also include state attributes like data-state, data-disabled, or data-focus.

Styling with CSS

Target by Part

[data-scope='accordion'][data-part='trigger'] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    font-weight: 500;
}

[data-scope='accordion'][data-part='content'] {
    padding: 1rem;
    overflow: hidden;
}

Target by State

[data-scope='accordion'][data-part='item'][data-state='open'] {
    background-color: var(--color-surface-hover);
}

[data-scope='accordion'][data-part='trigger'][data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

Combine Selectors

[data-scope='accordion'][data-part='trigger']:hover:not([data-disabled]) {
    background-color: var(--color-surface-hover);
}

[data-scope='accordion'][data-part='trigger']:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

Styling with Tailwind CSS

Pass classes directly to component parts:

<ui:accordion.root>
    <ui:accordion.item class="border-b border-gray-200">
        <ui:accordion.trigger class="flex w-full justify-between py-4 font-medium hover:underline"> Section Title </ui:accordion.trigger>
        <ui:accordion.content class="pb-4 text-gray-600"> Content goes here. </ui:accordion.content>
    </ui:accordion.item>
</ui:accordion.root>

State-Based Styling

Use Tailwind's data attribute variants:

<ui:accordion.item class="border-b data-[state=open]:bg-gray-50">
    <ui:accordion.trigger class="py-4 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"> ... </ui:accordion.trigger>
</ui:accordion.item>

Common State Variants

data-[state=open]:...
<!-- Open state (accordion, collapsible, dialog) -->
data-[state=closed]:...
<!-- Closed state -->
data-[state=active]:...
<!-- Active tab -->
data-[disabled]:...
<!-- Disabled state -->
data-[highlighted]:...
<!-- Keyboard-highlighted item (menus, selects) -->
data-[selected]:...
<!-- Selected item -->