Skip to main content
ProseKit provides a headless editor framework that gives you complete control over your editor’s appearance. This guide will walk you through the various ways to style your ProseKit editor.

​
Basic Styles

ProseKit requires some basic styles to function properly. Import prosekit/basic/style.css in your project to include these styles. 
// Import the basic styles (required)
import 'prosekit/basic/style.css'
Always include the core styles from prosekit/basic/style.css in your project. Without these styles, your editor may not behave correctly.

​
Typography Styles

ProseKit provides an optional set of typography styles that make your editor content look polished with minimal effort. prosekit/basic/typography.css provides a beautiful set of default styles for headings, paragraphs, lists, and other elements: 
// Import both basic and typography styles
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'
The typography stylesheet includes:
  • Beautiful heading styles (h1-h6)
  • Optimized paragraph spacing
  • Styled lists (ordered and unordered)
  • Code block styling
  • Blockquote formatting
  • Table styling

​
Styling with Tailwind CSS

1

Install Tailwind CSS

If you haven’t already, install Tailwind CSS in your project:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
2

Apply utility classes

ProseKit works seamlessly with Tailwind CSS. You can apply utility classes to the editor container and elements:
<div ref={editor.mount} className="
  prose prose-slate
  max-w-none
  focus:outline-none
  p-4
  min-h-[200px]
  border border-gray-300
  rounded-lg
" />
3

Use Tailwind Typography

For pre-built editor components that use Tailwind CSS, consider using the @tailwindcss/typography plugin:
npm install -D @tailwindcss/typography
Then add it to your tailwind.config.js:
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

​
Custom CSS Styling

You can customize the editor appearance using custom CSS classes. Target specific elements within the editor: 
/* Style the editor container */
.prosekit-editor {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

/* Style headings */
.prosekit-editor h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.prosekit-editor h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Style paragraphs */
.prosekit-editor p {
  margin-bottom: 1rem;
  color: #374151;
}

/* Style code blocks */
.prosekit-editor pre {
  background: #1f2937;
  color: #f9fafb;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

/* Style inline code */
.prosekit-editor code {
  background: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

/* Style blockquotes */
.prosekit-editor blockquote {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  font-style: italic;
  color: #6b7280;
}

​
Styling Editor States

Style different editor states like focus, hover, and selection: 
/* Focus state */
.prosekit-editor:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Placeholder text */
.prosekit-editor .ProseMirror-empty:first-child::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
  position: absolute;
}

/* Selection highlight */
.prosekit-editor .ProseMirror-selectednode {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

​
Dark Mode Support

Implement dark mode styling using CSS variables or Tailwind’s dark mode:

​
Using CSS Variables

:root {
  --editor-bg: #ffffff;
  --editor-text: #1f2937;
  --editor-border: #d1d5db;
}

[data-theme="dark"] {
  --editor-bg: #1f2937;
  --editor-text: #f9fafb;
  --editor-border: #374151;
}

.prosekit-editor {
  background: var(--editor-bg);
  color: var(--editor-text);
  border-color: var(--editor-border);
}

​
Using Tailwind Dark Mode

<div ref={editor.mount} className="
  bg-white dark:bg-gray-900
  text-gray-900 dark:text-gray-100
  border-gray-300 dark:border-gray-700
  prose dark:prose-invert
" />

​
Responsive Styling

Make your editor responsive across different screen sizes: 
/* Mobile */
@media (max-width: 640px) {
  .prosekit-editor {
    padding: 0.75rem;
    font-size: 0.875rem;
  }
}

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

/* Desktop */
@media (min-width: 1025px) {
  .prosekit-editor {
    padding: 1.5rem;
    font-size: 1.125rem;
  }
}

​
Troubleshooting

​
Styles not applying

If your styles aren’t applying:
  1. Ensure you’ve imported prosekit/basic/style.css
  2. Check that your CSS specificity is high enough
  3. Verify your CSS is loaded after ProseKit’s base styles
  4. Inspect the DOM to confirm the correct classes are applied

​
Typography conflicts

If you’re experiencing conflicts with the typography styles:
  1. Import prosekit/basic/style.css without typography.css
  2. Create your own custom typography styles
  3. Use CSS modules or scoped styles to avoid conflicts

​
Tailwind purging styles

If Tailwind is removing your styles in production:
  1. Add ProseKit paths to your tailwind.config.js content array:
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/prosekit/**/*.{js,jsx,ts,tsx}',
  ],
}

​
Next Steps