Consultant Designer & Developer
ß
<div class=${tw`relative rounded-xl overflow-auto p-8 bg-gray-50`}>
<div class=${tw`grid grid-cols-3 grid-rows-3 grid-flow-row-dense gap-4 font(mono bold) text(white sm center)`}>
<div class=${tw`col-span-2 p-4 bg-purple-500 rounded-lg`}>01</div>
<div class=${tw`col-span-2 p-4 bg-purple-500 rounded-lg`}>02</div>
<div class=${tw`p-4 bg-purple-500 rounded-lg`}>03</div>
<div class=${tw`p-4 bg-purple-500 rounded-lg`}>04</div>
<div class=${tw`p-4 bg-purple-500 rounded-lg`}>05</div>
</div>
</div>
tw = initializeTWind({ invalidation, hash })
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;
}
function hash2String(hash) {
return hash === true ? "#" : typeof hash === "function" ? hash("") : null;
}
setup = (options, sheet = undefined, twindSetup = Twind.setup) => {
const { hash, ...restOptions } = Object.assign({}, options);
const hashString =
hash === true ? "#" : typeof hash === "function" ? hash("") : undefined;
const preflight = (p) => resetCSS(p, hashString);
const presets = restOptions.presets ?? [
twindPresetAutoprefix.default(),
apply(
twindPresetTailwind.default({
disablePreflight: false
}),
(preset) => ({
...preset,
preflight: preflight(preset.preflight)
})
),
twindPresetTailwindForms.default({
strategy: "class"
}),
twindPresetTypography.default({})
];
return twindSetup(
{
hash,
presets,
...restOptions
},
sheet
);
}
function resetCSS(preflight, hashString) {
let allElementResets = {
boxSizing: "border-box"
};
if (hashString == null) {
return {
html: preflight.html,
body: {
...preflight.body,
margin: "0",
padding: "0"
},
["*,::before,::after"]: allElementResets
};
} else {
const escapedHashString = hashString.replace("#", "\\#");
return {
[`.${escapedHashString}-body`]: {
...preflight.body,
margin: "0",
padding: "0"
},
[`.${escapedHashString}-root`]: {
...preflight.html,
["& *,& ::before, & ::after"]: allElementResets
}
};
}
}
apply = (value, block) => block(value)
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.
