Introduction

ProseKit provides a set of components that you can copy and paste into your project. These components are styled with Tailwind CSS, allowing you to create beautiful, responsive editors with minimal effort.

1. Install Tailwind CSS

   If you haven’t already, set up Tailwind CSS in your project:

   • pnpm
   • npm
   • yarn
   • bun

   pnpm add tailwindcss postcss autoprefixer

   For detailed installation instructions, see the Tailwind CSS documentation.

2. Install recommended plugins

   For the best experience with ProseKit components, install these Tailwind CSS plugins:

   • pnpm
   • npm
   • yarn
   • bun

   pnpm add tailwindcss-animate @egoist/tailwindcss-icons @iconify-json/lucide

3. Configure Tailwind CSS

   Update your Tailwind CSS configuration:

   tailwind.config.js

   import { iconsPlugin } from '@egoist/tailwindcss-icons'
   import animatePlugin from 'tailwindcss-animate'
   
   export default {
     content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
     plugins: [iconsPlugin(), animatePlugin],
   }

4. That’s it

   You can now start adding components to your project.