Catalyst Switch not rendering properly

[xmonkee]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/switch
• Component name: Switch

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

The example in the docs does not render correctly

import { Description, Label } from '@/components/fieldset'
import { Switch, SwitchField } from '@/components/switch'

function Example() {
  return (
    <SwitchField>
      <Label>Allow embedding</Label>
      <Description>Allow others to embed your event details on their own site.</Description>
      <Switch name="allow_embedding" defaultChecked />
    </SwitchField>
  )
}

Expected behavior To render correctly

Screenshots

Browser/Device (if applicable)

• OS: MacOS
• Browser: Firefox
• Version: 120

[reinink]

Hey, happy to help out here!

It looks like you may not be on the latest version of Tailwind CSS. Catalyst requires the latest version of Tailwind CSS — tailwindcss@v3.4. We could definitely be more clear about this in our docs.

You can install this by running this in your Catalyst project:

npm install tailwindcss@latest

Tailwind CSS v3.4 comes with new size-* utilities — without this utility the switch renders like it does in your screenshot.

Hope that helps — let us know if you have any further issues 👍