Skip to content
mountly

Tailwind

mountly-tailwind is an opt-in Tailwind v4 preset. It gives widgets a shared starting palette and spacing scale so multiple widgets on one page feel like they belong together. Skip it if you’re already happy with your own Tailwind config.

Install

Section titled “Install”
Terminal window
pnpm add -D mountly-tailwind tailwindcss

The preset targets Tailwind v4 (@tailwindcss/cli or the Vite plugin). v3 is not supported.

Use the preset

Section titled “Use the preset”

In your widget’s CSS entry:

src/styles.css
@import "tailwindcss";
@config "mountly-tailwind/preset";

Or, if you’re on the JS-config style (legacy v4):

tailwind.config.ts
import { mountlyPreset } from "mountly-tailwind";


export default {
  presets: [mountlyPreset],
  content: ["./src/**/*.{ts,tsx,vue,svelte}"],
};

What it provides

Section titled “What it provides”
  • A neutral, accessible base palette (no opinionated brand colours — those are yours).
  • A spacing scale aligned to a 4 px grid.
  • Sensible font defaults that fall back to the host’s stack.
  • Utility extensions that work in both default light DOM and opt-in shadow DOM.

The preset is intentionally small. The point is consistency across widgets, not opinion about your brand.

Tailwind in light DOM (default)

Section titled “Tailwind in light DOM (default)”

In the default light-DOM mount, Tailwind utilities reach into the widget the same way they reach into the rest of your page. Ship one global Tailwind stylesheet through a <link> in the host’s <head> and use utilities directly inside your components. The widget needs nothing extra:

import { createWidget } from "mountly-react";
import Component from "./Component.tsx";


export default createWidget(Component);
<head>
  <link rel="stylesheet" href="/app/dist/globals.css" />
</head>

This is the path most product code wants.

Tailwind inside shadow DOM (shadow: true)

Section titled “Tailwind inside shadow DOM (shadow: true)”

When shadow: true is set, the widget gets a hard style boundary, and Tailwind utilities defined on the host page can’t reach in. Compile Tailwind to a CSS string at build time and ship it as the styles argument so the shadow root has its own copy:

import { createWidget } from "mountly-react";
import Component from "./Component.tsx";
import styles from "./styles.css?inline";   // compiled Tailwind output


export default createWidget(Component, { shadow: true, styles });

Vite’s ?inline query, esbuild’s text loader, and tailwindcss/lib outputs all work — the only requirement is that you end up with a string of CSS at runtime. Note that :root tokens won’t apply inside a shadow root; compile Tailwind to target :host instead.

Skip the preset

Section titled “Skip the preset”

You don’t need mountly-tailwind to use Tailwind in widgets. The preset is purely a starting point — strip it back to a vanilla @import "tailwindcss"; and configure your own theme.

Reference

Section titled “Reference”
  • The mountly-tailwind/preset file is the shipped artifact. See packages/mountly-tailwind/dist/ after a build.