CSS Helpers

Every Prefab component accepts a css_class prop for Tailwind styling and an id prop for targeting with custom CSS selectors.

Component IDs

The id prop sets the HTML id attribute on a component’s outermost element. This is useful when you need to target a specific component with custom CSS or anchor links:

from prefab_ui.components import Card, Column

Card(id="status-card", css_class="my-card-styles")
Column(id="sidebar")

For components that render multiple DOM elements, id is always applied to the outermost wrapper.

Tailwind Classes

A plain css_class string works fine until you start mixing hover states, focus rings, and breakpoints — then the prefixes pile up:

css_class="border-0 ring-0 p-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-b focus-visible:border-border hover:bg-muted"

The prefab_ui.css module provides helpers that eliminate the repetition.

Composing with Lists

css_class accepts a list of strings, joined with spaces at build time. This lets you group related concerns and mix in helpers without worrying about spacing:

from prefab_ui.css import FocusVisible, Hover

Input(css_class=[
    "border-0 ring-0 shadow-none p-0 h-auto",
    FocusVisible("ring-0 ring-offset-0 border-b border-border rounded-none"),
    Hover("bg-muted"),
])

Each helper returns a plain string — FocusVisible("border-b border-border") produces "focus-visible:border-b focus-visible:border-border". The list stitches everything together.

Variant Helpers

Each helper takes a string of space-separated classes and prefixes every one with its variant:

Helper	Prefix	Use case
`Hover(...)`	`hover:`	Mouse-over styles
`Focus(...)`	`focus:`	Focus ring / outline
`FocusVisible(...)`	`focus-visible:`	Keyboard-only focus
`FocusWithin(...)`	`focus-within:`	Parent has a focused child
`Active(...)`	`active:`	Mouse-down / tap
`Disabled(...)`	`disabled:`	Disabled state styles

Breakpoint Helpers

Same pattern, for responsive breakpoints:

from prefab_ui.css import Md, Lg

Button("Submit", css_class=["w-full", Md("w-auto"), Lg("w-1/2")])
# → "w-full md:w-auto lg:w-1/2"

Helper	Prefix	Min width
`Sm(...)`	`sm:`	640px
`Md(...)`	`md:`	768px
`Lg(...)`	`lg:`	1024px
`Xl(...)`	`xl:`	1280px
`Xxl(...)`	`2xl:`	1536px

These match Tailwind’s default breakpoints — each applies from that width and up.

Putting It Together

Variants and breakpoints compose freely. Here’s a card that adjusts padding at breakpoints, lifts on hover, and shows a focus ring for keyboard navigation:

from prefab_ui.css import Hover, FocusVisible, Md, Lg

Card(css_class=[
    "p-3 text-sm transition-shadow",
    Md("p-6 text-base"),
    Lg("p-8 text-lg"),
    Hover("shadow-lg"),
    FocusVisible("ring-2 ring-primary"),
])

Each line reads as a single concern — base styles, medium breakpoint, large breakpoint, hover, focus. No prefix repetition, and the list makes it easy to add or remove a line without touching the others.

Responsive Layout Props

Layout props like columns and gap accept a separate Responsive helper that translates values into the right Tailwind classes — see Responsive Columns for an example.

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Component IDs

Tailwind Classes

Composing with Lists

Variant Helpers

Breakpoint Helpers

Putting It Together

Responsive Layout Props

​Component IDs

​Tailwind Classes

​Composing with Lists

​Variant Helpers

​Breakpoint Helpers

​Putting It Together

​Responsive Layout Props

Component IDs

Tailwind Classes

Composing with Lists

Variant Helpers

Breakpoint Helpers

Putting It Together

Responsive Layout Props