> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling the Editor

> Learn how to customize the appearance of your Tiptap editor

# Styling the Editor

Tiptap is designed to be unstyled by default, giving you complete control over the appearance of your editor. However, it does include some minimal base styles to ensure proper functionality.

## Base Styles

Tiptap automatically injects minimal CSS styles required for the editor to function properly. These styles are injected by default but can be disabled.

<CodeGroup>
  ```css Base ProseMirror Styles theme={null}
  .ProseMirror {
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: break-spaces;
    -webkit-font-variant-ligatures: none;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0;
  }

  .ProseMirror [contenteditable="false"] {
    white-space: normal;
  }

  .ProseMirror [contenteditable="false"] [contenteditable="true"] {
    white-space: pre-wrap;
  }

  .ProseMirror pre {
    white-space: pre-wrap;
  }

  .ProseMirror:focus {
    outline: none;
  }
  ```
</CodeGroup>

Source: `packages/core/src/style.ts:1`

## Disabling CSS Injection

You can disable automatic CSS injection and provide your own styles.

<CodeGroup>
  ```typescript Disable CSS Injection theme={null}
  import { Editor } from '@tiptap/core'
  import StarterKit from '@tiptap/starter-kit'

  const editor = new Editor({
    element: document.querySelector('.editor'),
    extensions: [StarterKit],
    injectCSS: false, // Disable automatic CSS injection
  })
  ```
</CodeGroup>

Source: `packages/core/src/Editor.ts:88`

## Editor Container Styling

Style the editor container to customize its appearance.

<CodeGroup>
  ```css Editor Container theme={null}
  /* Basic editor styling */
  .tiptap {
    padding: 1rem;
    min-height: 200px;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: white;
  }

  /* Focus state */
  .tiptap:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }

  /* Caret color */
  .tiptap {
    caret-color: #6366f1;
  }
  ```
</CodeGroup>

Source: `demos/src/Examples/Default/React/styles.scss:55`

## Content Styling

Style the content inside the editor.

<CodeGroup>
  ```css Content Styles theme={null}
  /* Headings */
  .tiptap h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 1.5rem 0 1rem;
  }

  .tiptap h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 1.25rem 0 0.75rem;
  }

  .tiptap h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 1rem 0 0.5rem;
  }

  /* Paragraphs */
  .tiptap p {
    margin: 0.75rem 0;
    line-height: 1.6;
  }

  /* Lists */
  .tiptap ul,
  .tiptap ol {
    padding-left: 1.5rem;
    margin: 0.75rem 0;
  }

  .tiptap li {
    margin: 0.25rem 0;
  }

  /* Blockquotes */
  .tiptap blockquote {
    border-left: 4px solid #e2e8f0;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #64748b;
    font-style: italic;
  }

  /* Code */
  .tiptap code {
    background: #f1f5f9;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875em;
    color: #e11d48;
  }

  .tiptap pre {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
  }

  .tiptap pre code {
    background: none;
    color: inherit;
    font-size: 0.875rem;
    padding: 0;
  }

  /* Marks */
  .tiptap strong {
    font-weight: 700;
  }

  .tiptap em {
    font-style: italic;
  }

  .tiptap mark {
    background: #fef08a;
    padding: 0.125rem 0;
    border-radius: 0.125rem;
  }

  .tiptap a {
    color: #6366f1;
    text-decoration: underline;
    cursor: pointer;
  }

  .tiptap a:hover {
    color: #4f46e5;
  }
  ```
</CodeGroup>

## Placeholder Styling

Style placeholder text for empty content.

<CodeGroup>
  ```css Placeholder theme={null}
  /* Using the Placeholder extension */
  .tiptap p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #adb5bd;
    pointer-events: none;
    height: 0;
  }

  /* Alternative approach */
  .tiptap.is-empty::before {
    content: 'Write something...';
    color: #adb5bd;
    position: absolute;
    pointer-events: none;
  }
  ```
</CodeGroup>

## Selection Styling

Customize text selection appearance.

<CodeGroup>
  ```css Selection theme={null}
  .tiptap ::selection {
    background: rgba(99, 102, 241, 0.2);
  }

  .tiptap::-moz-selection {
    background: rgba(99, 102, 241, 0.2);
  }
  ```
</CodeGroup>

## Gap Cursor Styling

The gap cursor appears between block nodes.

<CodeGroup>
  ```css Gap Cursor theme={null}
  .ProseMirror-gapcursor {
    display: none;
    pointer-events: none;
    position: absolute;
    margin: 0;
  }

  .ProseMirror-gapcursor:after {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    width: 20px;
    border-top: 1px solid #6366f1;
    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
  }

  @keyframes ProseMirror-cursor-blink {
    to {
      visibility: hidden;
    }
  }

  .ProseMirror-focused .ProseMirror-gapcursor {
    display: block;
  }
  ```
</CodeGroup>

Source: `packages/core/src/style.ts:34`

## Dark Mode

Implement dark mode for your editor.

<CodeGroup>
  ```css Dark Mode theme={null}
  /* Dark mode container */
  .dark .tiptap {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
  }

  .dark .tiptap:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
  }

  /* Dark mode content */
  .dark .tiptap h1,
  .dark .tiptap h2,
  .dark .tiptap h3 {
    color: #f1f5f9;
  }

  .dark .tiptap code {
    background: #334155;
    color: #fb7185;
  }

  .dark .tiptap pre {
    background: #0f172a;
  }

  .dark .tiptap blockquote {
    border-left-color: #475569;
    color: #94a3b8;
  }

  .dark .tiptap mark {
    background: #854d0e;
    color: #fef08a;
  }

  .dark .tiptap a {
    color: #818cf8;
  }

  .dark .tiptap a:hover {
    color: #a5b4fc;
  }
  ```
