html`
<div class="${tw`bg-indigo-100 p-4`}">
<p class="${tw`font-bold text-[#ff0000] leading-none`}">
Hello Twind!
</p>
</div>
`
html`
<div class="${tw`pb-2 max-w-[640px]`}">
<input
type="text"
class="${tw`form-input mt-2 block !w-full`}"
placeholder="john@example.com"
/>
<input
type="text"
class="${tw`form-input mt-2 block !w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50`}"
placeholder="john@example.com"
/>
</div>
`
html`
<article class="${tw`prose prose-slate prose-headings:(text-indigo-500,underline)`}">
<h2>Garlic bread with cheese: What the science tells us</h2>
<p>
For years parents have espoused the health benefits of eating garlic bread with cheese to their
children, with the food earning such an iconic status in our culture that kids will often dress
up as warm, cheesy loaf for Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
springing up around the country.
</p>
</article>
`
sheetContents = {
const options = {}
const sheet = Twind.virtual()
const twindSetup = (...args) => Twind.observe(Twind.twind(...args))
setup(options, sheet, twindSetup)
//const _sheet = Twind.getSheet()
const sheetContents = Twind.stringify(sheet.target)
return html`<div class="${tw`font-mono text-sm`}">${sheetContents}</div>`
}
tw = {
const options = {}
const sheet = Twind.getSheet()
invalidation.then(() => sheet.destroy())
return setup(options, sheet)
}
setup = (options = {}, sheet = undefined, twindSetup = Twind.setup) => {
return twindSetup({
presets: defaultPresets,
hash: defaultCellOptions.hash,
...options,
}, sheet)
}
defaultPresets = [
Twind.presetAutoprefix(),
apply(
Twind.presetTailwind({
disablePreflight: false,
}),
preset => ({
...preset,
preflight: defaultCellOptions.preflight(preset.preflight),
}),
),
Twind.presetTailwindForms({
strategy: "class",
}),
Twind.presetTypography({}),
]
defaultCellOptions = ({
// Twind.setup({ hash })
hash: true,
// Twind.presetTailwind().preflight
preflight: preflight => {
return {
"[class*='#']": {
...preflight.body,
...preflight.html,
...preflight["*,::before,::after"],
margin: "0",
padding: "0",
"&::before,&::after": preflight["*,::before,::after"],
},
}
},
})
Twind = ({
...twindCore,
presetAutoprefix: twindPresetAutoprefix.default,
presetTailwind: twindPresetTailwind.default,
presetTailwindForms: twindPresetTailwindForms.default,
presetTypography: twindPresetTypography.default,
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
