fix: Remove Tailwind dependency from ShadCN package

[matthewlipski]

This PR is a proposal to change the TailwindCSS/ShadCN setup. Currently, we do @import tailwindcss in style.css. This will generate CSS from all of the utility classes that Tailwind detects in the code, and that has multiple issues:

• Duplicate Tailwind CSS rules
• BlockNote doesn't respect the Tailwind/ShadCN theme of the parent application
• We have to scope the BlockNote Tailwind CSS to prevent conflicts (which is why we have things like the bn- prefix)

In practice, this doesn't make sense. We expect @blocknote/shadcn to be used in an app that already uses Tailwind, and probably ShadCN. Therefore, it imo doesn't make sense to include Tailwind at all in the package, and rely on the parent application to have a Tailwind dependency. This way, all of the above issues are resolved.

There is one caveat to this - Tailwind only generates CSS based on the utility classes it finds in your code, which is why we previously needed to include that generated CSS in the built files. Since the @blocknote/shadcn package is buried inside node_modules, Tailwind doesn't check the code there, and there is no way to guarantee that the parent app would use all of the utility classes that BlockNote uses to generate all the necessary CSS. However, Tailwind v4 introduced the @source directive for this exact purpose, so the parent app can now point Tailwind to the code in @blocknote/shadcn and generate all the additional CSS needed.

Tailwind utility classes for ShadCN are also no longer in the @blocknote/shadcn package, and the parent app is instead expected to define them. Even if the parent app doesn't use ShadCN and only uses Tailwind, the worst case is that you have to paste some CSS from here.

You can see how this works in the playground, which is now solely responsible for importing Tailwind and generating its CSS. It also has the CSS variables and Tailwind classes needed for ShadCN.

TODO:

• Add Tailwind peer dependency to @blocknote/shadcn
• For future: should we rely on parent app to provide the ShadCN components too?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
blocknote	Ready	Preview	Aug 27, 2025 10:51am
blocknote-website	Error		Aug 27, 2025 10:51am

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1964

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1964

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1964

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1964

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1964

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1964

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1964

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1964

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1964

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@1964

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1964

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1964

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1964

commit: 042d80c

[nperez0111]

Fantastic, I think this will definitely simplify things for people using ShadCN & keeps our scope down too.