html`
<main class="${tw`font-sans bg-purple-400 p-8 flex items-center justify-center`}">
<h1 class="${tw`font-bold text(center 5xl white sm:gray-800 md:pink-700)`}">This is Twind!</h1>
</main>
`
html`
<div class="${tw`pb-3 space-y-3 flex flex-col`}">
<input class="${tw`form-input rounded-lg border-gray-300`}" type="text" placeholder="first name" />
<input class="${tw`form-input rounded-lg border-gray-300`}" type="text" placeholder="last name" />
</div>
`
// Reference: https://twind.dev/docs/handbook/advanced/setup.html
tw = twind.setup({
...withTwindScopedOptions(),
theme: {
extend: {
colors: {
gray: twind.colors.trueGray,
},
fontFamily: {
serif: ["var(--serif)"],
},
},
},
plugins: {
"form-checkbox": twind.forms.formCheckbox,
"form-field": twind.forms.formField,
"form-file": twind.forms.formFile,
"form-input": twind.forms.formInput,
"form-radio": twind.forms.formRadio,
"form-select": twind.forms.formSelect,
"form-textarea": twind.forms.formTextarea,
},
})
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.
