Styling the Editor

Tiptap follows a headless-first approach, which means the core extensions come without any styling or UI components - just pure logic. This gives you complete control over how your editor looks and behaves.

However, we now also offer optional UI components and templates that you can use to accelerate your development.

Get started with UI templates

Our UI templates include pre-built components for common editor features. Download the source code and customize to your needs.

Get UI components

Building your own UI

If you prefer to build your own UI or need to understand how styling works in Tiptap, here are the available methods

Style plain HTML

The entire editor is rendered inside a container with the class .tiptap. You can use that to scope your styling to the editor content:

/* Scoped to the editor */
.tiptap p {
  margin: 1em 0;
}

If you're rendering the stored content elsewhere, there won't be a .tiptap container, so you can globally add styling to the relevant HTML tags:

/* Global styling */
p {
  margin: 1em 0;
}

Add custom classes

You can control the whole rendering, including adding classes to everything.

Extensions

Most extensions allow you to add attributes to the rendered HTML through the HTMLAttributes option. You can use that to add a custom class (or any other attribute). That's also very helpful when you work with Tailwind CSS.

new Editor({
  extensions: [
    Document,
    Paragraph.configure({
      HTMLAttributes: {
        class: 'my-custom-paragraph',
      },
    }),
    Heading.configure({
      HTMLAttributes: {
        class: 'my-custom-heading',
      },
    }),
    Text,
  ],
})

The rendered HTML will look like this:

<h1 class="my-custom-heading">Example Text</h1>
<p class="my-custom-paragraph">Wow, that's really custom.</p>

If there are already classes defined by the extensions, your classes will be added.

Editor

You can even pass classes to the element that contains the editor:

new Editor({
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
  },
})

Customize HTML

Or you can customize the markup for extensions. The following example will make a custom bold extension that doesn't render a <strong> tag, but a <b> tag:

import Bold from '@tiptap/extension-bold'

const CustomBold = Bold.extend({
  renderHTML({ HTMLAttributes }) {
    // Original:
    // return ['strong', HTMLAttributes, 0]
    return ['b', HTMLAttributes, 0]
  },
})

new Editor({
  extensions: [
    // …
    CustomBold,
  ],
})

You should place your custom extensions in separate files for better organization, but you get the idea.

Style using Tailwind CSS

Since content managed in Tiptap is plain HTML which by default doesn't come with Tailwind CSS classes, you have a few approaches to style your editor:

Using a global CSS file and @apply

Even though the Tailwind maintainers recommend not using @apply we think it's the best way to define styles for flexible, user written content like Tiptaps content. You can use a global CSS file and apply Tailwind styles to HTML tags inside your editor. Since nested selectors are now widely supported, you can scope your styles to the .tiptap class:

.tiptap {
  p {
    @apply my-4 first:mt-0 last:mb-0 text-base leading-relaxed;
  }

  h1 {
    @apply text-3xl font-bold mt-8 mb-4 first:mt-0 last:mb-0;
  }
}

Adding classes to your extensions

If you don't want to use a global CSS file, a more complicated approach would be to extend existing components and add Tailwind classes to the HTMLAttributes inside the renderHTML output.

import Paragraph from '@tiptap/extension-paragraph'

const TailwindParagraph = Paragraph.extend({
  renderHTML({ HTMLAttributes }) {
    return [
      'p',
      {
        ...HTMLAttributes,
        class: 'my-4 first:mt-0 last:mb-0 text-base leading-relaxed',
      },
      0,
    ]
  },
})

This approach can work but will become more complicated with more complicated extensions or when NodeViews are used so we still would recommend using a global CSS file with @apply for most cases.

Using the @tailwindcss/typography plugin

The editor works fine with Tailwind CSS, too. Find an example that's styled with the @tailwindcss/typography plugin below.

Intellisense

If you're using TailwindCSS Intellisense, add this snippet to your .vscode/setting.json to enable intellisense support inside Tiptap objects:

"tailwindCSS.experimental.classRegex": [
  "class:\\s*?[\"'`]([^\"'`]*).*?,"
]

Next steps

• Learn more about Tiptaps concepts
• Learn how to persist the editor state
• Start building your own extensions