> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Helpers

> Compose Tailwind classes and target components by id.

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:

```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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:

```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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:

```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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:

```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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](https://tailwindcss.com/docs/responsive-design) — 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:

```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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](/components/grid#responsive-columns) for an example.