Style Built-In Components

Add className to a Relevate component to adjust its outer element with Tailwind utilities.

Styled for emphasis

These utilities replace conflicting card defaults and keep the rest of the component styling intact.

<Card

  title="Styled for emphasis"

  icon="palette"

  className="my-8 rounded-none border-2 border-dashed border-violet-400 bg-violet-50 dark:!border-violet-700 dark:!bg-violet-950"

>

  These utilities override conflicting card defaults.

</Card>

How Classes Are Combined

Relevate merges your classes after the component defaults. When two Tailwind utilities conflict, the class in className wins. Non-conflicting defaults remain in place.

For example, rounded-none replaces a component's default rounded corners, while an added utility such as border-dashed is preserved alongside the remaining defaults.

Keep utilities as complete strings in your MDX or JSX so the compiler can include them in the generated stylesheet.

Scope

className styles the component's outer element. Use it for spacing, width, borders, backgrounds, radius, and other container-level changes. For interactive components imported from snippets/, use React's normal className prop inside the component.

<Columns cols={2} className="my-10 gap-8">

  <Card title="First">One</Card>

  <Card title="Second">Two</Card>

</Columns>
Full Image