3f:null 40:["$","title",null,{"children":"Tailwind CSS in Observable | Alex Eftink | Observable"}] 46:T1a3c,formHtml = `

Personal Information

First name

Last name

Email address

Country

Street address

City

State / Province

ZIP / Postal code

`47:Tce4,firstExample = `

`48:[] 44:{"id":"418516cfb0487745","slug":"tailwind-css-in-observable","title":"Tailwind CSS in Observable","thumbnail":"a359bf9d86f95307a0514efdcc647905ff42cfac77f1cf0999f3c23c0cb79bec","access_level":"public","create_time":"$D2023-08-10T14:50:45.555Z","update_time":"$D2024-01-21T22:22:29.813Z","view_time":null,"first_public_time":"$D2023-08-10T16:51:13.385Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"ca5c83797657c4f9","login":"aeftink","name":"Alex Eftink","avatar_url":"https://avatars-next.observableusercontent.com/42a96094e8739ad0907f98baeee77ea62fbfd9b24da198e6271f631e4ef2e78b","tier":"starter_2024","bio":"","following":false},"version":236,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6810b574228216c8","login":"aeftink","name":"Alex Eftink","avatar_url":"https://avatars-next.observableusercontent.com/42a96094e8739ad0907f98baeee77ea62fbfd9b24da198e6271f631e4ef2e78b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6810b574228216c8","login":"aeftink","name":"Alex Eftink","avatar_url":"https://avatars-next.observableusercontent.com/42a96094e8739ad0907f98baeee77ea62fbfd9b24da198e6271f631e4ef2e78b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tailwind CSS in Observable","cells":[{"id":0,"value":"# Tailwind CSS in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"{\n const main = document.createElement('main');\n const classList = ['w-3/5', 'flex', 'justify-center', 'border', 'rounded-md', 'drop-shadow-md'];\n classList.map(cls => main.classList.add(cls));\n main.style.height = '305px';\n main.innerHTML = firstExample;\n return renderIframe(main);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"### Objective \nIsolate tailwind to individual cells so the rest of the notebook isn't affected by it's global styles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"### Example \nUse any method to generate dom nodes. This example just uses innerHTML.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"{\n const main = document.createElement('main');\n main.innerHTML = formHtml;\n return renderIframe(main, { height: '700px' });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"### Interactive Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"An interactive chat box example can be found in this [notebook](https://observablehq.com/@aeftink/generate-html-elements-from-arrays#cell-614)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"### Alternative Solutions \nBoth of these affect the global styles of the Observable notebook\n- TailwindCSS + Twind - https://observablehq.com/@saneef/tailwindcss\n- Use link tag and older version of tailwind: \n``","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"### Implementation \n*Uses tailwind playground*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"`function renderIframe(node, options)` \n`node` - DOM node to render \n`options` - iframe options: width, height, and border styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"function renderIframe(node, options = {}) {\n const { width, border } = options;\n const iframe = document.createElement('iframe');\n iframe.style.width = width || '100%';\n iframe.style.border = border || 'none';\n iframe.addEventListener('load', async function() {\n const doc = iframe.contentWindow.document; \n const tailwindScript = doc.createElement('script');\n doc.head.append(tailwindScript);\n tailwindScript.addEventListener('load', function() {\n doc.body.append(node);\n iframe.style.height = options?.height || `${doc.body.offsetHeight}px`;\n });\n tailwindScript.src = 'https://cdn.tailwindcss.com/3.3.3?plugins=forms,typography,aspect-ratio'; \n });\n \n return iframe;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"### HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"

Personal Information

Classic Utility Jacket