{"slug":"tailwind-ui-in-sveltegq2e","frontmatter":{"title":"Tailwind UI in Svelte","slug":"tailwind-ui-in-sveltegq2e","date":"2020-08-07T19:57:58.000Z","categories":["programming","web development","javascript","css"],"source":"myBlogStorage/public/posts/tailwind-ui-in-sveltegq2e.json"},"markdown":"The [Tailwind UI](https://tailwindui.com/) dynamic code is written using [Alpine.js](https://github.com/alpinejs/alpine/), so most of the integration effort goes into translating the Alpine.js code to Svelte.\n\nUpdate: Since I wrote this the Tailwind UI site has changed to use informative comments instead of Alpine code samples. The Svelte techniques below still apply.\n\n# Conditional Showing of Elements\n\n### Alpine:\n\n```html\n

...

\n```\n\n### Svelte:\n\n```html\n

\n {#if open}\n

...

\n {/if}\n

\n```\n\n## Conditional Classes\n\n### Alpine:\n\n###\n```html\n...\n```\n\n### Svelte:\n\n```html\n

...

\n```\n\n## Event Handlers\n\n##\n\n## Button Click\n\n### Alpine:\n\n```html\n\n```\n\n### Svelte:\n\n```html\n\n```\n\n## Click Outside\n\n### Alpine:\n\n```html\n

\n...\n

...

\n```\n\n### Svelte ([REPL](https://svelte.dev/repl/dae848c2157e48ab932106779960f5d5?version=3.19.2)):\n\n```html\n\n

open = false }}>\n \n {#if open}\n

\n...\n

\n {/if}\n

\n```\n\n## Key Press\n\n### Alpine:\n\n```html\n

\n...\n

\n```\n\n### Svelte:\n\n```html\n\n\n{#if open}\n

...

\n{/if}\n```\n\nThis could also be done with a `use:` action similar to the Click Outside example.\n\n# Transitions\n\n### Alpine\n\n```html\n\n...\n\n```\n\n### Svelte\n\n```html\n\n

\n Start is the scale value divided by 100.\n

\n```\n\nSource: [https://imfeld.dev/notes/tailwind_in_svelte](https://imfeld.dev/notes/tailwind_in_svelte)"}