</CodeGroup>

## CSS Variables

Use CSS variables for consistent theming.

<CodeGroup>
  ```css CSS Variables theme={null}
  :root {
    /* Colors */
    --editor-bg: #ffffff;
    --editor-text: #1e293b;
    --editor-border: #e2e8f0;
    --editor-focus: #6366f1;
    --editor-placeholder: #94a3b8;
    
    /* Spacing */
    --editor-padding: 1rem;
    --editor-border-radius: 0.5rem;
    
    /* Typography */
    --editor-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --editor-font-size: 1rem;
    --editor-line-height: 1.6;
  }

  .dark {
    --editor-bg: #1e293b;
    --editor-text: #e2e8f0;
    --editor-border: #334155;
    --editor-focus: #6366f1;
    --editor-placeholder: #64748b;
  }

  .tiptap {
    background: var(--editor-bg);
    color: var(--editor-text);
    border: 1px solid var(--editor-border);
    border-radius: var(--editor-border-radius);
    padding: var(--editor-padding);
    font-family: var(--editor-font-family);
    font-size: var(--editor-font-size);
    line-height: var(--editor-line-height);
  }

  .tiptap:focus {
    border-color: var(--editor-focus);
  }
  ```
</CodeGroup>

Source: `demos/src/Examples/Default/React/styles.scss:1`

## Typography with Tailwind

Use Tailwind's typography plugin for beautiful defaults.

<CodeGroup>
  ```html Tailwind Typography theme={null}
  <template>
    <EditorContent 
      :editor="editor" 
      class="prose prose-lg max-w-none focus:outline-none"
    />
  </template>
  ```

  ```css Tailwind Config theme={null}
  module.exports = {
    theme: {
      extend: {
        typography: {
          DEFAULT: {
            css: {
              maxWidth: 'none',
              color: '#1e293b',
              a: {
                color: '#6366f1',
                '&:hover': {
                  color: '#4f46e5',
                },
              },
            },
          },
        },
      },
    },
    plugins: [
      require('@tailwindcss/typography'),
    ],
  }
  ```
</CodeGroup>

## Custom Node Styling

Add custom classes to specific node types.

<CodeGroup>
  ```typescript Custom Node Classes theme={null}
  import { Node } from '@tiptap/core'

  export const Paragraph = Node.create({
    name: 'paragraph',
    
    addOptions() {
      return {
        HTMLAttributes: {
          class: 'my-paragraph',
        },
      }
    },
  })
  ```

  ```css Custom Node Styles theme={null}
  .my-paragraph {
    margin: 1rem 0;
    line-height: 1.8;
    color: #334155;
  }

  .my-paragraph:first-child {
    margin-top: 0;
  }

  .my-paragraph:last-child {
    margin-bottom: 0;
  }
  ```
</CodeGroup>

## Responsive Design

Make your editor responsive.

<CodeGroup>
  ```css Responsive Styles theme={null}
  /* Mobile */
  @media (max-width: 640px) {
    .tiptap {
      padding: 0.75rem;
      font-size: 0.9375rem;
    }
    
    .tiptap h1 {
      font-size: 1.5rem;
    }
    
    .tiptap h2 {
      font-size: 1.25rem;
    }
  }

  /* Tablet */
  @media (min-width: 641px) and (max-width: 1024px) {
    .tiptap {
      padding: 1rem;
    }
  }

  /* Desktop */
  @media (min-width: 1025px) {
    .tiptap {
      padding: 1.5rem;
      max-width: 65ch;
      margin: 0 auto;
    }
  }
  ```
</CodeGroup>

## Print Styles

Optimize editor content for printing.

<CodeGroup>
  ```css Print Styles theme={null}
  @media print {
    .tiptap {
      border: none;
      padding: 0;
    }
    
    .tiptap a {
      text-decoration: underline;
      color: #000;
    }
    
    .tiptap a[href]:after {
      content: " (" attr(href) ")";
    }
    
    .tiptap pre,
    .tiptap blockquote {
      page-break-inside: avoid;
    }
  }
  ```
</CodeGroup>

## Scrollbar Styling

Customize scrollbar appearance.

<CodeGroup>
  ```css Custom Scrollbar theme={null}
  .tiptap::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }

  .tiptap::-webkit-scrollbar-track {
    background-clip: padding-box;
    background-color: transparent;
    border: 4px solid transparent;
    border-radius: 8px;
  }

  .tiptap::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: rgba(0, 0, 0, 0);
    border: 4px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
  }

  .tiptap:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .tiptap::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.15);
  }
  ```
</CodeGroup>

Source: `demos/preview/style.css:101`

<Note>
  Remember that Tiptap is headless, so you have complete control over styling. The examples above are just starting points.
</Note>

## Next Steps

<CardGroup cols={2}>
  <Card title="TypeScript" icon="code" href="/guides/typescript">
    Add type safety to your editor
  </Card>

  <Card title="Collaborative Editing" icon="users" href="/guides/collaborative-editing">
    Enable real-time collaboration
  </Card>
</CardGroup>