Add Tailwind CSS v4 compatibility - #10
Open
Shriyashzzz wants to merge 8 commits into
Open
Shriyashzzz wants to merge 8 commits into
Shriyashzzz wants to merge 8 commits into
Conversation
--tw-content only gets a default empty-string value in v4 when a
before:/after: utility is scanned from user content, since preflight
no longer sets it globally like it did in v3. This plugin writes
&::after { content: var(--tw-content) } directly via addUtilities,
bypassing that detection entirely, so the property stayed undefined
and the pseudo-element never rendered.
Hardcode content: '' instead of relying on Tailwind's conditional
--tw-content reset.
|
@Shriyashzzz is attempting to deploy a commit to the JLN Team on Vercel. A member of the Team first needs to authorize it. |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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 the plugin to work with Tailwind CSS v4, alongside continued support for v3
Got this working with Tailwind v4 while keeping v3 support intact. Summary of changes:
color.ts : swapped out the tailwindcss/lib/util/flattenColorPalette deep import (gone in v4) for a small local version of the same function.
color.ts, spread.ts, variant.ts — dropped the PluginAPI import from tailwindcss/types/config, since that path doesn't exist in v4 anymore. Added a minimal local PluginAPI type in types.ts instead.
index.ts : this was the trickier one. The .highlight::after content relied on var(--tw-content), which v3's preflight always reset to '' globally. V4 only sets that default when it sees an actual before:/after: utility in your markup — since this plugin writes its own ::after rule directly, that never happened, so the highlight silently failed to render. Fixed by just hardcoding content: ''.
tsconfig.json : updated moduleResolution/module to node16, since v4 only resolves through package.json exports maps now. Also scoped include to src/ so it stops pulling in the showcase folder.
package.json : widened the peer dep to allow v3 or v4, and added a prepare script so it actually builds when installed via git.
README : added a quick v4 section showing the @plugin (and @config) loading syntax.
Tested against Tailwind v4.3.3 w clean build, correct CSS output for all utilities, and confirmed visually in a real project.
Thanks for making this, it was a good base to work off of for my own project. Happy to adjust anything if you'd rather approach the v4 support differently