Tailwind-Styling

Komponenten sind „headless“ und nutzen semantische data-Attribute statt vordefinierter Klassen. So kannst du Layout/Design frei mit Tailwind v4 gestalten.

Wichtige Attribute

• Globales Kennzeichen: data-id="stratton"
• Komponenten: data-component="sc-…" (z. B. sc-dropdown, sc-table, sc-pagination, sc-toolbar …)
• Rollen/Ebenen: data-role="…" (z. B. panel, tablist, row, cell, submit, search, status …)
• Instanz-Scope: data-instance="…" – nutze es, um Styles einzugrenzen.

Beispiele

Panel im Dropdown stylen:

[data-component="sc-dropdown"] [data-role="panel"] {
  @apply rounded-xl border bg-white shadow-lg p-2;
}

Tabelle – Kopfzeile und klickbare Zeilen:

[data-component="sc-table"] [data-role~="head"] [data-role~="cell"] { @apply bg-gray-50 font-medium; }
[data-component="sc-table"] [data-role~="row"][data-clickable] { @apply cursor-pointer hover:bg-gray-50; }

Pagination – Buttons betonen:

[data-component="sc-pagination"] [data-role="pager"] button { @apply size-8 inline-grid place-items-center rounded-md hover:bg-gray-100; }

Scoped Styling mit Instanz:

[data-component="sc-toolbar"][data-instance="admin"] .sc-toolbar__btn { @apply text-[#1E3A8A]; }