[Snyk] Security upgrade tailwindcss from 3.4.14 to 4.0.0

[sestinj]

Snyk has created this PR to fix 1 vulnerabilities in the npm dependencies of this project.

Snyk changed the following file(s):

• extensions/vscode/package.json

Vulnerabilities that will be fixed with an upgrade:

	Issue	Score
	Uncontrolled Recursion SNYK-JS-BRACES-19963945	721

Breaking Change Risk

Notice: This assessment is enhanced by AI.

---

Important

• Check the changes in this PR to ensure they won't cause issues with your project.
• Max score is 1000. Note that the real score may have changed since the PR was raised.
• This PR was automatically created by Snyk using the credentials of a real user.

---

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open fix PRs.

For more information:
🧐 View latest project report
📜 Customise PR templates
🛠 Adjust project settings
📚 Read about Snyk's upgrade logic

---

Learn how to fix vulnerabilities with free interactive lessons:

🦉 Uncontrolled Recursion

[sestinj]

The upgrade from Tailwind CSS v3 to v4 is a major version jump with significant architectural changes and multiple breaking changes. It requires a migration process that involves more than just updating a dependency.

Key Breaking Changes:

• CSS-First Configuration: The tailwind.config.js file is no longer the primary way to configure Tailwind. Customizations are now defined directly in your CSS file using the @theme directive. While a legacy config file can be loaded via @config, this is a temporary solution with limitations.
• New Engine and Tooling: Tailwind v4 uses a new high-performance engine (written in Rust) and is no longer just a PostCSS plugin. The PostCSS plugin now lives in a separate @tailwindcss/postcss package. Built-in features now handle CSS imports and vendor prefixing, potentially removing the need for tools like postcss-import and autoprefixer.
• Modern Browser Baseline: v4 is designed for modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+). Projects needing to support older browsers should not upgrade.
• Directive and Utility Changes:
  • The @tailwind directives are replaced by a single @import "tailwindcss";.
  • Several deprecated utilities like flex-grow-* and text-opacity-* have been removed.
  • The default ring utility width has changed from 3px to 1px, and its color now defaults to currentColor.
  • The default border color now defaults to currentColor.

Recommendation:

This is a high-impact upgrade that requires careful planning. Do not merge this upgrade without manual intervention.

1. Use the Automated Upgrade Tool: The Tailwind team provides an official upgrade tool to automate most of the migration. Run npx @tailwindcss/upgrade in a separate branch to handle dependency updates and configuration migration. This tool requires Node.js 20+.
2. Review Build Process: Update your build configuration (e.g., postcss.config.js, vite.config.js) to use the new @tailwindcss/postcss or @tailwindcss/vite packages.
3. Thoroughly Test: After running the migration, conduct a full visual regression test to catch any unexpected styling changes resulting from updated defaults and utility removals.

Source: Official Upgrade Guide

Notice 🤖: This content was augmented using artificial intelligence. AI-generated content may contain errors and should be reviewed for accuracy before use.