Skip to content

fix: multiple tailwind v4 fixes #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 1, 2025
Merged

fix: multiple tailwind v4 fixes #199

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion src/removeUnsupported.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const { writeFileSync } = require("fs");

const remRE = /\d?\.?\d+\s*r?em/g;

function isSupportedProperty(prop, val = null) {
Expand Down Expand Up @@ -44,6 +46,10 @@ module.exports = (options = { debug: false }) => {
mediaAtRule.remove();
},
},
// Uncomment to debug the final output
// OnceExit(rule) {
// writeFileSync('./tailwind-output.css', rule.toString());
// },
Rule(rule) {
// remove empty rules
if (rule.nodes.length === 0) {
Expand Down Expand Up @@ -90,7 +96,14 @@ module.exports = (options = { debug: false }) => {
);
}

// replace space and divide selectors to use a simpler selector that works in ns
// replace space and divide selectors to use a simpler selector that works in ns (v4 and newer)
if (rule.selector.includes(":not(:last-child)")) {
rule.selectors = rule.selectors.map((selector) => {
return selector.replace(":not(:last-child)", "* + *");
});
}

// replace space and divide selectors to use a simpler selector that works in ns (older versions)
if (rule.selector.includes(":not([hidden]) ~ :not([hidden])")) {
rule.selectors = rule.selectors.map((selector) => {
return selector.replace(":not([hidden]) ~ :not([hidden])", "* + *");
Expand All @@ -107,6 +120,16 @@ module.exports = (options = { debug: false }) => {
}
}

// tailvind v4 changed how the divide and space utilities work, now we need to set two variables called
// --tw-divide-x-reverse and --tw-divide-y-reverse but for them to work we need to remove the variable
// declarations from the divide and space utilities classes
const broken = /--tw-(divide|space)-[xy]-reverse/g;

if (decl.prop?.match(broken) && decl.parent.selector?.match(/\.(divide|space)-[xy]/)) {
return decl.remove();
}


// invalid with core 8.8+ at moment
// Note: could be supported at somepoint
if (decl.prop === "placeholder-color" && decl.value?.includes("color-mix")) {
Expand Down Expand Up @@ -226,6 +249,7 @@ const supportedProperties = {
"font-size": true,
"font-style": ["italic", "normal"],
"font-weight": true,
"font-variation-settings": true,
height: true,
"highlight-color": true,
"horizontal-align": ["left", "center", "right", "stretch"],
Expand Down Expand Up @@ -271,6 +295,7 @@ const supportedProperties = {
"text-shadow": true,
"text-transform": ["none", "capitalize", "uppercase", "lowercase"],
transform: true,
rotate: true,
"vertical-align": ["top", "center", "bottom", "stretch"],
visibility: ["visible", "collapse"],
width: true,
Expand Down