30:[] 2e:{"title":"Using Twind","cells":[{"id":47,"value":"md`# Using Twind`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`Twind is small compiler that turns Tailwind short hand into CSS rules at run, build or serve time. If you have used Tailwind and/or a CSS-in-JS solution before then most of the API will feel very familiar.\n\n### Usage\n\n~~~js\nimport { tw, twind } from \"@hastebrot/using-twind\"\n~~~\n\n### Dependencies\n\n- \\`twind/twind.umd.js\\`, 33.3 kB\n- \\`twind/colors/colors.umd.js\\`, 3.92 kB\n- \\`@twind/forms/forms.umd.js\\`, 4.16 kB\n\n### References\n\n- https://github.com/tw-in-js/twind\n- https://twind.dev/docs/index.html\n- https://tailwindcss.com\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"html`

Examples

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`\n

This is Twind!

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"html`\n

\n \n \n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"// Reference: https://twind.dev/docs/handbook/advanced/setup.html\ntw = twind.setup({\n ...withTwindScopedOptions(),\n theme: {\n extend: {\n colors: {\n gray: twind.colors.trueGray,\n },\n fontFamily: {\n serif: [\"var(--serif)\"],\n },\n },\n },\n plugins: {\n \"form-checkbox\": twind.forms.formCheckbox,\n \"form-field\": twind.forms.formField,\n \"form-file\": twind.forms.formFile,\n \"form-input\": twind.forms.formInput,\n \"form-radio\": twind.forms.formRadio,\n \"form-select\": twind.forms.formSelect,\n \"form-textarea\": twind.forms.formTextarea,\n },\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"// To use Twind CSS classes in ObservableHQ notebooks we have to scope the preflight CSS style reset in order to keep the styles defined by the ObservableHQ user interface. Note that order matters for the properties we pick from the preflight object.\n// Reference: https://github.com/tw-in-js/twind/issues/134#issuecomment-791036921\nwithTwindScopedOptions = () => {\n const withEmptySheet = () => {\n const sheet = twind.cssomSheet()\n while (sheet.target.cssRules.length) {\n sheet.target.deleteRule(0)\n }\n return twind.cssomSheet()\n }\n return {\n sheet: withEmptySheet(),\n hash: true,\n preflight: preflight => ({\n \"[class*=tw-]\": {\n ...preflight.body, \n ...preflight.html, \n ...preflight[\"*,::before,::after\"],\n margin: \"0\", \n padding: \"0\",\n \"&::before,&::after\": preflight[\"*,::before,::after\"],\n },\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"twindVersion = \"0.16.11\" // https://github.com/tw-in-js/twind/releases","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"twindFormsVersion = \"0.1.4\" // https://github.com/tw-in-js/twind-forms/releases","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"twind = require(`twind@${twindVersion}`).then(twind => ({\n ...twind,\n setup: options => twind.create(options).tw,\n colors,\n forms,\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"// https://unpkg.com/browse/twind@0.16.3/colors/\ncolors = require(`twind@${twindVersion}/colors/colors.umd.js`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"// https://unpkg.com/browse/@twind/forms@0.1.4/\nforms = require(`@twind/forms@${twindFormsVersion}`)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}