Tailwind

A drop-in theme that maps Lexical node classes to Tailwind utility classes, so you can style the editor with the same vocabulary as the rest of your app.

Install

pnpm add @typix-editor/extension-tailwind

Live demo

Config

TailwindExtension(config?) accepts a TailwindConfig to override the default class mappings:

TailwindExtension({
  heading: {
    h1: "text-4xl font-bold tracking-tight",
    h2: "text-2xl font-semibold",
  },
  paragraph: "leading-relaxed",
  // ...
});

When to use

• Tailwind-first project — match your design system's typography.
• Quick styling override — change a single class without writing CSS.
• Bypassing defaultTheme — replace the .typix-* class hierarchy with utility classes.

Related