Headless Ui

Keep the atomic JSX system headless. Components may define semantic structure, JavaScript behavior, state, and accessibility, but must not define UI appearance or look and feel. Do not put Tailwind utility classes or visual inline style declarations in JSX, including class fallbacks and class values passed through props. Expose semantic role and domain class names and implement visual decisions in the applicable site or panel styles.

Correct

export default props => <div className='item'>
    <Heading {...props} />
    <Content {...props} />
</div>
<Item class='video' />

Incorrect

export default props => <section style={{ color: 'red' }}>
    <Content {...props} />
</section>
<Item class='video w-full my-8' />

Exceptions

Write Tailwind sizing classes directly in Image.containerClass because the component reads them to calculate srcset.

Fix

Remove visual styling from JSX and implement it against semantic class names in theme CSS.