feat(tailwind): migrate to v4

COLLABORATOR_GUIDE.md

@@ -75,11 +75,6 @@ The Node.js Website is built upon [React][] and [Next.js][] respectively, the UI
 The Website also uses several other Open Source libraries (not limited to) listed below:
 
 - Styling is done with [PostCSS][] and CSS Modules
-  - We use a combination of PostCSS plugins to create a [Sass](https://sass-lang.com/) alike environment
-  - We recommend reading the documentation of our plugins in case of doubt
-    - [PostCSS Mixins](https://github.com/postcss/postcss-mixins)
-    - [PostCSS Import](https://github.com/postcss/postcss-import)
-    - [PostCSS Simple Vars](https://github.com/postcss/postcss-simple-vars)
 - [Tailwind][] is used as our CSS Framework and the Foundation of our Design System
 - [Hero Icons](https://heroicons.com/) is an SVG Icon Library used within our Codebase
 - [Radix UI][] is a collection of customizable UI components
@@ -577,15 +572,11 @@ We currently use a set of PostCSS plugins that create a SCSS-a-like environment.
 
 #### What PostCSS Plugins we use?
 
-- `postcss-mixins`: Allows us to use Sass-like Mixins
-- `postcss-import`: Allows us to use Sass-like Imports
-- `postcss-simple-vars`: Allows us to use Sass-like Variables
-- `postcss-nested`: Allows us to use Sass-like Nesting
 - `postcss-calc`: Strips `calc` expressions and replaces them with the result
+- `@tailwindcss/postcss`: Allows us to use Tailwind within PostCSS
 
 It is important to mention that even though we use SCSS-like syntax, we do not use SCSS, and some of these plugins
 are not 100% compatible with the SCSS syntax.
-For example, `postcss-mixins` does not support `@include` and `@extend` directives (and it uses `@define-mixin` for defining Mixins and `@mixin` for including Mixins).
 
 #### Do we use a CSS Framework?
 

apps/site/.postcssrc.json

@@ -1,11 +1,6 @@
 {
   "plugins": {
-    "postcss-mixins": {},
-    "postcss-simple-vars": {},
     "postcss-calc": {},
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    "tailwindcss": {},
-    "autoprefixer": {}
+    "@tailwindcss/postcss": {}
   }
 }

apps/site/.stylelintrc.mjs

@@ -4,12 +4,14 @@ const CUSTOM_AT_RULES = [
   'apply',
   'layer',
   'responsive',
+  'reference',
+  'utility',
+  'theme',
+  'custom-variant',
   'screen',
+  'source',
   'tailwind',
   'variants',
-  // PostCSS-specific at-rules
-  'define-mixin',
-  'mixin',
 ];
 
 // Enforces certain selectors to be only in camelCase notation
@@ -42,6 +44,6 @@ export default {
     // Adopts the import notation from `postcss-import`
     'import-notation': 'string',
     // Allow the `@apply` at rule as its part of Tailwind
-    'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
+    'at-rule-no-deprecated': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
   },
 };

apps/site/app/[locale]/next-data/og/[category]/[title]/route.tsx

@@ -4,13 +4,13 @@ import { ImageResponse } from 'next/og';
 
 import { DEFAULT_CATEGORY_OG_TYPE } from '@/next.constants.mjs';
 import { defaultLocale } from '@/next.locales.mjs';
-import tailwindConfig from '@/tailwind.config';
 import { hexToRGBA } from '@/util/hexToRGBA';
 
+// TODO: use CSS variables instead of absolute values
 const CATEGORY_TO_THEME_COLOUR_MAP = {
-  announcement: tailwindConfig.theme.colors.green['700'],
-  release: tailwindConfig.theme.colors.info['600'],
-  vulnerability: tailwindConfig.theme.colors.warning['600'],
+  announcement: '#1a3f1d',
+  release: '#0c7bb3',
+  vulnerability: '#ae5f00',
 };
 
 type Category = keyof typeof CATEGORY_TO_THEME_COLOUR_MAP;

apps/site/components/Blog/BlogHeader/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .blogHeader {
   h1 {
     @apply inline-flex

apps/site/components/Blog/BlogPostCard/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .container {
   @apply max-w-full
     flex-1;

apps/site/components/Common/Search/utils.ts

@@ -1,46 +1,43 @@
-import tailwindConfig from '@/tailwind.config';
-
-const colors = tailwindConfig.theme.colors;
 export const themeConfig = {
   typography: {
     '--font-primary': 'var(--font-open-sans)',
   },
   colors: {
     light: {
-      '--text-color-primary': colors.neutral[900],
-      '--text-color-accent': colors.green[600],
-      '--background-color-secondary': colors.neutral[100],
-      '--background-color-tertiary': colors.neutral[300],
-      '--border-color-accent': colors.green[600],
-      '--border-color-primary': colors.neutral[200],
-      '--border-color-tertiary': colors.green[700],
-      '--button-background-color-primary': colors.green[600],
-      '--button-background-color-secondary': colors.white,
-      '--button-background-color-secondary-hover': colors.neutral[100],
-      '--button-border-color-secondary': colors.neutral[300],
-      '--button-text-color-secondary': colors.neutral[900],
-      '--chat-button-border-color-gradientThree': colors.green[400],
-      '--chat-button-border-color-gradientFour': colors.green[700],
-      '--chat-button-background-color-gradientOne': colors.green[600],
-      '--chat-button-background-color-gradientTwo': colors.green[300],
+      '--text-color-primary': 'var(--color-neutral-900)',
+      '--text-color-accent': 'var(--color-green-600)',
+      '--background-color-secondary': 'var(--color-neutral-100)',
+      '--background-color-tertiary': 'var(--color-neutral-300)',
+      '--border-color-accent': 'var(--color-green-600)',
+      '--border-color-primary': 'var(--color-neutral-200)',
+      '--border-color-tertiary': 'var(--color-green-700)',
+      '--button-background-color-primary': 'var(--color-green-600)',
+      '--button-background-color-secondary': 'var(--color-white)',
+      '--button-background-color-secondary-hover': 'var(--color-neutral-100)',
+      '--button-border-color-secondary': 'var(--color-neutral-300)',
+      '--button-text-color-secondary': 'var(--color-neutral-900)',
+      '--chat-button-border-color-gradientThree': 'var(--color-green-400)',
+      '--chat-button-border-color-gradientFour': 'var(--color-green-700)',
+      '--chat-button-background-color-gradientOne': 'var(--color-green-600)',
+      '--chat-button-background-color-gradientTwo': 'var(--color-green-300)',
     },
     dark: {
-      '--text-color-primary': colors.neutral[100],
-      '--text-color-accent': colors.green[400],
-      '--background-color-secondary': colors.neutral[950],
-      '--background-color-tertiary': colors.neutral[900],
-      '--border-color-accent': colors.green[400],
-      '--border-color-primary': colors.neutral[900],
-      '--border-color-tertiary': colors.green[300],
-      '--button-background-color-primary': colors.green[400],
-      '--button-background-color-secondary': colors.neutral[950],
-      '--button-background-color-secondary-hover': colors.neutral[900],
-      '--button-border-color-secondary': colors.neutral[900],
-      '--button-text-color-secondary': colors.neutral[200],
-      '--chat-button-border-color-gradientThree': colors.green[400],
-      '--chat-button-border-color-gradientFour': colors.green[700],
-      '--chat-button-background-color-gradientOne': colors.green[400],
-      '--chat-button-background-color-gradientTwo': colors.green[800],
+      '--text-color-primary': 'var(--color-neutral-100)',
+      '--text-color-accent': 'var(--color-green-400)',
+      '--background-color-secondary': 'var(--color-neutral-950)',
+      '--background-color-tertiary': 'var(--color-neutral-900)',
+      '--border-color-accent': 'var(--color-green-400)',
+      '--border-color-primary': 'var(--color-neutral-900)',
+      '--border-color-tertiary': 'var(--color-green-300)',
+      '--button-background-color-primary': 'var(--color-green-400)',
+      '--button-background-color-secondary': 'var(--color-neutral-950)',
+      '--button-background-color-secondary-hover': 'var(--color-neutral-900)',
+      '--button-border-color-secondary': 'var(--color-neutral-900)',
+      '--button-text-color-secondary': 'var(--color-neutral-200)',
+      '--chat-button-border-color-gradientThree': 'var(--color-green-400)',
+      '--chat-button-border-color-gradientFour': 'var(--color-green-700)',
+      '--chat-button-background-color-gradientOne': 'var(--color-green-400)',
+      '--chat-button-background-color-gradientTwo': 'var(--color-green-800)',
     },
   },
 };

apps/site/components/Downloads/DownloadButton/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .downloadButton {
   @apply justify-center;
 

apps/site/components/MDX/Calendar/Event/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";
+
 .event {
   @apply flex
     w-fit

apps/site/components/MDX/Calendar/calendar.module.css

@@ -1,3 +1,5 @@
+@reference "../../../styles/index.css";
+
 .events {
   @apply flex
     flex-col

apps/site/components/withBlogCategories.tsx

@@ -30,7 +30,7 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
         tabs={categories}
         activeTab={blogData.category}
       >
-        <div className="max-xs:grid-cols-[1fr] grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)]">
+        <div className="max-xs:grid-cols-[1fr] grid grid-cols-[repeat(auto-fill,minmax(--spacing(80),1fr))] [grid-gap:--spacing(12)_--spacing(8)]">
           {blogData.posts.map(post => (
             <BlogPostCard
               key={post.slug}

apps/site/layouts/layouts.module.css

@@ -1,3 +1,5 @@
+@reference "../styles/index.css";
+
 .baseLayout {
   @apply grid
     h-max
@@ -9,21 +11,21 @@
 
 .articleLayout {
   @apply max-w-8xl
-    sm:grid-areas-[sidebar_main,sidebar_footer]
-    lg:grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
     mx-auto
     block
     w-full
     sm:grid
     sm:grid-cols-[theme(spacing.52)_1fr]
     sm:grid-rows-[1fr]
     sm:overflow-visible
+    sm:[grid-template-areas:'sidebar_main''sidebar_footer']
     md:grid-cols-[theme(spacing.64)_1fr]
     lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
     xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
 
   > *:nth-child(1) {
-    @apply grid-in-[sidebar]
+    @apply [grid-area:sidebar]
       lg:sticky
       lg:top-0
       lg:h-[100vh]
@@ -35,20 +37,20 @@
       sm:max-lg:block;
 
     > *:first-child {
-      @apply grid-in-[main]
-        sm:bg-gradient-subtle
+      @apply sm:bg-gradient-subtle
         sm:dark:bg-gradient-subtle-dark
         xl:px-18
         p-4
+        [grid-area:main]
         motion-safe:scroll-smooth
         sm:bg-fixed
         sm:p-12;
     }
 
     > *:last-child {
-      @apply grid-in-[metabar]
-        mt-8
+      @apply mt-8
         border-t
+        [grid-area:metabar]
         sm:mt-0
         lg:sticky
         lg:top-0
@@ -59,8 +61,7 @@
   }
 
   > *:nth-child(3) {
-    @apply grid-in-[footer]
-      sticky
+    @apply sticky
       bottom-0
       flex
       w-full
@@ -71,6 +72,7 @@
       border-t-neutral-200
       bg-white
       py-4
+      [grid-area:footer]
       dark:border-t-neutral-900
       dark:bg-neutral-950;
   }

apps/site/package.json

@@ -31,51 +31,49 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@tailwindcss/postcss": "~4.0.17",
     "@vcarl/remark-headings": "~0.1.0",
     "@vercel/analytics": "~1.5.0",
-    "@vercel/otel": "~1.10.1",
+    "@vercel/otel": "~1.10.4",
     "@vercel/speed-insights": "~1.2.0",
-    "autoprefixer": "~10.4.20",
     "classnames": "~2.5.1",
     "cross-env": "7.0.3",
     "feed": "~4.2.2",
     "github-slugger": "~2.0.0",
     "glob": "~11.0.1",
     "gray-matter": "~4.0.3",
-    "next": "15.2.3",
+    "next": "15.2.4",
     "next-intl": "~4.0.2",
-    "next-themes": "~0.4.4",
+    "next-themes": "~0.4.6",
     "postcss": "~8.5.3",
     "postcss-calc": "~10.1.1",
-    "postcss-import": "~16.1.0",
     "postcss-loader": "~8.1.1",
-    "postcss-mixins": "~11.0.3",
-    "postcss-simple-vars": "~7.0.1",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "rehype-autolink-headings": "~7.1.0",
     "rehype-slug": "~6.0.0",
     "remark-gfm": "~4.0.1",
     "remark-reading-time": "~2.0.1",
     "semver": "~7.7.1",
-    "shiki": "~3.1.0",
-    "sval": "^0.6.1",
-    "tailwindcss": "~3.4.17",
+    "shiki": "~3.2.1",
+    "sval": "^0.6.3",
+    "tailwindcss": "~4.0.17",
     "unist-util-visit": "~5.0.0",
     "vfile": "~6.0.3",
-    "vfile-matter": "~5.0.0"
+    "vfile-matter": "~5.0.1"
   },
   "devDependencies": {
     "@eslint/compat": "~1.2.7",
-    "@next/eslint-plugin-next": "15.2.0",
+    "@next/eslint-plugin-next": "15.2.4",
     "@testing-library/jest-dom": "~6.6.3",
     "@testing-library/react": "~16.2.0",
     "@testing-library/user-event": "~14.6.1",
     "@types/jest": "29.5.14",
-    "@types/semver": "~7.5.8",
-    "eslint-config-next": "15.2.0",
-    "eslint-import-resolver-typescript": "~3.8.3",
-    "eslint-plugin-mdx": "~3.1.5",
+    "@types/semver": "~7.7.0",
+    "eslint-config-next": "15.2.4",
+    "eslint-import-resolver-typescript": "~4.3.1",
+    "eslint-plugin-mdx": "~3.3.1",
     "eslint-plugin-react": "~7.37.4",
     "eslint-plugin-react-hooks": "5.2.0",
     "handlebars": "4.7.8",
@@ -84,12 +82,12 @@
     "jest-junit": "16.0.0",
     "remark-frontmatter": "5.0.0",
     "remark-preset-lint-node": "5.1.2",
-    "stylelint": "16.15.0",
+    "stylelint": "16.17.0",
     "stylelint-config-standard": "37.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-selector-bem-pattern": "4.0.1",
     "typescript": "~5.7.2",
-    "typescript-eslint": "~8.25.0",
+    "typescript-eslint": "~8.28.0",
     "user-agent-data-types": "0.4.2"
   }
 }

apps/site/pages/en/about/branding.mdx

@@ -66,7 +66,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
         <img
           alt="Node.js Light Stacked Logo"
           src="/static/logos/nodejsStackedLight.svg"
-          className="h-[164px] w-[267px] rounded bg-neutral-950 p-2 dark:bg-transparent"
+          className="rounded-xs h-[164px] w-[267px] bg-neutral-950 p-2 dark:bg-transparent"
           width="267"
           height="164"
         />
@@ -83,7 +83,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
         <img
           alt="Node.js White Stacked Logo"
           src="/static/logos/nodejsStackedWhite.svg"
-          className="rounded bg-neutral-950 p-2 dark:bg-transparent"
+          className="rounded-xs bg-neutral-950 p-2 dark:bg-transparent"
         />
       </td>
     </tr>
@@ -108,7 +108,7 @@ Credit to [Angela Angelini](https://www.linkedin.com/in/angeliningl/) for design
         <img
           alt="White JS Icons"
           src="/static/logos/jsIconWhite.svg"
-          className="height-[80px] mx-auto w-[71px] rounded bg-neutral-950 p-2 dark:bg-transparent"
+          className="height-[80px] rounded-xs mx-auto w-[71px] bg-neutral-950 p-2 dark:bg-transparent"
           width="71"
           height="80"
         />