Function themeAsTailwindCss

Creates a static Tailwind V4 CSS config using the given theme. This ensures things look ok (at least with the static defaults) before the js is loaded that sets the final theme variables.

Vars should have a naming scheme like {tailwindType}-{name} (e.g. colors-red).

For InterpolatedVars, {name} would be the instance's name. To name ControlVars, they should be added to the theme like so:

new Theme({"color-fancy-red": new ControlVar(...) })
Copy

You can make a ControlVar top level so it's not prefixed with the type (e.g. color) by adding it to the topLevel option:

new Theme({"number-spacing": new ControlVar(...) })

createTailwindPlugin(baseTheme, {
	topLevel: ["number-spacing"] // will output `--spacing: ...`
})
Copy

Since it's a bit weird to have variables named --colors-red-000, there is a twTypeMap option that allows you to map an extracted type to a tailwind config key. For example, you can pass {color:"colors"} to be able to call variables color-*.

By default the following function is used as the value on the tailwind variables:

(key, value, _entry): string => `--${escapeKey(key, "-")}: ${value};`
Copy

You can change this per type by using the convertValueMap option.

import { escapeKey, createTailwindPlugin } from "metamorphosis/tailwind"
createTailwindPlugin(baseTheme, {
	convertValueMap: {
		color: (key, value, entry) => ...
	}
 })
Copy

You can also exclude variables from the tailwind config by setting excludeTw.

Default versions of interpolated variables can be specified with the defaultsMap:

createTailwindPlugin(baseTheme, {
	defaultsMap: {
		"color-neutral": "50",
	   "color-red": "500"
	},
})
Copy