{"protocol":"clank-doc/1","frameworkVersion":"0.8.0","slug":"tailwind","title":"Tailwind CSS","description":"Clank preserves class strings exactly and keeps styling outside its reactive kernel. Tailwind scans ordinary TSX such as:","group":{"id":"framework","title":"Framework"},"url":"https://docs.clank.run/docs/tailwind","source":"docs/tailwind.md","headings":["Zero install development","Production without project packages","Static class discovery","Why there is no Clank plugin"],"tableOfContents":[{"id":"zero-install-development","title":"Zero-install development","level":2},{"id":"production-without-project-packages","title":"Production without project packages","level":2},{"id":"static-class-discovery","title":"Static class discovery","level":2},{"id":"why-there-is-no-clank-plugin","title":"Why there is no Clank plugin","level":2}],"markdown":"# Tailwind CSS\n\nClank preserves class strings exactly and keeps styling outside its reactive kernel. Tailwind scans ordinary TSX such as:\n\n```tsx\n<button\n  class=\"rounded-full bg-indigo-600 px-4 py-2 font-semibold text-white hover:bg-indigo-500\"\n  classList={{ \"opacity-50\": disabled.value }}\n>\n  Save\n</button>\n```\n\n## Zero-install development\n\nThe example uses Tailwind v4's browser build:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script>\n<style type=\"text/tailwindcss\">\n  @theme { --color-brand: #ff6b4a; }\n  body { @apply bg-slate-50 text-slate-900; }\n</style>\n```\n\nTailwind documents the Play CDN as a development-only option. It is ideal for this zero-install demo, but production should serve compiled CSS. See the official [Play CDN guide](https://tailwindcss.com/docs/installation/play-cdn).\n\nWhen using the browser build with a Content Security Policy, allow the exact CDN script origin and the development-time style injection it performs. The authenticated example uses a per-response script nonce and limits the exception to `style-src 'unsafe-inline'`. Compiled production CSS can remove both CDN access and that style exception.\n\n## Production without project packages\n\nUse Tailwind's standalone CLI executable, then create:\n\n```css\n/* src/styles.css */\n@import \"tailwindcss\";\n```\n\nCompile it to a static file with the standalone binary for your platform:\n\n```sh\n./tailwindcss -i ./src/styles.css -o ./public/styles.css --watch\n```\n\nThen link `/styles.css` from HTML. The official [Tailwind CLI guide](https://tailwindcss.com/docs/installation/tailwind-cli) notes that a standalone executable is available for users who do not want a Node package install.\n\n## Static class discovery\n\nKeep complete class tokens in source:\n\n```ts\n// Good: both complete tokens are discoverable.\nconst tone = danger ? \"bg-red-600\" : \"bg-emerald-600\";\n\n// Avoid: a static scanner cannot infer every interpolated result.\nconst tone = `bg-${color}-600`;\n```\n\nReactive `classList` keys are also static strings and are discoverable. If a class truly comes from external data, map the allowed values to complete class names or configure the Tailwind source/safelist mechanism.\n\n## Why there is no Clank plugin\n\nTailwind needs source files containing class strings and an HTML file containing its generated stylesheet. Clank supplies both without transforming the class attribute, so an adapter would add dependency and indirection without adding capability.\n"}