Tiptap Editor 3.0 Beta is out. Start here
Tiptap Docs

Style Tiptap UI Components

Add Styles

To enable support for SCSS, install the appropriate SCSS compiler based on your framework setup.

Styles are only added when using the CLI

Styles are included only if you installed a component or template using the CLI. These styles come bundled with whatever you add through the CLI.

For Next.js

  1. Install sass:
pnpm add -D sass
  1. Import the SCSS partials in your main stylesheet:

File: global.css

@import 'path-to/styles/_variables.scss';
@import 'path-to/styles/_keyframe-animations.scss';

For Vite + React

  1. Install sass-embedded:
pnpm add -D sass-embedded
  1. Import the SCSS partials in your main stylesheet:

File: src/index.css

@import 'path-to/styles/_variables.scss';
@import 'path-to/styles/_keyframe-animations.scss';

Make sure the SCSS files are in the correct path so the styles load properly in your project.