Style Tiptap UI Components
Add Styles
Component styles are written in SCSS. The SCSS compiler (sass or sass-embedded) is installed automatically when you install a component or template using the Tiptap CLI. If you follow a manual setup, you'll need to install it manually.
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.
Bun projects automatically convert SCSS to CSS
If you’re using Bun, the CLI automatically converts all .scss files into .css files during installation. This means your imports should use .css instead of .scss, for example:
@import './styles/_variables.css';
@import './styles/_keyframe-animations.css';
For Next.js
When a template or component is added to your Next.js project, global SCSS files are automatically added in the styles directory.
Import the global SCSS styles in the main stylesheet:
File: app/globals.css
@import '../styles/_variables.scss'; @import '../styles/_keyframe-animations.scss';For Vite + React
When a template or component is added to your Vite + React project, global SCSS files are automatically added in the src/styles directory.
Import the global SCSS styles in the main stylesheet:
File: src/index.css
@import './styles/_variables.scss'; @import './styles/_keyframe-animations.scss';Make sure the SCSS files are in the correct path so the styles load properly in your project.