Skip to content

feat: support tailwindcss v4 #194

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
NathanWalker merged 3 commits into from
Feb 26, 2025
+31 −4
Merged

feat: support tailwindcss v4 #194

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a463768
feat: support tailwindcss v4
NathanWalker Jan 25, 2025
43138f2
fix: css rule exclusions and config
NathanWalker Feb 6, 2025
669ccc7
fix: added missing supported margin properties (#195)
CatchABus Feb 19, 2025
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
Prev Previous commit
Next Next commit
fix: css rule exclusions and config
  • Loading branch information
@NathanWalker
NathanWalker committed Feb 6, 2025
commit 43138f25771cce69862e4ca4362b7086f8b2b401
2 changes: 1 addition & 1 deletion nativescript.webpack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = (webpack) => {
const addPostCSSPlugins = (options = {}) => {
return webpack.merge(options, {
postcssOptions: {
plugins: ["@tailwindcss/postcss", "@nativescript/tailwind", "@csstools/postcss-is-pseudo-class"],
plugins: ["postcss-preset-env", "@tailwindcss/postcss", "@nativescript/tailwind", "@csstools/postcss-is-pseudo-class"],
},
});
};
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@
"dependencies": {
"@hookun/parse-animation-shorthand": "^0.1.4",
"@csstools/postcss-is-pseudo-class": "~5.0.1",
"@tailwindcss/postcss": "^4.0.0"
"@tailwindcss/postcss": "^4.0.0",
"postcss-preset-env": "^10.1.3"
},
"peerDependencies": {
"postcss": "^8.0.0"
Expand Down
19 changes: 19 additions & 0 deletions src/removeUnsupported.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@ module.exports = (options = { debug: false }) => {
return rule.remove();
}

// replace :root and :host pseudo selector, introduced in Tailwind 4+ with .ns-root for var handling.
if (rule.selector.includes(":root") || rule.selector.includes(":host")) {
rule.selectors = rule.selectors.map((selector) =>
selector.replace(/:root/, ".ns-root").replace(/:host/, ".ns-root")
);
}

// remove rules with unsupported selectors
if (!isSupportedSelector(rule.selector)) {
return rule.remove();
Expand Down Expand Up @@ -99,6 +106,18 @@ module.exports = (options = { debug: false }) => {
}
}

// invalid with core 8.8+ at moment
// Note: could be supported at somepoint
if (decl.prop === "placeholder-color" && decl.value?.includes("color-mix")) {
return decl.remove();
}

// invalid with core 8.8+ at moment
// Note: could be supported at somepoint
if (decl.value?.includes("currentColor")) {
return decl.remove();
}

// replace vertical-align: middle
// with vertical-align: center
if (decl.prop === "vertical-align") {
Expand Down