` element and `RadioGroupDescription` renders a ``. These can be customized using the `as` prop, as described in the API docs below.
+
+```svelte
+
+
+ plan = e.detail}>
+
+ Plan
+
+
+ Startup
+
+ Up to 5 active job postings
+
+
+
+
+
+
+```
+
+## Accessibility notes
+
+### Mouse interaction
+
+Clicking a `RadioGroupOption` will select it.
+
+### Keyboard interaction
+
+| Command | Description |
+| ----------------------------------------------------------- | ------------------------------------------------------------------ |
+| `` / `` when `RadioGroup` is focused | Focuses and checks the next `RadioGroupOption` |
+| `` / `` when `RadioGroup` is focused | Focuses and checks the previous `RadioGroupOption` |
+| `` when `RadioGroup` is focused | Checks the current `RadioGroupOption` if it is not already checked |
+
+### Other
+
+All relevant ARIA attributes are automatically managed.
+
+For a full reference on all accessibility features implemented in `RadioGroup`, see the ARIA spec on Radio Groups .
+
+## Component API
+
+### RadioGroup
+
+The main Radio Group component.
+
+| Prop | Default | Type | Description |
+| ---------- | ------- | ------------------ | ------------------------------------------------------------------------ |
+| `as` | `div` | `string` | The element the `RadioGroup` should render as |
+| `disabled` | `false` | `boolean` | Whether the `RadioGroup` and all of its `RadioGroupOption`s are disabled |
+| `value` | -- | `T` \| `undefined` | The currently selected value in the `RadioGroup` |
+
+This component also dispatches a custom event, which is listened to using the Svelte `on:` directive:
+
+| Event name | Type of event `.detail` | Description |
+| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `change` | `T` | Dispatched when a `RadioGroupOption` is selected; the event `detail` contains the `value` of the selected option |
+
+### RadioGroupOption
+
+The wrapper component for each selectable option.
+
+| Prop | Default | Type | Description |
+| ---------- | ------- | ------------------ | ----------------------------------------------------------------------------------------------------------- |
+| `as` | `div` | `string` | The element the `RadioGroupOption` should render as |
+| `disabled` | `false` | `boolean` | Whether the `RadioGroupOption` is disabled |
+| `value` | -- | `T` \| `undefined` | The value of the `RadioGroupOption`; the type should match the type of the `value` prop in the `RadioGroup` |
+
+| Slot prop | Type | Description |
+| ---------- | --------- | ---------------------------------------------------------- |
+| `active` | `boolean` | Whether the option is active (using the mouse or keyboard) |
+| `checked` | `boolean` | Whether the option is the checked option |
+| `disabled` | `boolean` | Whether the option is disabled |
+
+### RadioGroupLabel
+
+Renders an element that is linked to its nearest `RadioGroup` or `RadioGroupOption` ancestor component via the `aria-labelledby` attribute and an autogenerated id.
+
+| Prop | Default | Type | Description |
+| ---- | ------- | -------- | -------------------------------------------------- |
+| `as` | `label` | `string` | The element the `RadioGroupLabel` should render as |
+
+If the `RadioGroupLabel` is labeling a `RadioGroupOption` (instead of the `RadioGroup`), it will also have these slot props available:
+
+| Slot prop | Type | Description |
+| ---------- | --------- | ------------------------------------------------------------------------ |
+| `active` | `boolean` | Whether the corresponding option is active (using the mouse or keyboard) |
+| `checked` | `boolean` | Whether the corresponding option is the checked option |
+| `disabled` | `boolean` | Whether the corresponding option is disabled |
+
+### RadioGroupDescription
+
+Renders an element that is linked to its nearest `RadioGroup` or `RadioGroupOption` ancestor component via the `aria-describedby` attribute and an autogenerated id.
+
+| Prop | Default | Type | Description |
+| ---- | ------- | -------- | -------------------------------------------------------- |
+| `as` | `a` | `string` | The element the `RadioGroupDescription` should render as |
+
+If the `RadioGroupDescription` is describing a `RadioGroupOption` (instead of the `RadioGroup`), it will also have these slot props available:
+
+| Slot prop | Type | Description |
+| ---------- | --------- | ------------------------------------------------------------------------ |
+| `active` | `boolean` | Whether the corresponding option is active (using the mouse or keyboard) |
+| `checked` | `boolean` | Whether the corresponding option is the checked option |
+| `disabled` | `boolean` | Whether the corresponding option is disabled |
diff --git a/src/routes/docs/switch.svx b/src/routes/docs/switch.svx
new file mode 100644
index 0000000..5c717d5
--- /dev/null
+++ b/src/routes/docs/switch.svx
@@ -0,0 +1,318 @@
+# Switch
+
+
+
+ (enabled = e.detail)}
+ class={enabled ? "switch switch-enabled" : "switch switch-disabled"}
+>
+ Enable notifications
+
+
+
+```
+
+## Styling
+
+[See here](general-concepts#component-styling) for some general notes on styling the components in this library.
+
+## Using a custom label
+
+By default, the `Switch` renders a `` as well as whatever children you pass into it. This can make it harder to implement certain UIs, since the children will be nested within the button.
+
+In these situations, you can use the `SwitchGroup` component for more flexibility.
+
+This example demonstrates how to use the `SwitchGroup`, `Switch`, and `SwitchLabel` components to render a label as a sibling to a button. Note that `SwitchLabel` is used alongside a `Switch`, and both must be rendered within a parent `SwitchGroup`.
+
+```svelte
+
+
+
+
+ Enable notifications
+ (enabled = e.detail)}
+ class={enabled ? "switch switch-enabled" : "switch switch-disabled"}
+ >
+ Enable notifications
+
+
+
+
+
+```
+
+By default, clicking a `SwitchLabel` will toggle the switch, just like labels in native HTML checkboxes do. If you'd like to make the label non-clickable (which you might if it doesn't make sense for your design), you can add a `passive` prop to the `SwitchLabel` component:
+
+```svelte
+
+
+
+ Enable notifications
+ (enabled = e.detail)}>
+
+
+
+```
+
+## Transitions
+
+Because switches are always rendered to the DOM (rather than being mounted/unmounted like other components in the library), there's generally no need to use the provided `Transition` component. You can just use CSS transitions or Svelte's transition directives:
+
+```svelte
+
+
+ (enabled = e.detail)}>
+
+
+
+
+
+```
+
+## Accessibility notes
+
+### Labels
+
+By default, the children of a `Switch` will be used as the label for screen readers. If you're using `SwitchLabel`, the content of your `Switch` component will be ignored by assistive technologies.
+
+### Mouse interaction
+
+Clicking a `Switch` or a `SwitchLabel` toggles the switch on and off.
+
+### Keyboard interaction
+
+When the `horizontal` prop is set, the `` and `` below become `` and ``:
+
+| Command | Description |
+| ------------------------------------ | ------------------ |
+| `` when a `Switch` is focused | Toggles the switch |
+
+### Other
+
+All relevant ARIA attributes are automatically managed.
+
+For a full reference on all accessibility features implemented in `Switch`, see the ARIA spec on Switch .
+
+## Component API
+
+### Switch
+
+The main switch component.
+
+| Prop | Default | Type | Description |
+| --------- | -------- | --------- | ----------------------------------------- |
+| `as` | `button` | `string` | The element the `Switch` should render as |
+| `checked` | `false` | `boolean` | Whether the switch is checked |
+
+| Slot prop | Type | Description |
+| --------- | --------- | ----------------------------- |
+| `checked` | `boolean` | Whether the switch is checked |
+
+This component also dispatches a custom event, which is listened to using the Svelte `on:` directive:
+
+| Event name | Type of event `.detail` | Description |
+| ---------- | ----------------------- | ---------------------------------------------------------------------------------------------- |
+| `change` | `T` | Dispatched when a `Switch` is toggled; the event `detail` contains the new value of the switch |
+
+### SwitchLabel
+
+A label that can be used for more control over the text your switch will announce to screenreaders. Renders an element that is linked to the `Switch` via the `aria-labelledby` attribute and an autogenerated id.
+
+| Prop | Default | Type | Description |
+| ---- | ------- | -------- | ---------------------------------------------- |
+| `as` | `label` | `string` | The element the `SwitchLabel` should render as |
+
+### SwitchDescription
+
+This is the description for your switch. When this is used, it will set the `aria-describedby` on the switch.
+
+| Prop | Default | Type | Description |
+| ---- | ------- | -------- | ---------------------------------------------------- |
+| `as` | `p` | `string` | The element the `SwitchDescription` should render as |
+
+| Slot prop | Type | Description |
+| --------- | --------- | --------------------------------- |
+| `open` | `boolean` | Whether or not the switch is open |
+
+### SwitchGroup
+
+Used to wrap a `Switch` together with a `SwitchLabel` and/or `SwitchDescription`
+
+| Prop | Default | Type | Description |
+| ---- | ------- | -------- | ---------------------------------------------- |
+| `as` | `div` | `string` | The element the `SwitchGroup` should render as |
diff --git a/src/routes/docs/tabs.svx b/src/routes/docs/tabs.svx
new file mode 100644
index 0000000..0c3af6c
--- /dev/null
+++ b/src/routes/docs/tabs.svx
@@ -0,0 +1,337 @@
+# Tabs
+
+
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+```
+
+## Styling
+
+[See here](general-concepts#component-styling) for some general notes on styling the components in this library.
+
+### The selected tab
+
+To style the active `Tab`, you can use the `selected` slot prop that it provides, which tells you whether or not that tab is currently selected. You can also access `selected` as an argument to a function passed to `class` ([see here](general-concepts#styling-the-components-themselves-class-and-style)). You can use this state to conditionally apply whatever styles you wish.
+
+```svelte
+
+
+
+
+ "tab-selected" : "tab-unselected"}>Tab 1
+
+
+
+ Content 1
+
+
+
+
+
+```
+
+## Disabling a tab
+
+To disable a tab, use the `disabled` prop on the `Tab` component. Disabled tabs cannot be selected with the mouse, and are also skipped when navigating the tab list using the keyboard.
+
+```svelte
+
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+```
+
+## Manually activating tabs
+
+By default, tabs are automatically selected as the user navigates through them using the arrow keys.
+
+If you'd rather not change the current tab until the user presses Enter or Space, use the `manual` prop on the `TabGroup` component. This can be helpful if selecting a tab performs an expensive operation and you don't want to run it unnecessarily.
+
+```svelte
+
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+```
+
+The `manual` prop has no impact on mouse interactions; tabs will still be selected as soon as they are clicked.
+
+## Vertical tabs
+
+If you've styled your `TabList` to appear vertically, use the `vertical` prop to enable navigating with the up and down arrow keys instead of with the left and right arrows, and to update the `aria-orientation` attribute for assistive technologies.
+
+```svelte
+
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+```
+
+## Specifying the default tab
+
+To change which tab is selected by default, use the `defaultIndex={number}` prop on the `TabGroup` component.
+
+```svelte
+
+
+
+
+
+ Tab 1
+
+
+ Tab 2
+
+ Tab 3
+
+
+ Content 1
+
+
+ Content 2
+
+ Content 3
+
+
+```
+
+If you happen to provide an index that is out of bounds, then the last non-disabled tab will be selected on initial render. For example, `` in the above example would select Tab 3.
+
+## Listening for changes
+
+To run a function whenever the selected tab changes, use the `change` event on the `TabGroup` component.
+
+```svelte
+
+
+ console.log("Changed selected tab to:", e.detail)}>
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+```
+
+## Accessibility notes
+
+### Mouse interaction
+
+Clicking a `Tab` will select that tab and display the corresponding `TabPanel`.
+
+### Keyboard interaction
+
+All interactions apply when a `Tab` component is focused.
+
+| Command | Description |
+| -------------------------------------------------- | ------------------------------------------ |
+| `` / `` | Selects the previous/next non-disabled tab |
+| `` / `` when `vertical` is set | Selects the previous/next non-disabled tab |
+| `` / `` | Selects the first non-disabled tab |
+| `` / `` | Selects the last non-disabled tab |
+| `` / `` when `manual` is set | Activates the selected tab |
+
+### Other
+
+All relevant ARIA attributes are automatically managed.
+
+For a full reference on all accessibility features implemented in `Tab`, see the ARIA spec on Tabs .
+
+## Component API
+
+### TabGroup
+
+The main tab group component.
+
+| Prop | Default | Type | Description |
+| -------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `as` | `div` | `string` | The element the `TabGroup` should render as |
+| `defaultIndex` | `0` | `number` | The index of the default selected tab |
+| `vertical` | `false` | `boolean` | Whether the orientation of the `TabList` is vertical instead of horizontal |
+| `manual` | `false` | `boolean` | Whether, in keyboard navigation, the `Enter` or `Space` key is necessary to change tabs. By default, the arrow keys will change tabs automatically without hitting `Enter`/`Space`. This has no impact on mouse behavior |
+
+| Slot prop | Type | Description |
+| --------------- | -------- | ---------------------------- |
+| `selectedIndex` | `number` | The currently selected index |
+
+This component also dispatches a custom event, which is listened to using the Svelte `on:` directive:
+
+| Event name | Type of event `.detail` | Description |
+| ---------- | ----------------------- | --------------------------------------- |
+| `change` | `number` | Emitted whenever the active tab changes |
+
+### TabList
+
+The container for `Tab` components. The order of the `Tab` components it contains must correspond to the order of the `TabPanels`.
+
+| Prop | Default | Type | Description |
+| ---- | ------- | -------- | ------------------------------------------ |
+| `as` | `div` | `string` | The element the `TabList` should render as |
+
+| Slot prop | Type | Description |
+| --------------- | -------- | ---------------------------- |
+| `selectedIndex` | `number` | The currently selected index |
+
+### Tab
+
+This component wraps the selector for an individual tab. All `Tab`s will be rendered at once.
+
+| Prop | Default | Type | Description |
+| ---------- | -------- | --------- | --------------------------------------- |
+| `as` | `button` | `string` | The element the `Tab` should render as |
+| `disabled` | `false` | `boolean` | Whether the `Tab` is currently disabled |
+
+| Slot prop | Type | Description |
+| ---------- | --------- | --------------------------------------- |
+| `selected` | `boolean` | Whether the `Tab` is currently selected |
+
+### TabPanels
+
+The container for `TabPanel` components. The order of the `TabPanel` components it contains must correspond to the order of the `TabList`.
+
+| Prop | Default | Type | Description |
+| ---- | ------- | -------- | -------------------------------------------- |
+| `as` | `div` | `string` | The element the `TabPanels` should render as |
+
+| Slot prop | Type | Description |
+| --------------- | -------- | ---------------------------- |
+| `selectedIndex` | `number` | The currently selected index |
+
+### TabPanel
+
+This component wraps the contents of an individual tab. Only one `TabPanel` will be visible at once.
+
+| Prop | Default | Type | Description |
+| ---- | ------- | -------- | ------------------------------------------- |
+| `as` | `div` | `string` | The element the `TabPanel` should render as |
+
+| Slot prop | Type | Description |
+| ---------- | --------- | --------------------------------------------------- |
+| `selected` | `boolean` | Whether or not the `TabPanel` is currently selected |
diff --git a/src/routes/docs/tailwind-ui.svx b/src/routes/docs/tailwind-ui.svx
new file mode 100644
index 0000000..50e4ced
--- /dev/null
+++ b/src/routes/docs/tailwind-ui.svx
@@ -0,0 +1,284 @@
+# Using Tailwind UI
+
+The original Headless UI libraries for React & Vue were made by Tailwind Labs in order to serve as a foundation for [Tailwind UI](https://tailwindui.com/), a paid set of component templates. While this Svelte port has no affiliation with Tailwind Labs or Tailwind UI, one of the main motivations behind it is to make it easy to use Tailwind UI with Svelte. This page contains tips and instructions for converting their provided snippets to work with Svelte.
+
+You can convert either the React or the Vue templates to Svelte, if you are more familiar with one or the other framework. If you are unfamiliar with both React and Vue, below are some more comprehensive instructions for converting the React snippets.
+
+## General concerns
+
+### Heroicons
+
+Many Tailwind UI examples use the [heroicons](https://heroicons.com/) icon library. This library has official wrappers for React and Vue, but not for Svelte. For Svelte, you can use the wrapper library [@rgossiaux/svelte-heroicons](https://github.com/rgossiaux/svelte-heroicons), which provides the same API and component names as the official Tailwind wrappers, making it faster to convert Tailwind UI code to Svelte. Of course, you are free to use any other library you wish instead, if you prefer.
+
+## Differences from React
+
+### Component names
+
+The React library uses a `.` in the names of many components: `Tab.Group`, `Listbox.Button`, etc. The Svelte library does not use this pattern and instead exports every component under its own name with no dot: `TabGroup`, `ListboxButton`, etc.
+
+### `useState`
+
+State declared with `useState` in React becomes just a normal variable in Svelte:
+
+```jsx
+import { useState } from 'react'
+import { Switch } from '@headlessui/react'
+
+function MyToggle() {
+ const [enabled, setEnabled] = useState(false)
+
+ return (
+
+ // ...
+
+ )
+}
+```
+
+becomes
+
+```svelte
+
+
+ enabled = e.detail}>
+
+
+```
+
+### JSX camelCased attribute names
+
+In React, some HTML attributes have different names from the standard ones that are used in Svelte. These are covered in the [React documentation](https://reactjs.org/docs/dom-elements.html#differences-in-attributes), but we repeat the most important differences here:
+
+* `className` in React becomes `class` in Svelte
+* `htmlFor` in React becomes `for` in Svelte
+* SVG attributes in React like `strokeWidth`, `strokeLinecap`, etc. become `stroke-width`, `stroke-linecap`, etc. in Svelte
+
+### Event handlers
+
+In React, you pass event handlers using camelCased names:
+
+```jsx
+import { useState } from 'react'
+import { Dialog } from '@headlessui/react'
+
+function MyDialog() {
+ let [isOpen, setIsOpen] = useState(true)
+
+ return (
+ setIsOpen(false)}>
+ Deactivate account
+
+ This will permanently deactivate your account
+
+
+
+ Are you sure you want to deactivate your account? All of your data will
+ be permanently removed. This action cannot be undone.
+
+
+ setIsOpen(false)}>Deactivate
+ setIsOpen(false)}>Cancel
+
+ )
+}
+```
+
+In Svelte, you instead use the `on:` directive:
+
+```svelte
+
+
+ (isOpen = false)}>
+ Deactivate account
+
+ This will permanently deactivate your account
+
+
+
+ Are you sure you want to deactivate your account? All of your data will be
+ permanently removed. This action cannot be undone.
+
+
+ (isOpen = false)}>Deactivate
+ (isOpen = false)}>Cancel
+
+```
+
+Furthermore, in the React library, event handlers will be called with the their data directly:
+
+```jsx
+
+ // ...
+
+```
+
+In the Svelte version, your handler will be passed a `CustomEvent` object, and you need to look at its `.detail` property:
+```svelte
+ selectedPerson = e.detail}>
+
+
+```
+
+### Render props
+
+The React components make use of render props:
+
+```jsx
+
+ {({ close }) => (
+ {
+ await fetch('/accept-terms', { method: 'POST' });
+ close();
+ }}
+ >
+ Read and accept
+
+ )}
+
+```
+
+The Svelte equivalent of this pattern is to use [slot props](https://svelte.dev/tutorial/slot-props):
+
+```svelte
+
+ {
+ await fetch('/accept-terms', { method: 'POST' })
+ close()
+ }}
+ >
+ Read and accept
+
+
+```
+
+### Conditional rendering
+
+The standard way to do conditional rendering in React is with the `&&` operator:
+
+```jsx
+
+ {({ open }) => (
+ <>
+ Is team pricing available?
+
+ {open && (
+
+ {/*
+ Using `static`, `Disclosure.Panel` is always rendered and
+ ignores the `open` state.
+ */}
+ {/* ... */}
+
+ )}
+
+ )}
+
+```
+
+In Svelte, you use the `{#if}` templating syntax instead:
+
+```svelte
+
+ Is team pricing available?
+
+ {#if open}
+
+
+
+
+
+ {/if}
+
+```
+
+### Iteration / mapping
+
+Tailwind UI frequenty does iteration using `Array.prototype.map()`:
+
+```jsx
+
+ {selectedPerson.name}
+
+ {people.map((person) => (
+
+ {person.name}
+
+ ))}
+
+
+```
+
+In Svelte, you accomplish this by using the `{#each}` template syntax:
+
+```svelte
+ selectedPerson = e.detail}>
+ {selectedPerson.name}
+
+ {#each people as person (person.id)}
+
+ {person.name}
+
+ {/each}
+
+
+```
+
+Note that the key moves from the `key=` prop in React into the `{#each}` statement in Svelte. Don't forget to add this!
+
+### Using a dynamic component
+
+In React, you can use a variable as a tag name:
+
+```jsx
+{solutions.map((item) => (
+ // ...
+ ` instead:
+
+```jsx
+{#each solutions as item}
+
+ (show = !show)}> Toggle
+
+ I will fade in and out
+
+```
+
+## Showing and hiding content
+
+Wrap the content that should be conditionally rendered in a `Transition` component, and use the `show` prop to control whether the content should be visible or hidden.
+
+```svelte
+
+
+ (show = !show)}> Toggle
+I will appear and disappear
+```
+
+The `Transition` component will render a `div` by default, but you can use the `as` prop to render a different element instead if needed. Any other HTML attributes (like `class` or `style`) can be added directly to the `Transition` the same way they would be for regular HTML elements.
+
+```svelte
+
+
+ (show = !show)}> Toggle
+
+ I will appear and disappear
+
+```
+
+## Animating transitions
+
+By default, a `Transition` will enter and leave instantly, which is probably not what you're looking for if you're using this component.
+
+To animate your enter/leave transitions, add classes that provide the styling for each phase of the transitions using these props:
+
+- `enter`: Applied the entire time an element is entering. Usually you define your duration and what properties you want to transition here: `transition-opacity duration-75`, for example.
+
+- `enterFrom`: The starting point to enter from, like `opacity-0` if something should fade in.
+
+- `enterTo`: The ending point to enter to, like `opacity-100` after fading in.
+
+- `leave`: Applied the entire time an element is leaving. Usually you define your duration and what properties you want to transition here: `transition-opacity duration-75`, for example.
+
+- `leaveFrom`: The starting point to leave from, like `opacity-100` if something should fade out.
+
+- `leaveTo`: The ending point to leave to, like `opacity-0` after fading out.
+
+Here's an example:
+
+```svelte
+
+
+ (show = !show)}> Toggle
+
+ I will fade in and out
+
+```
+
+In this example, the transitioning element will take 75ms to enter (that's the `duration-75` class), and will transition the opacity property during that time (that's `transition-opacity`).
+
+It will start completely transparent before entering (that's `opacity-0` in the `enterFrom` phase), and fade in to completely opaque (`opacity-100`) when finished (that's the `enterTo` phase).
+
+When the element is being removed (the `leave` phase), it will transition the opacity property, and spend 150ms doing it (`transition-opacity duration-150`).
+
+It will start as completely opaque (the `opacity-100` in the `leaveFrom` phase), and finish as completely transparent (the `opacity-0` in the `leaveTo` phase).
+
+All of these props are optional, and will default to just an empty string.
+
+## Coordinating multiple transitions
+
+Sometimes you need to transition multiple elements with different animations but all based on the same state. For example, say the user clicks a button to open a sidebar that slides over the screen, and you also need to fade-in a background overlay at the same time.
+
+You can do this by wrapping the related elements with a parent `Transition` component, and wrapping each child that needs its own transition styles with a `TransitionChild` component, which will automatically communicate with the parent `Transition` and inherit the parent's `show` state.
+
+```svelte
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+The `TransitionChild` component has the exact same API as the `Transition` component, but with no `show` prop, since the `show` value is controlled by the parent.
+
+Parent `Transition` components will always automatically wait for all children to finish transitioning before unmounting, so you don't need to manage any of that timing yourself.
+
+## Transitioning on initial mount
+
+If you want an element to transition the very first time it's rendered, set the `appear` prop to `true`.
+
+This is useful if you want something to transition in on initial page load, or when its parent is conditionally rendered.
+
+```svelte
+
+
+
+
+
+```
+
+## Component API
+
+### Transition
+
+| Prop | Default | Type | Description |
+| ----------- | ------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `show` | -- | `boolean` | Whether the children should be shown or hidden |
+| `as` | `div` | `string` | The element the `Transition` should render as |
+| `static` | `false` | `boolean` | Whether the element should ignore the internally managed open/closed state |
+| `unmount` | `true` | `boolean` | Whether the element should be unmounted, instead of just hidden, based on the open/closed state |
+| `enter` | `""` | `string` | Classes to add to the transitioning element during the entire enter phase |
+| `enterFrom` | `""` | `string` | Classes to add to the transitioning element before the enter phase starts |
+| `enterTo` | `""` | `string` | Classes to add to the transitioning element immediately after the enter phase starts |
+| `entered` | `""` | `string` | Classes to add to the transitioning element once the transition is done. These classes will persist after that until the `leave` phase |
+| `leave` | `""` | `string` | Classes to add to the transitioning element during the entire leave phase |
+| `leaveFrom` | `""` | `string` | Classes to add to the transitioning element before the leave phase starts |
+| `leaveTo` | `""` | `string` | Classes to add to the transitioning element immediately after the leave phase starts |
+
+This component also dispatches the following custom events, which are listened to using the Svelte `on:` directive:
+
+| Event name | Type of event `.detail` | Description |
+| ------------- | ----------------------- | ----------------------------------------------- |
+| `beforeEnter` | `null` | Dispatched before we start the enter transition |
+| `afterEnter` | `null` | Dispatched after we finish the enter transition |
+| `beforeLeave` | `null` | Dispatched before we start the leave transition |
+| `afterLeave` | `null` | Dispatched after we finish the leave transition |
+
+### TransitionChild
+
+| Prop | Default | Type | Description |
+| ----------- | ------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `as` | `div` | `string` | The element the `Transition` should render as |
+| `static` | `false` | `boolean` | Whether the element should ignore the internally managed open/closed state |
+| `unmount` | `true` | `boolean` | Whether the element should be unmounted, instead of just hidden, based on the open/closed state |
+| `enter` | `""` | `string` | Classes to add to the transitioning element during the entire enter phase |
+| `enterFrom` | `""` | `string` | Classes to add to the transitioning element before the enter phase starts |
+| `enterTo` | `""` | `string` | Classes to add to the transitioning element immediately after the enter phase starts |
+| `entered` | `""` | `string` | Classes to add to the transitioning element once the transition is done. These classes will persist after that until the `leave` phase |
+| `leave` | `""` | `string` | Classes to add to the transitioning element during the entire leave phase |
+| `leaveFrom` | `""` | `string` | Classes to add to the transitioning element before the leave phase starts |
+| `leaveTo` | `""` | `string` | Classes to add to the transitioning element immediately after the leave phase starts |
+
+This component also dispatches the following custom events, which are listened to using the Svelte `on:` directive:
+
+| Event name | Type of event `.detail` | Description |
+| ------------- | ----------------------- | ----------------------------------------------- |
+| `beforeEnter` | `null` | Dispatched before we start the enter transition |
+| `afterEnter` | `null` | Dispatched after we finish the enter transition |
+| `beforeLeave` | `null` | Dispatched before we start the leave transition |
+| `afterLeave` | `null` | Dispatched after we finish the leave transition |
diff --git a/src/routes/docs/version-history.svx b/src/routes/docs/version-history.svx
new file mode 100644
index 0000000..ec4306e
--- /dev/null
+++ b/src/routes/docs/version-history.svx
@@ -0,0 +1,15 @@
+
+This is the release history of Svelte Headless UI and the correspondence with versions of Headless UI.
+
+| Svelte Headless UI version | Date released | Headless UI version | Notes |
+| -------------------------- | ------------- | ------------------- | ----- |
+| 1.0.0-beta.10 | 2022-02-27 | 1.4.2 | |
+| 1.0.0-beta.9 | 2022-02-06 | 1.4.2 | |
+| 1.0.0-beta.8 | 2022-01-21 | 1.4.2 | |
+| 1.0.0-beta.7 | 2021-12-31 | 1.4.2 | |
+| 1.0.0-beta.6 | 2021-12-29 | 1.4.2 | |
+| 1.0.0-beta.5 | 2021-12-28 | 1.4.2 | |
+| 1.0.0-beta.4 | 2021-12-26 | 1.4.2 | |
+| 1.0.0-beta.3 | 2021-12-24 | 1.4.2 | Initial public release |
+
+Full release notes and changelogs can be [found on GitHub](https://github.com/tailwindlabs/headlessui/releases).
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 4ba7b2a..d8f014f 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,4 +1,8 @@
-Welcome to SvelteKit
-
- Visit kit.svelte.dev to read the documentation
-
+
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 825b9e6..0000000
Binary files a/static/favicon.png and /dev/null differ
diff --git a/static/favicon.svg b/static/favicon.svg
new file mode 100644
index 0000000..a7aaebe
--- /dev/null
+++ b/static/favicon.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/static/prism-ghcolors.css b/static/prism-ghcolors.css
new file mode 100644
index 0000000..01819a8
--- /dev/null
+++ b/static/prism-ghcolors.css
@@ -0,0 +1,122 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by Github syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: #393A34;
+ font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ font-size: .9em;
+ line-height: 1.2em;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre > code[class*="language-"] {
+ font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+ background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+ background: #b3d4fc;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+ border: 1px solid #dddddd;
+ background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .2em;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ background: #f8f8f8;
+ border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #999988;
+ font-style: italic;
+}
+
+.token.namespace {
+ opacity: .7;
+}
+
+.token.string,
+.token.attr-value {
+ color: #e3116c;
+}
+
+.token.punctuation,
+.token.operator {
+ color: #393A34; /* no highlight */
+}
+
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+ color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+ color: #00a4db;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+ color: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+ color: #00009f;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
diff --git a/static/prism-one-light.css b/static/prism-one-light.css
new file mode 100644
index 0000000..44cd70f
--- /dev/null
+++ b/static/prism-one-light.css
@@ -0,0 +1,434 @@
+/**
+ * One Light theme for prism.js
+ * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
+ */
+
+/**
+ * One Light colours (accurate as of commit eb064bf on 19 Feb 2021)
+ * From colors.less
+ * --mono-1: hsl(230, 8%, 24%);
+ * --mono-2: hsl(230, 6%, 44%);
+ * --mono-3: hsl(230, 4%, 64%)
+ * --hue-1: hsl(198, 99%, 37%);
+ * --hue-2: hsl(221, 87%, 60%);
+ * --hue-3: hsl(301, 63%, 40%);
+ * --hue-4: hsl(119, 34%, 47%);
+ * --hue-5: hsl(5, 74%, 59%);
+ * --hue-5-2: hsl(344, 84%, 43%);
+ * --hue-6: hsl(35, 99%, 36%);
+ * --hue-6-2: hsl(35, 99%, 40%);
+ * --syntax-fg: hsl(230, 8%, 24%);
+ * --syntax-bg: hsl(230, 1%, 98%);
+ * --syntax-gutter: hsl(230, 1%, 62%);
+ * --syntax-guide: hsla(230, 8%, 24%, 0.2);
+ * --syntax-accent: hsl(230, 100%, 66%);
+ * From syntax-variables.less
+ * --syntax-selection-color: hsl(230, 1%, 90%);
+ * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
+ * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ background: hsl(230, 1%, 98%);
+ color: hsl(230, 8%, 24%);
+ font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono",
+ monospace;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ line-height: 1.5;
+ -moz-tab-size: 2;
+ -o-tab-size: 2;
+ tab-size: 2;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Selection */
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] *::-moz-selection,
+pre[class*="language-"] *::-moz-selection {
+ background: hsl(230, 1%, 90%);
+ color: inherit;
+}
+
+code[class*="language-"]::selection,
+code[class*="language-"] *::selection,
+pre[class*="language-"] *::selection {
+ background: hsl(230, 1%, 90%);
+ color: inherit;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: 0.5em 0;
+ overflow: auto;
+ border-radius: 0.3em;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: 0.2em 0.3em;
+ border-radius: 0.3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+ color: hsl(230, 4%, 64%);
+}
+
+.token.doctype,
+.token.punctuation,
+.token.entity {
+ color: hsl(230, 8%, 24%);
+}
+
+.token.attr-name,
+.token.class-name,
+.token.boolean,
+.token.constant,
+.token.number,
+.token.atrule {
+ color: hsl(35, 99%, 36%);
+}
+
+.token.keyword {
+ color: hsl(301, 63%, 40%);
+}
+
+.token.property,
+.token.tag,
+.token.symbol,
+.token.deleted,
+.token.important {
+ color: hsl(5, 74%, 59%);
+}
+
+.token.selector,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted,
+.token.regex,
+.token.attr-value,
+.token.attr-value > .token.punctuation {
+ color: hsl(119, 34%, 47%);
+}
+
+.token.variable,
+.token.operator,
+.token.function {
+ color: hsl(221, 87%, 60%);
+}
+
+.token.url {
+ color: hsl(198, 99%, 37%);
+}
+
+/* HTML overrides */
+.token.attr-value > .token.punctuation.attr-equals,
+.token.special-attr > .token.attr-value > .token.value.css {
+ color: hsl(230, 8%, 24%);
+}
+
+/* CSS overrides */
+.language-css .token.selector {
+ color: hsl(5, 74%, 59%);
+}
+
+.language-css .token.property {
+ color: hsl(230, 8%, 24%);
+}
+
+.language-css .token.function,
+.language-css .token.url > .token.function {
+ color: hsl(198, 99%, 37%);
+}
+
+.language-css .token.url > .token.string.url {
+ color: hsl(119, 34%, 47%);
+}
+
+.language-css .token.important,
+.language-css .token.atrule .token.rule {
+ color: hsl(301, 63%, 40%);
+}
+
+/* JS overrides */
+.language-javascript .token.operator {
+ color: hsl(301, 63%, 40%);
+}
+
+.language-javascript
+ .token.template-string
+ > .token.interpolation
+ > .token.interpolation-punctuation.punctuation {
+ color: hsl(344, 84%, 43%);
+}
+
+/* JSON overrides */
+.language-json .token.operator {
+ color: hsl(230, 8%, 24%);
+}
+
+.language-json .token.null.keyword {
+ color: hsl(35, 99%, 36%);
+}
+
+/* MD overrides */
+.language-markdown .token.url,
+.language-markdown .token.url > .token.operator,
+.language-markdown .token.url-reference.url > .token.string {
+ color: hsl(230, 8%, 24%);
+}
+
+.language-markdown .token.url > .token.content {
+ color: hsl(221, 87%, 60%);
+}
+
+.language-markdown .token.url > .token.url,
+.language-markdown .token.url-reference.url {
+ color: hsl(198, 99%, 37%);
+}
+
+.language-markdown .token.blockquote.punctuation,
+.language-markdown .token.hr.punctuation {
+ color: hsl(230, 4%, 64%);
+ font-style: italic;
+}
+
+.language-markdown .token.code-snippet {
+ color: hsl(119, 34%, 47%);
+}
+
+.language-markdown .token.bold .token.content {
+ color: hsl(35, 99%, 36%);
+}
+
+.language-markdown .token.italic .token.content {
+ color: hsl(301, 63%, 40%);
+}
+
+.language-markdown .token.strike .token.content,
+.language-markdown .token.strike .token.punctuation,
+.language-markdown .token.list.punctuation,
+.language-markdown .token.title.important > .token.punctuation {
+ color: hsl(5, 74%, 59%);
+}
+
+/* General */
+.token.bold {
+ font-weight: bold;
+}
+
+.token.comment,
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+.token.namespace {
+ opacity: 0.8;
+}
+
+/* Plugin overrides */
+/* Selectors should have higher specificity than those in the plugins' default stylesheets */
+
+/* Show Invisibles plugin overrides */
+.token.token.tab:not(:empty):before,
+.token.token.cr:before,
+.token.token.lf:before,
+.token.token.space:before {
+ color: hsla(230, 8%, 24%, 0.2);
+}
+
+/* Toolbar plugin overrides */
+/* Space out all buttons and move them away from the right edge of the code block */
+div.code-toolbar > .toolbar.toolbar > .toolbar-item {
+ margin-right: 0.4em;
+}
+
+/* Styling the buttons */
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
+ background: hsl(230, 1%, 90%);
+ color: hsl(230, 6%, 44%);
+ padding: 0.1em 0.4em;
+ border-radius: 0.3em;
+}
+
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
+div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
+ background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */
+ color: hsl(230, 8%, 24%);
+}
+
+/* Line Highlight plugin overrides */
+/* The highlighted line itself */
+.line-highlight.line-highlight {
+ background: hsla(230, 8%, 24%, 0.05);
+}
+
+/* Default line numbers in Line Highlight plugin */
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+ background: hsl(230, 1%, 90%);
+ color: hsl(230, 8%, 24%);
+ padding: 0.1em 0.6em;
+ border-radius: 0.3em;
+ box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
+}
+
+/* Hovering over a linkable line number (in the gutter area) */
+/* Requires Line Numbers plugin as well */
+pre[id].linkable-line-numbers.linkable-line-numbers
+ span.line-numbers-rows
+ > span:hover:before {
+ background-color: hsla(230, 8%, 24%, 0.05);
+}
+
+/* Line Numbers and Command Line plugins overrides */
+/* Line separating gutter from coding area */
+.line-numbers.line-numbers .line-numbers-rows,
+.command-line .command-line-prompt {
+ border-right-color: hsla(230, 8%, 24%, 0.2);
+}
+
+/* Stuff in the gutter */
+.line-numbers .line-numbers-rows > span:before,
+.command-line .command-line-prompt > span:before {
+ color: hsl(230, 1%, 62%);
+}
+
+/* Match Braces plugin overrides */
+/* Note: Outline colour is inherited from the braces */
+.rainbow-braces .token.token.punctuation.brace-level-1,
+.rainbow-braces .token.token.punctuation.brace-level-5,
+.rainbow-braces .token.token.punctuation.brace-level-9 {
+ color: hsl(5, 74%, 59%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-2,
+.rainbow-braces .token.token.punctuation.brace-level-6,
+.rainbow-braces .token.token.punctuation.brace-level-10 {
+ color: hsl(119, 34%, 47%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-3,
+.rainbow-braces .token.token.punctuation.brace-level-7,
+.rainbow-braces .token.token.punctuation.brace-level-11 {
+ color: hsl(221, 87%, 60%);
+}
+
+.rainbow-braces .token.token.punctuation.brace-level-4,
+.rainbow-braces .token.token.punctuation.brace-level-8,
+.rainbow-braces .token.token.punctuation.brace-level-12 {
+ color: hsl(301, 63%, 40%);
+}
+
+/* Diff Highlight plugin overrides */
+/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
+pre.diff-highlight > code .token.token.deleted:not(.prefix),
+pre > code.diff-highlight .token.token.deleted:not(.prefix) {
+ background-color: hsla(353, 100%, 66%, 0.15);
+}
+
+pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
+pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
+ background-color: hsla(353, 95%, 66%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
+pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
+pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
+ background-color: hsla(353, 95%, 66%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix),
+pre > code.diff-highlight .token.token.inserted:not(.prefix) {
+ background-color: hsla(137, 100%, 55%, 0.15);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
+pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
+ background-color: hsla(135, 73%, 55%, 0.25);
+}
+
+pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
+pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
+pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
+ background-color: hsla(135, 73%, 55%, 0.25);
+}
+
+/* Previewers plugin overrides */
+/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */
+/* Border around popup */
+.prism-previewer.prism-previewer:before,
+.prism-previewer-gradient.prism-previewer-gradient div {
+ border-color: hsl(0, 0, 95%);
+}
+
+/* Angle and time should remain as circles and are hence not included */
+.prism-previewer-color.prism-previewer-color:before,
+.prism-previewer-gradient.prism-previewer-gradient div,
+.prism-previewer-easing.prism-previewer-easing:before {
+ border-radius: 0.3em;
+}
+
+/* Triangles pointing to the code */
+.prism-previewer.prism-previewer:after {
+ border-top-color: hsl(0, 0, 95%);
+}
+
+.prism-previewer-flipped.prism-previewer-flipped.after {
+ border-bottom-color: hsl(0, 0, 95%);
+}
+
+/* Background colour within the popup */
+.prism-previewer-angle.prism-previewer-angle:before,
+.prism-previewer-time.prism-previewer-time:before,
+.prism-previewer-easing.prism-previewer-easing {
+ background: hsl(0, 0%, 100%);
+}
+
+/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
+/* For time, this is the alternate colour */
+.prism-previewer-angle.prism-previewer-angle circle,
+.prism-previewer-time.prism-previewer-time circle {
+ stroke: hsl(230, 8%, 24%);
+ stroke-opacity: 1;
+}
+
+/* Stroke colours of the handle, direction point, and vector itself */
+.prism-previewer-easing.prism-previewer-easing circle,
+.prism-previewer-easing.prism-previewer-easing path,
+.prism-previewer-easing.prism-previewer-easing line {
+ stroke: hsl(230, 8%, 24%);
+}
+
+/* Fill colour of the handle */
+.prism-previewer-easing.prism-previewer-easing circle {
+ fill: transparent;
+}
diff --git a/svelte.config.js b/svelte.config.js
index 78457d1..a9eb974 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,14 +1,19 @@
+import { mdsvex } from "mdsvex";
+import mdsvexConfig from "./mdsvex.config.js";
import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";
/** @type {import('@sveltejs/kit').Config} */
const config = {
+ extensions: [".svelte", ...mdsvexConfig.extensions],
+
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: [
preprocess({
postcss: true,
}),
+ mdsvex(mdsvexConfig),
],
kit: {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index cc6fdea..031a394 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,5 +1,5 @@
const config = {
- content: ["./src/**/*.{html,js,svelte,ts}"],
+ content: ["./src/**/*.{html,js,svelte,ts,svx}"],
theme: {
extend: {},
@@ -9,6 +9,7 @@ const config = {
require("@tailwindcss/forms")({
strategy: "class",
}),
+ require("@tailwindcss/typography"),
],
};