field-tailwind

A pre-built custom field for editing a className string as searchable, multi-add Tailwind class tags instead of a plain text input. Built on a combobox — type to filter a curated catalog of common utilities, select to add chips, and add arbitrary classes (e.g. gap-[7px]) via the “Add …” entry. The stored value is a single space-separated string, so it drops straight onto a component’s className prop.

npm i @reacteditor/field-tailwind --save

pnpm add @reacteditor/field-tailwind

yarn add @reacteditor/field-tailwind

bun add @reacteditor/field-tailwind

`createFieldTailwind`

Use it in place of a { type: "text" } className field:

import { createFieldTailwind } from "@reacteditor/field-tailwind";
 
const config = {
  components: {
    Element: {
      fields: {
        className: createFieldTailwind({ label: "Tailwind" }),
      },
      render: ({ className, children }) => (
        <div className={className}>{children}</div>
      ),
    },
  },
};

Options

Param	Example	Description
`classes`	`classes: ["flex", "grid"]`	Replace the built-in catalog entirely with your own class list.
`extraClasses`	`extraClasses: ["my-utility"]`	Append extra classes to the built-in catalog. Ignored when `classes` is provided.
`placeholder`	`placeholder: "Add classes…"`	Input placeholder. Defaults to `"Add classes…"`.
`label`	`label: "Tailwind"`	Field label shown in the sidebar. Custom fields have no automatic label, so set this to show one.

Exports

Export	Description
`createFieldTailwind`	The field factory.
`TAILWIND_CLASSES`	The built-in class catalog (`string[]`).
`TailwindCombobox`	The underlying combobox component, if you want to reuse it.

Rendering classes in the preview

The field only edits the className value — it does not compile Tailwind. Classes chosen at runtime aren’t in your build-time-compiled CSS, so they won’t render in the editor’s preview iframe unless Tailwind can generate them on the fly. Pair this field with tailwindCdnPlugin, which injects the Tailwind browser JIT (and optionally your theme source) into the iframe.

field-google-fonts field-contentful