Tables, SVG & Misc

Tables

sz prop	Tailwind class
{ borderCollapse: 'collapse' }	border-collapse
{ borderCollapse: 'separate' }	border-separate
{ borderSpacing: 2 }	border-spacing-2
{ tableLayout: 'fixed' }	table-fixed
{ tableLayout: 'auto' }	table-auto
{ caption: 'top' }	caption-top
{ caption: 'bottom' }	caption-bottom

table with border-collapse — collapsed borders between cells

Name	Value
alpha	1
beta	2

SVG Fill & Stroke

sz prop	Tailwind class
{ fill: 'current' }	fill-current
{ fill: 'blue-500' }	fill-blue-500
{ fill: 'none' }	fill-none
{ fill: '--my-color' }	fill-(--my-color)
{ stroke: 'current' }	stroke-current
{ stroke: 'blue-500' }	stroke-blue-500
{ strokeWidth: 0 }	stroke-0
{ strokeWidth: 1 }	stroke-1
{ strokeWidth: 2 }	stroke-2

SVG fill — circles with different fill colors

Columns (Multi-column Layout)

sz prop	Tailwind class
{ columns: 2 }	columns-2
{ columns: 3 }	columns-3
{ columns: 'auto' }	columns-auto
{ columns: 'sm' }	columns-sm
{ columns: 'lg' }	columns-lg
{ breakAfter: 'column' }	break-after-column
{ breakBefore: 'auto' }	break-before-auto
{ breakInside: 'avoid' }	break-inside-avoid

{ columns: 2 } — two-column text layout

First paragraph of content in a newspaper-style multi-column layout.

Second paragraph that flows naturally into the next column when needed.

Third paragraph continuing the layout.

Accessibility

sz prop	Tailwind class
{ srOnly: true }	sr-only
{ notSrOnly: true }	not-sr-only
{ forcedColors: { border: 2 } }	forced-colors:border-2

{ srOnly: true } — visually hidden but accessible to screen readers

Close dialog×sr-only text hidden visually, read by screen readers

Isolation & Container

sz prop	Tailwind class
{ isolate: true }	isolate
{ isolation: 'auto' }	isolation-auto
{ container: true }	container
{ prose: true }	prose
{ prose: 'lg' }	prose-lg
{ proseInvert: true }	prose-invert

CSS Variables & Custom Properties

sz prop	Tailwind class
{ '--my-var': '10px' }	[--my-var:10px]
{ color: '--text-primary' }	text-(--text-primary)
{ bg: '--brand-color' }	bg-(--brand-color)

Screen Reader

sz prop	Tailwind class
{ srOnly: true }	sr-only
{ notSrOnly: true }	not-sr-only

Examples

// Data table
<table sz={{ w: 'full', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
  <thead>
    <tr sz={{ borderB: 2, borderColor: 'gray-200' }}>
      <th sz={{ px: 4, py: 2, textAlign: 'left' }}>Name</th>
      <th sz={{ px: 4, py: 2, textAlign: 'right' }}>Value</th>
    </tr>
  </thead>
</table>

// Icon with SVG
<svg sz={{ fill: 'current', size: 5 }} viewBox="0 0 20 20">
  <path d="..." />
</svg>

// Newspaper-style multi-column layout
<article sz={{ columns: 2, gap: 8 }}>
  <p sz={{ breakInside: 'avoid' }}>Column content...</p>
</article>

// Screen reader only label
<span sz={{ srOnly: true }}>Close dialog</span>
<button aria-label="Close" sz={{ size: 8 }}>×</button>