@poveste/plugin-tailwind 0.6.0

package/dist/index.js

@@ -0,0 +1,721 @@
+import fs from 'node:fs';
+import path from 'pathe';
+import { getInjectedImport } from 'poveste';
+/**
+ * The first of `fileNames` that exists and satisfies `accept`, searching `cwd`
+ * and then upwards.
+ *
+ * `accept` is not a convenience: every name below is an ordinary one, so a
+ * near-miss in the same directory would otherwise shadow the real entrypoint
+ * sitting behind it in the list.
+ */
+function findUp(cwd, fileNames, accept) {
+    let { root } = path.parse(cwd);
+    let dir = cwd;
+    // On Windows this is `C:` and needs the trailing slash to terminate.
+    if (root[1] === ':' && root[2] === undefined) {
+        root += '/';
+    }
+    while (dir !== root) {
+        for (const fileName of fileNames) {
+            const searchPath = path.join(dir, fileName);
+            if (fs.existsSync(searchPath) && accept(searchPath)) {
+                return searchPath;
+            }
+        }
+        dir = path.dirname(dir);
+    }
+    return null;
+}
+const CSS_ENTRY_CANDIDATES = [
+    'src/style.css',
+    'src/styles.css',
+    'src/main.css',
+    'src/index.css',
+    'src/app.css',
+    'src/assets/main.css',
+    'src/assets/style.css',
+    'src/assets/css/main.css',
+    // Nuxt conventions
+    'app/assets/css/main.css',
+    'assets/css/main.css',
+    // Next.js conventions
+    'styles/globals.css',
+    'app/globals.css',
+    'style.css',
+    'styles.css',
+];
+/**
+ * Whether a stylesheet is a Tailwind entrypoint, rather than merely a file with
+ * one of the names Tailwind entrypoints tend to have.
+ *
+ * Every name in `CSS_ENTRY_CANDIDATES` is an ordinary one — `src/app.css`,
+ * `styles.css` — so matching on the name alone hands the whole feature to
+ * projects that have never used Tailwind: a `Design System` group inserted into
+ * their tree, and a story rendering Tailwind's own defaults as if it were their
+ * design system.
+ *
+ * Both markers are Tailwind v4, which is what this plugin reads: the theme comes
+ * from CSS custom properties, so a v3 project using `@tailwind base` would be
+ * accepted here and then produce nothing.
+ */
+export function isTailwindEntry(filePath) {
+    let source;
+    try {
+        source = fs.readFileSync(filePath, 'utf8');
+    }
+    catch {
+        return false;
+    }
+    // `@import 'tailwindcss'`, `"tailwindcss/theme"`, and the `layer(…)` and
+    // `source(…)` forms that follow the specifier. Deliberately not a bare
+    // `@import` test — the file that prompted this imports a font.
+    return /@import\s+["']tailwindcss(?:\/[^"']*)?["']/.test(source)
+        || /@theme\b/.test(source);
+}
+export function HstTailwind(options = {}) {
+    // An explicit `cssFile` is the caller saying so, and is taken at their word.
+    const tailwindCssFile = options.cssFile ?? findUp(process.cwd(), CSS_ENTRY_CANDIDATES, isTailwindEntry);
+    async function generate(api) {
+        try {
+            await api.fs.ensureDir(api.pluginTempDir);
+            await api.fs.emptyDir(api.pluginTempDir);
+            api.moduleLoader.clearCache();
+            await api.fs.writeFile(api.path.resolve(api.pluginTempDir, 'style.css'), css);
+            const theme = await loadTailwindTheme(api, tailwindCssFile);
+            const storyFile = api.path.resolve(api.pluginTempDir, 'Tailwind.story.js');
+            await api.fs.writeFile(storyFile, storyTemplate({ theme }));
+            api.addStoryFile(storyFile);
+        }
+        catch (e) {
+            api.error(e.stack ?? e.message);
+        }
+    }
+    return {
+        name: 'tailwind-tokens',
+        config(config) {
+            if (tailwindCssFile) {
+                // Add 'design-system' group
+                if (!config.tree) {
+                    config.tree = {};
+                }
+                if (!config.tree.groups) {
+                    config.tree.groups = [];
+                }
+                if (!config.tree.groups.some(g => g.id === 'design-system')) {
+                    let index = 0;
+                    // After 'top' group
+                    const topIndex = config.tree.groups.findIndex(g => g.id === 'top');
+                    if (topIndex > -1) {
+                        index = topIndex + 1;
+                    }
+                    // Insert group
+                    config.tree.groups.splice(index, 0, {
+                        id: 'design-system',
+                        title: 'Design System',
+                    });
+                }
+            }
+        },
+        async onDev(api, onCleanup) {
+            if (tailwindCssFile) {
+                await generate(api);
+                const watcher = api.watcher.watch(tailwindCssFile)
+                    .on('change', () => generate(api))
+                    .on('add', () => generate(api));
+                onCleanup(() => {
+                    watcher.close();
+                });
+            }
+        },
+        async onBuild(api) {
+            if (tailwindCssFile) {
+                await generate(api);
+            }
+        },
+    };
+}
+/**
+ * Tailwind v4 keeps its theme as flat CSS custom properties rather than a
+ * resolved JS config (`resolveConfig` is gone). Load the design system from the
+ * project's CSS entrypoint and reshape its variables into the grouped structure
+ * the story template renders.
+ */
+/**
+ * Resolve a stylesheet referenced from CSS. A bare package specifier resolves
+ * to the JS entry, so its `style` field is used instead — that is how
+ * `@import 'tailwindcss'` reaches `tailwindcss/index.css`.
+ */
+async function resolveStylesheet(api, id, importBase) {
+    const { createRequire } = await import('node:module');
+    const require = createRequire(`${importBase}/`);
+    if (id.startsWith('.')) {
+        return api.path.resolve(importBase, id);
+    }
+    if (id.endsWith('.css')) {
+        return require.resolve(id);
+    }
+    const packageJsonPath = require.resolve(`${id}/package.json`);
+    const packageJson = JSON.parse(await api.fs.readFile(packageJsonPath, 'utf8'));
+    return api.path.resolve(api.path.dirname(packageJsonPath), packageJson.style ?? 'index.css');
+}
+async function loadTailwindTheme(api, cssFile) {
+    const { __unstable__loadDesignSystem } = await import('tailwindcss');
+    const base = api.path.dirname(cssFile);
+    const designSystem = await __unstable__loadDesignSystem(await api.fs.readFile(cssFile, 'utf8'), {
+        base,
+        loadStylesheet: async (id, importBase) => {
+            const resolved = await resolveStylesheet(api, id, importBase);
+            return {
+                path: resolved,
+                base: api.path.dirname(resolved),
+                content: await api.fs.readFile(resolved, 'utf8'),
+            };
+        },
+    });
+    const vars = new Map([...designSystem.theme.entries()].map(([key, entry]) => [key, entry.value]));
+    /** All values in a `--namespace-*` group, keyed by their remainder. */
+    function group(namespace, exclude) {
+        const out = {};
+        const prefix = `${namespace}-`;
+        for (const [key, value] of vars) {
+            if (!key.startsWith(prefix))
+                continue;
+            if (exclude?.test(key))
+                continue;
+            out[key.slice(prefix.length)] = value;
+        }
+        return out;
+    }
+    /** Colours are rendered as shade sets: `red-500` -> `{ red: { 500: … } }`. */
+    function colors() {
+        const out = {};
+        for (const [key, value] of Object.entries(group('--color'))) {
+            const match = key.match(/^(.*)-(\d+)$/);
+            if (match) {
+                out[match[1]] ??= {};
+                out[match[1]][match[2]] = value;
+            }
+            else {
+                out[key] = value;
+            }
+        }
+        return out;
+    }
+    // v4 generates the spacing scale on demand from a single `--spacing` base,
+    // so the conventional steps are reconstructed here for display.
+    const SPACING_STEPS = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96];
+    function spacing() {
+        const unit = vars.get('--spacing') ?? '0.25rem';
+        // Multiply out rather than emitting `calc(0.25rem * 4)`, so the story shows
+        // the resolved length the way the v3 resolved config did.
+        const [, rawAmount, cssUnit] = unit.trim().match(/^([\d.]+)([a-z%]*)$/i) ?? [];
+        const amount = Number(rawAmount);
+        const out = {};
+        for (const step of SPACING_STEPS) {
+            if (step === 0) {
+                out['0'] = '0px';
+            }
+            else {
+                out[String(step)] = Number.isFinite(amount)
+                    ? `${Number((amount * step).toFixed(4))}${cssUnit}`
+                    : `calc(${unit} * ${step})`;
+            }
+        }
+        return out;
+    }
+    // Fractions and keywords have no theme variables in v4 — they are static
+    // utilities — but they belong in the sizing scales the story lists.
+    const SIZING_EXTRAS = {
+        'auto': 'auto',
+        'full': '100%',
+        'min': 'min-content',
+        'max': 'max-content',
+        'fit': 'fit-content',
+        'px': '1px',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/4': '25%',
+        '3/4': '75%',
+        '1/5': '20%',
+        '2/5': '40%',
+        '3/5': '60%',
+        '4/5': '80%',
+    };
+    const palette = colors();
+    const scale = spacing();
+    return {
+        backgroundColor: palette,
+        textColor: palette,
+        borderColor: palette,
+        padding: scale,
+        margin: scale,
+        width: { ...scale, ...SIZING_EXTRAS, screen: '100vw' },
+        height: { ...scale, ...SIZING_EXTRAS, screen: '100vh' },
+        fontSize: group('--text', /--line-height$|--letter-spacing$|--font-weight$/),
+        fontWeight: group('--font-weight'),
+        fontFamily: group('--font', /^--font-weight-/),
+        letterSpacing: group('--tracking'),
+        lineHeight: group('--leading'),
+        dropShadow: group('--drop-shadow'),
+        borderRadius: group('--radius'),
+        // v4 has no border-width namespace; these are the built-in static utilities.
+        borderWidth: { DEFAULT: '1px', 0: '0px', 2: '2px', 4: '4px', 8: '8px' },
+    };
+}
+// No `import 'poveste-style'`: the story renders in a sandbox realm, where the
+// app stylesheet is @scope'd away from story markup anyway — it only added
+// ~100 KB of chrome CSS to every sandbox of every book using this plugin (#219).
+// The swatches style themselves from the local stylesheet below.
+function storyTemplate(tailwindConfig) {
+    return `
+import './style.css'
+import { createApp, h, markRaw, ref } from ${getInjectedImport('@poveste/vendors/vue')}
+import {
+  HstColorShades,
+  HstTokenList,
+  HstTokenGrid,
+  HstText,
+  HstTextarea,
+  HstNumber,
+} from ${getInjectedImport('@poveste/controls')}
+
+const config = markRaw(${JSON.stringify(tailwindConfig, null, 2)})
+const search = ref('')
+const sampleText = ref('Cat sit like bread eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap mrow cat cat moo moo lick ears lick paws')
+const fontSize = ref(16)
+
+function mountApp ({ el, state, onUnmount }, render) {
+  Object.assign(state, {
+    search,
+    sampleText,
+    fontSize,
+  })
+
+  const app = createApp({
+    render,
+  })
+  app.mount(el)
+
+  onUnmount(() => {
+    app.unmount()
+  })
+}
+
+export default {
+  id: 'tailwind',
+  title: 'Tailwind',
+  group: 'design-system',
+  icon: 'mdi:tailwind',
+  responsiveDisabled: true,
+  layout: { type: 'single', iframe: false },
+  variants: [
+    {
+      id: 'background-color',
+      title: 'Background Color',
+      icon: 'carbon:color-palette',
+      onMount: (api) => mountApp(api, () => Object.entries(config.theme.backgroundColor).map(([key, shades]) => h(HstColorShades, {
+        key,
+        shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
+        getName: shade => '' + (shade === 'DEFAULT' ? \`bg-\${key}\` : \`bg-\${key}-\${shade}\`),
+        search: search.value,
+      }, ({ color}) => h('div', {
+        class: '__pvt-shade',
+        style: {
+          backgroundColor: color.replace('<alpha-value>', 1),
+        },
+      })))),
+      onMountControls: (api) => mountApp(api, () => [
+        h(HstText, {
+          title: 'Filter...',
+          modelValue: search.value,
+          'onUpdate:modelValue': value => { search.value = value },
+        }),
+      ]),
+    },
+    {
+      id: 'text-color',
+      title: 'Text Color',
+      icon: 'carbon:text-color',
+      onMount: (api) => mountApp(api, () => Object.entries(config.theme.textColor).map(([key, shades]) => h(HstColorShades, {
+        key,
+        shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
+        getName: shade => '' + (shade === 'DEFAULT' ? \`text-\${key}\` : \`text-\${key}-\${shade}\`),
+        search: search.value,
+      }, ({ color}) => h('div', {
+        class: '__pvt-shade __pvt-text',
+        style: {
+          color: color.replace('<alpha-value>', 1),
+        },
+      }, 'Aa')))),
+      onMountControls: (api) => mountApp(api, () => [
+        h(HstText, {
+          title: 'Filter...',
+          modelValue: search.value,
+          'onUpdate:modelValue': value => { search.value = value },
+        }),
+      ]),
+    },
+    {
+      id: 'border-color',
+      title: 'Border Color',
+      icon: 'carbon:color-palette',
+      onMount: (api) => mountApp(api, () => Object.entries(config.theme.borderColor).map(([key, shades]) => h(HstColorShades, {
+        key,
+        shades: typeof shades === 'object' ? shades : { DEFAULT: shades },
+        getName: shade => '' + (shade === 'DEFAULT' ? \`border-\${key}\` : \`border-\${key}-\${shade}\`),
+        search: search.value,
+      }, ({ color}) => h('div', {
+        class: '__pvt-shade __pvt-border',
+        style: {
+          borderColor: color.replace('<alpha-value>', 1),
+        },
+      })))),
+      onMountControls: (api) => mountApp(api, () => [
+        h(HstText, {
+          title: 'Filter...',
+          modelValue: search.value,
+          'onUpdate:modelValue': value => { search.value = value },
+        }),
+      ]),
+    },
+    {
+      id: 'padding',
+      title: 'Padding',
+      icon: 'carbon:area',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.padding,
+        getName: key => \`p-\${key}\`,
+      }, ({ token }) => h('div', {
+        class: '__pvt-padding',
+        style: {
+          padding: token.value,
+        },
+      }, [
+        h('div', {
+          class: '__pvt-padding-box',
+        }),
+      ]))),
+    },
+    {
+      id: 'margin',
+      title: 'Margin',
+      icon: 'carbon:area',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.margin,
+        getName: key => \`m-\${key}\`,
+      }, ({ token }) => h('div', {
+        class: '__pvt-margin',
+      }, [
+        h('div', {
+          class: '__pvt-margin-box',
+          style: {
+            margin: token.value,
+          },
+        }),
+      ]))),
+    },
+    {
+      id: 'font-size',
+      title: 'Font Size',
+      icon: 'carbon:text-font',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.fontSize,
+        getName: key => \`text-\${key}\`,
+      }, ({ token }) => h('div', {
+        class: '__pvt-truncate',
+        style: {
+          fontSize: Array.isArray(token.value) ? token.value[0] : token.value,
+          ...(Array.isArray(token.value) && typeof token.value[1] === "object" ? token.value[1] : { lineHeight: token.value[1] })
+        },
+      }, sampleText.value))),
+      onMountControls: (api) => mountApp(api, () => [
+        h(HstTextarea, {
+          title: 'Sample text',
+          modelValue: sampleText.value,
+          'onUpdate:modelValue': value => { sampleText.value = value },
+          rows: 5,
+        }),
+      ]),
+    },
+    {
+      id: 'font-weight',
+      title: 'Font Weight',
+      icon: 'carbon:text-font',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.fontWeight,
+        getName: key => \`font-\${key}\`,
+      }, ({ token }) => h('div', {
+        class: '__pvt-truncate',
+        style: {
+          fontWeight: token.value,
+          fontSize: \`\${fontSize.value}px\`,
+        },
+      }, sampleText.value))),
+      onMountControls: (api) => mountApp(api, () => [
+        h(HstTextarea, {
+          title: 'Sample text',
+          modelValue: sampleText.value,
+          'onUpdate:modelValue': value => { sampleText.value = value },
+          rows: 5,
+        }),
+        h(HstNumber, {
+          title: 'Font size',
+          modelValue: fontSize.value,
+          'onUpdate:modelValue': value => { fontSize.value = value },
+          min: 1,
+        }),
+      ]),
+    },
+    {
+      id: 'font-family',
+      title: 'Font Family',
+      icon: 'carbon:text-font',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.fontFamily,
+        getName: key => \`font-\${key}\`,
+      }, ({ token }) => h('div', {
+        class: '__pvt-truncate',
+        style: {
+          fontFamily: token.value,
+          fontSize: \`\${fontSize.value}px\`,
+        },
+      }, sampleText.value))),
+      onMountControls: (api) => mountApp(api, () => [
+        h(HstTextarea, {
+          title: 'Sample text',
+          modelValue: sampleText.value,
+          'onUpdate:modelValue': value => { sampleText.value = value },
+          rows: 5,
+        }),
+        h(HstNumber, {
+          title: 'Font size',
+          modelValue: fontSize.value,
+          'onUpdate:modelValue': value => { fontSize.value = value },
+          min: 1,
+        }),
+      ]),
+    },
+    {
+      id: 'letter-spacing',
+      title: 'Letter Spacing',
+      icon: 'carbon:text-font',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.letterSpacing,
+        getName: key => \`tracking-\${key}\`,
+      }, ({ token }) => h('div', {
+        class: '__pvt-truncate',
+        style: {
+          letterSpacing: token.value,
+          fontSize: \`\${fontSize.value}px\`,
+        },
+      }, sampleText.value))),
+      onMountControls: (api) => mountApp(api, () => [
+        h(HstTextarea, {
+          title: 'Sample text',
+          modelValue: sampleText.value,
+          'onUpdate:modelValue': value => { sampleText.value = value },
+          rows: 5,
+        }),
+        h(HstNumber, {
+          title: 'Font size',
+          modelValue: fontSize.value,
+          'onUpdate:modelValue': value => { fontSize.value = value },
+          min: 1,
+        }),
+      ]),
+    },
+    {
+      id: 'line-height',
+      title: 'Line Height',
+      icon: 'carbon:text-font',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.lineHeight,
+        getName: key => \`leading-\${key}\`,
+      }, ({ token }) => h('div', {
+        style: {
+          lineHeight: token.value,
+        },
+      }, sampleText.value))),
+      onMountControls: (api) => mountApp(api, () => [
+        h(HstTextarea, {
+          title: 'Sample text',
+          modelValue: sampleText.value,
+          'onUpdate:modelValue': value => { sampleText.value = value },
+          rows: 5,
+        }),
+        // @TODO select font size
+      ]),
+    },
+    {
+      id: 'drop-shadow',
+      title: 'Drop Shadow',
+      icon: 'carbon:shape-except',
+      onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
+        tokens: config.theme.dropShadow,
+        getName: key => '' + (key === 'DEFAULT' ? 'drop-shadow' : \`drop-shadow-\${key}\`),
+        colSize: 180,
+      }, ({ token }) => h('div', {
+        class: '__pvt-drop-shadow',
+        style: {
+          filter: \`\${(Array.isArray(token.value) ? token.value : [token.value]).map(v => \`drop-shadow(\${v})\`).join(' ')}\`,
+        },
+      }))),
+    },
+    {
+      id: 'border-radius',
+      title: 'Border Radius',
+      icon: 'carbon:condition-wait-point',
+      onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
+        tokens: config.theme.borderRadius,
+        getName: key => '' + (key === 'DEFAULT' ? 'rounded' : \`rounded-\${key}\`),
+        colSize: 180,
+      }, ({ token }) => h('div', {
+        class: '__pvt-border-radius',
+        style: {
+          borderRadius: token.value,
+        },
+      }))),
+    },
+    {
+      id: 'border-width',
+      title: 'Border Width',
+      icon: 'carbon:checkbox',
+      onMount: (api) => mountApp(api, () => h(HstTokenGrid, {
+        tokens: config.theme.borderWidth,
+        getName: key => '' + (key === 'DEFAULT' ? 'border' : \`border-\${key}\`),
+        colSize: 180,
+      }, ({ token }) => h('div', {
+        class: '__pvt-border-width',
+        style: {
+          borderWidth: token.value,
+        },
+      }))),
+    },
+    {
+      id: 'width',
+      title: 'Width',
+      icon: 'carbon:pan-horizontal',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.width,
+        getName: key => '' + (key === 'DEFAULT' ? 'w' : \`w-\${key}\`),
+      }, ({ token }) => h('div', {
+        class: '__pvt-width',
+      }, [
+        h('div', {
+          class: '__pvt-width-box',
+          style: {
+            width: token.value,
+          },
+        }),
+      ]))),
+    },
+    {
+      id: 'height',
+      title: 'Height',
+      icon: 'carbon:pan-vertical',
+      onMount: (api) => mountApp(api, () => h(HstTokenList, {
+        tokens: config.theme.height,
+        getName: key => '' + (key === 'DEFAULT' ? 'h' : \`h-\${key}\`),
+      }, ({ token }) => h('div', {
+        class: '__pvt-height',
+        style: {
+          height: token.value,
+        },
+      }))),
+    },
+    {
+      id: 'full-config',
+      title: 'Full Config',
+      icon: 'carbon:code',
+      onMount: (api) => mountApp(api, () => h('pre', JSON.stringify(config, null, 2))),
+    },
+  ],
+}`;
+}
+const css = `.__pvt-shade {
+  height: 80px;
+  border-radius: 4px;
+}
+
+.__pvt-text {
+  font-size: 4rem;
+  display: flex;
+  align-items: flex-end;
+}
+
+.__pvt-border {
+  border-style: solid;
+  border-width: 2px;
+}
+
+.__pvt-padding {
+  background-color: rgb(113 113 122 / 0.1);
+  width: min-content;
+}
+
+.__pvt-margin {
+  border: dashed 1px rgb(113 113 122 / 0.5);
+  width: min-content;
+}
+
+.__pvt-padding-box,
+.__pvt-margin-box {
+  width: 5rem;
+  height: 5rem;
+  background-color: rgb(113 113 122 / 0.5);
+}
+
+.__pvt-padding,
+.__pvt-padding-box,
+.__pvt-margin,
+.__pvt-margin-box,
+.__pvt-drop-shadow {
+  border-radius: 4px;
+}
+
+.__pvt-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.__pvt-drop-shadow {
+  width: 8rem;
+  height: 8rem;
+  background: white;
+  margin-bottom: 0.5rem;
+}
+
+.__pvt-drop-shadow {
+  background: #4e4e57;
+}
+
+.__pvt-border-radius {
+  width: 8rem;
+  height: 8rem;
+  background-color: rgb(113 113 122 / 0.5);
+}
+
+.__pvt-border-width {
+  width: 8rem;
+  height: 8rem;
+  border-color: rgb(113 113 122 / 0.5);
+  background-color: rgb(113 113 122 / 0.1);
+}
+
+.__pvt-width {
+  background-color: rgb(113 113 122 / 0.1);
+}
+
+.__pvt-width-box,
+.__pvt-height {
+  background-color: rgb(113 113 122 / 0.5);
+}
+
+.__pvt-width-box {
+  height: 5rem;
+}`;
+/** @deprecated Use `HstTailwind`. Kept for books that named the old builtin. */
+export const tailwindTokens = HstTailwind;