chore: Tailwind v4 + ShadCN update #1959
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/mantine
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
* Removed prefix * Removed Tailwind dependency from ShadCN package * Removed unneeded ShadCN things from playground * Removed `tailwind-merge` dep from playground * Moved tailwind import & shadcn theme from playground to example * Small fix * Fixed docs
Collaborator
|
nice! @matthewlipski does this close any open issues? |
Collaborator
Author
|
Good point! Closes #1248 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR updates TailwindCSS and ShadCN to the newest versions, and also changes the overall setup for the
@blocknote/shadcnpackage.Currently, we import Tailwind styles in
@blocknote/shadcn/src/style.css. This generates CSS from all of the utility classes that Tailwind detects in the code, and that has multiple issues:bn-prefix).In practice, this doesn't make sense. We expect
@blocknote/shadcnto be used in an app that already uses Tailwind, and probably ShadCN. Therefore, it doesn't make sense to include Tailwind at all in the package, and should instead rely on the parent application to handle importing the Tailwind styles. 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/shadcnpackage is buried insidenode_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@sourcedirective for this exact purpose, so the parent app can now point Tailwind to the code in@blocknote/shadcnand generate all the additional CSS needed.So this PR removes the Tailwind dependency from the
@blocknote/shadcnpackage, and the parent app is instead expected to handle it. 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 to set up the theme. In our case, the ShadCN example is responsible for importing Tailwind styles and setting up the ShadCN theme.