25:["$","title",null,{"children":"Tailwind CSS | inoculate_media | Observable"}] 49:T405,function initializeTWind(options = {}) { const { invalidation, ...restOptions } = Object.assign( { hash: true // Enables hashing of generated classnames // You can pass TWind configuration here. See: https://twind.dev/handbook/configuration.html }, options ); const hash = restOptions.hash; if (!invalidation) { throw new Error( "Provide `options.invaliation`. See: https://github.com/observablehq/stdlib/#invalidation" ); } const sheet = Twind.getSheet(); const hashString = hash2String(hash); if (hashString) { document.body.classList.add(hashString + "-body"); document.body.parentElement.classList.add(hashString + "-root"); } invalidation.then(() => { console.info("Cell invalidated. Destroying sheet."); if (hashString) { document.body.classList.remove(hashString + "-body"); document.body.parentElement.classList.remove(hashString + "-root"); } sheet.destroy(); }); const tw = setup(restOptions, sheet); return tw; }4a:[] 29:{"id":"09846fe2f3f04436","slug":null,"title":"Tailwind CSS","thumbnail":"f4affc86342358b1f88d5f203b878aa17585121b3fa7dcdda788113f37173a27","access_level":"public","create_time":"$D2023-12-27T08:49:41.535Z","update_time":"$D2023-12-27T13:56:06.680Z","view_time":null,"first_public_time":"$D2023-12-27T08:49:41.535Z","has_unpublished_edits":null,"fork":{"id":"438433c064644ee5","slug":"tailwindcss","title":"Tailwind CSS","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","bio":"Video artist and data nerd,","following":false},"version":533,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"bio":"I make art, code and applications that integrate ai and machine learning for musicians and artists. My own music project is Les Barons | The Barons","following":false}],"members":[{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tailwind CSS","cells":[{"id":0,"value":"# Tailwind CSS\n\nUses [Twind](https://twind.dev/) (`${twindVersion}`), a small compiler, to turn [Tailwind](https://tailwindcss.com/) classes and shorthands into CSS stylesheets in Observable notebooks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"## Usage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"Import `initializeTWind` into your notebook:\n\n```js\nimport {initializeTWind} from \"@saneef/tailwindcss\"\n```\n\nIn a new cell, initialize the Twind by passing the cell invalidation promise,\n`invalidation` through options.\n\n```js\ntw = initializeTWind({ invalidation })\n```\n\nYou can use this `tw` function to write Tailwind class names and shorthands.\n\n```html\n

\n Hello TailwindCSS + Twind!\n

\n```\n\n...will get you this output:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"

\n Hello TailwindCSS + Twind!\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"`tw` is the only function you need to use. Inserting styles in the DOM, prefixing, and compiling will be taken care by Twind. See [different input types supported by `tw`](https://twind.dev/handbook/styling-with-twind.html).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"These [TWind presets](https://github.com/tw-in-js/twind/tree/v1.0.0-next.38#-quickstart) at included by default:\n\n- [preset-autoprefix](https://github.com/tw-in-js/twind/tree/next/packages/preset-autoprefix)\n- [preset-tailwind](https://github.com/tw-in-js/twind/tree/next/packages/preset-tailwind)\n- [preset-tailwind-forms](https://github.com/tw-in-js/twind/tree/next/packages/preset-tailwind-forms)\n- [preset-typography](https://github.com/tw-in-js/twind/tree/next/packages/preset-typography)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"### More examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"#### Typography\n\n_Try dark mode!_ 🌒","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"ß","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"#### A simple grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":384,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":309,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"viewof hash = Inputs.toggle({ label: \"Hash class names\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"tw = initializeTWind({ invalidation, hash })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"function hash2String(hash) {\n return hash === true ? \"#\" : typeof hash === \"function\" ? hash(\"\") : null;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"setup = (options, sheet = undefined, twindSetup = Twind.setup) => {\n const { hash, ...restOptions } = Object.assign({}, options);\n\n const hashString =\n hash === true ? \"#\" : typeof hash === \"function\" ? hash(\"\") : undefined;\n\n const preflight = (p) => resetCSS(p, hashString);\n\n const presets = restOptions.presets ?? [\n twindPresetAutoprefix.default(),\n apply(\n twindPresetTailwind.default({\n disablePreflight: false\n }),\n (preset) => ({\n ...preset,\n preflight: preflight(preset.preflight)\n })\n ),\n twindPresetTailwindForms.default({\n strategy: \"class\"\n }),\n twindPresetTypography.default({})\n ];\n\n return twindSetup(\n {\n hash,\n presets,\n ...restOptions\n },\n sheet\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"function resetCSS(preflight, hashString) {\n let allElementResets = {\n boxSizing: \"border-box\"\n };\n\n if (hashString == null) {\n return {\n html: preflight.html,\n body: {\n ...preflight.body,\n margin: \"0\",\n padding: \"0\"\n },\n [\"*,::before,::after\"]: allElementResets\n };\n } else {\n const escapedHashString = hashString.replace(\"#\", \"\\\\#\");\n return {\n [`.${escapedHashString}-body`]: {\n ...preflight.body,\n margin: \"0\",\n padding: \"0\"\n },\n [`.${escapedHashString}-root`]: {\n ...preflight.html,\n [\"& *,& ::before, & ::after\"]: allElementResets\n }\n };\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"apply = (value, block) => block(value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"twindVersion = \"v1.0.0-next.38\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Twind = import(`https://cdn.skypack.dev/twind@${twindVersion}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"twindPresetAutoprefix = import(\n `https://cdn.skypack.dev/@twind/preset-autoprefix@${twindVersion}`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"twindPresetTailwind = import(\n `https://cdn.skypack.dev/@twind/preset-tailwind@${twindVersion}`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"twindPresetTailwindForms = import(\n `https://cdn.skypack.dev/@twind/preset-tailwind-forms@${twindVersion}`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"twindPresetTypography = import(\n `https://cdn.skypack.dev/@twind/preset-typography@${twindVersion}`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"## Changelog\n\n- **2022-10-21:** Fixes, no visible borders on Observable inputs. Only `border-box` reset styles are applied on `*,::before,::after`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":223,"value":"## Credits","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"- Most of the code is based on Benjamin’s [Hello, Twind v1-beta!](https://observablehq.com/@hastebrot/hello-twind-v1-beta)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null