chore(dependencies): upgrade Tailwind CSS to v4

.nx/version-plans/version-plan-1768323163192.md

@@ -0,0 +1,64 @@
+---
+'@ledgerhq/lumen-design-core': patch
+'@ledgerhq/lumen-ui-react': patch
+---
+
+BREAKING_CHANGE(ui-react): Upgrade Tailwind to v4
+
+## Migration Guide
+
+### 1. Upgrade Tailwind CSS
+
+Run the official upgrade tool to automatically migrate your project:
+
+```bash
+npx @tailwindcss/upgrade
+```
+
+This will update your dependencies, migrate your CSS configuration, and update any deprecated utility classes.
+
+For detailed migration steps, see the official [Tailwind CSS v4 Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide).
+
+### 2. Install PostCSS Plugin
+
+In Tailwind v4, the PostCSS plugin no longer lives in the `tailwindcss` package. Install the dedicated package:
+
+```bash
+npm install -D @tailwindcss/postcss
+```
+
+#### Using Vite
+
+If you're using Vite, we recommend migrating from the PostCSS plugin to the dedicated Vite plugin for improved performance and the best developer experience:
+
+```bash
+npm install -D @tailwindcss/vite
+```
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+});
+```
+
+### 3. Update ESLint Plugin
+
+Replace `eslint-plugin-tailwindcss` with [eslint-plugin-better-tailwindcss](https://github.com/schoero/eslint-plugin-better-tailwindcss).
+
+> **Why?** The original `eslint-plugin-tailwindcss` does not support Tailwind v4 and has been inactive for a while ([see issue](https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/325)).
+
+```bash
+npm install -D eslint-plugin-better-tailwindcss
+```
+
+Configure the `entryPoint` in your ESLint config to point to your main Tailwind stylesheet (e.g., `./src/styles.css`). See our [eslint.config.mjs](https://github.com/LedgerHQ/lumen-design-system/blob/main/libs/ui-react/eslint.config.mjs) for a complete configuration example.
+
+> **Note:** In NX monorepos, you might need the beta version due to an issue with `entryPoint` not being resolved correctly ([see issue](https://github.com/schoero/eslint-plugin-better-tailwindcss/issues/154)):
+>
+> ```bash
+> npm install -D eslint-plugin-better-tailwindcss@beta
+> ```

apps/app-sandbox-react/postcss.config.js

@@ -5,9 +5,6 @@
 
 export default {
   plugins: {
-    tailwindcss: {
-      config: './tailwind.config.ts',
-    },
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

apps/app-sandbox-react/src/global.css

@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../tailwind.config.ts';

apps/app-sandbox-react/vite.config.ts

@@ -1,4 +1,5 @@
 /// <reference types='vitest' />
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
@@ -13,10 +14,7 @@ export default defineConfig(() => ({
     port: 4300,
     host: 'localhost',
   },
-  css: {
-    postcss: './postcss.config.js',
-  },
-  plugins: [react()],
+  plugins: [tailwindcss(), react()],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],

eslint.config.mjs

@@ -2,14 +2,12 @@ import nx from '@nx/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import { defineConfig, globalIgnores } from 'eslint/config';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
-import tailwind from 'eslint-plugin-tailwindcss';
 
 export default defineConfig(
   ...nx.configs['flat/base'],
   ...nx.configs['flat/react'],
   ...nx.configs['flat/typescript'],
   ...nx.configs['flat/javascript'],
-  ...tailwind.configs['flat/recommended'],
   {
     ignores: [
       '**/dist',
@@ -44,10 +42,6 @@ export default defineConfig(
           alphabetize: { order: 'asc', caseInsensitive: true },
         },
       ],
-      /**
-       * tailwind
-       */
-      'tailwindcss/no-custom-classname': 'error',
       /**
        * typescript
        */

libs/design-core/README.md

@@ -8,10 +8,10 @@
 npm install @ledgerhq/lumen-design-core
 
 # Install required peer dependency
-npm install tailwindcss
+npm install tailwindcss@^4.1.17 @tailwindcss/postcss
 ```
 
-**Note:** Tailwind CSS v3.x is required as a peer dependency. Not compatible yet with Tailwind CSS v4.
+**Note:** Tailwind CSS v4.x is the supported peer dependency.
 
 ## ⚡ Quick Setup
 

libs/design-core/automations/designTokensEtl.ts

@@ -14,7 +14,7 @@ StyleDictionary.registerTransform({
   name: 'name/custom/direct-css-var',
   type: 'name',
   transform: (token: TransformedToken) => {
-    return `--${token.path.join('-').toLowerCase()}`;
+    return token.path.join('-').toLowerCase();
   },
 });
 
@@ -31,6 +31,16 @@ function sanitizeTokenName(tokenName: string): string {
   return newName;
 }
 
+const addPxUnitToNumber = (
+  value: string | number,
+  _tokenName: string,
+): string | number => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value;
+};
+
 const filterPrimitives = (token: TransformedToken) =>
   !token.filePath.includes('1.primitives.value.json');
 
@@ -50,11 +60,11 @@ StyleDictionary.registerFormat({
     const output = { [mainKey]: {} };
 
     dictionary.allTokens.forEach((token: TransformedToken) => {
-      const tokenName = sanitizeTokenName(token.name);
-      const finalTokenName = tokenName.replace(' ', '-');
+      const tokenName = sanitizeTokenName(token.name).replace(/ /g, '-');
+      const finalTokenName = `--${tokenName}`;
       const tokenOriginalValue = token.original.$value;
 
-      let tokenFinalValue: string;
+      let tokenFinalValue: string | number;
       if (
         typeof tokenOriginalValue === 'string' &&
         tokenOriginalValue.startsWith('{') &&
@@ -73,7 +83,7 @@ StyleDictionary.registerFormat({
 
         tokenFinalValue = `var(${varName})`;
       } else {
-        tokenFinalValue = tokenOriginalValue;
+        tokenFinalValue = addPxUnitToNumber(tokenOriginalValue, tokenName);
       }
 
       output[mainKey][finalTokenName] = tokenFinalValue;
@@ -96,6 +106,33 @@ export const tokens: ${tokensType} = ${JSON.stringify(output, null, 2)};`;
   },
 });
 
+StyleDictionary.registerFormat({
+  name: 'css/custom-variables',
+  format: function ({ dictionary }) {
+    const variables = dictionary.allTokens
+      .map((token) => {
+        const name = sanitizeTokenName(token.name).replace(/ /g, '-');
+        let value = token.$value;
+
+        if (typeof value === 'number') {
+          value = value === 0 ? '0' : `${value}px`;
+        }
+
+        return `--${name}: ${value};`;
+      })
+      .join('\n');
+
+    return `/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+${variables}
+}
+`;
+  },
+});
+
 function getSDTypographyConfigForBreakpoint(breakpoint: string) {
   const sources = [
     `${tokensFolder}/1.primitives.value.json`,
@@ -200,10 +237,7 @@ function getSDPrimitivesConfig() {
         files: [
           {
             destination: 'primitives.css',
-            format: 'css/variables',
-            options: {
-              outputReferences: true,
-            },
+            format: 'css/custom-variables',
           },
         ],
         actions: ['remove-default-suffix', 'prettier'],

libs/design-core/package.json

@@ -27,7 +27,7 @@
     "!dist/figma/*"
   ],
   "dependencies": {
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "tslib": "^2.3.0"
   }
 }

libs/design-core/src/presets/allBrands.ts

@@ -9,13 +9,15 @@ import {
   createShadowPlugin,
 } from '../utils/index.js';
 
-export const allBrandsPreset = {
+export const allBrandsPreset: Config = {
   content: [],
   theme: {
     boxShadow: {},
+    boxShadowColor: {},
     fontSize: {},
     fontWeight: {},
     lineHeight: {},
+    colors: {},
   },
   plugins: [
     createPrimitivesPlugin(),
@@ -26,4 +28,4 @@ export const allBrandsPreset = {
     createAnimationsPlugin(),
   ],
   darkMode: 'class',
-} satisfies Config;
+};

libs/design-core/src/presets/enterprise.ts

@@ -10,13 +10,15 @@ import {
   createShadowPlugin,
 } from '../utils/index.js';
 
-export const enterprisePreset = {
+export const enterprisePreset: Config = {
   content: [],
   theme: {
     boxShadow: {},
+    boxShadowColor: {},
     fontSize: {},
     fontWeight: {},
     lineHeight: {},
+    colors: {},
   },
   plugins: [
     createPrimitivesPlugin(),
@@ -27,4 +29,4 @@ export const enterprisePreset = {
     createAnimationsPlugin(),
   ],
   darkMode: 'class',
-} satisfies Config;
+};

libs/design-core/src/presets/ledger-live.ts

@@ -9,13 +9,15 @@ import {
   createShadowPlugin,
 } from '../utils/index.js';
 
-export const ledgerLivePreset = {
+export const ledgerLivePreset: Config = {
   content: [],
   theme: {
     boxShadow: {},
+    boxShadowColor: {},
     fontSize: {},
     fontWeight: {},
     lineHeight: {},
+    colors: {},
   },
   plugins: [
     createPrimitivesPlugin(),
@@ -26,4 +28,4 @@ export const ledgerLivePreset = {
     createAnimationsPlugin(),
   ],
   darkMode: 'class',
-} satisfies Config;
+};

libs/design-core/src/presets/websites.ts

@@ -10,13 +10,15 @@ import {
   createShadowPlugin,
 } from '../utils/index.js';
 
-export const websitesPreset = {
+export const websitesPreset: Config = {
   content: [],
   theme: {
     boxShadow: {},
+    boxShadowColor: {},
     fontSize: {},
     fontWeight: {},
     lineHeight: {},
+    colors: {},
   },
   plugins: [
     createPrimitivesPlugin(),
@@ -27,4 +29,4 @@ export const websitesPreset = {
     createAnimationsPlugin(),
   ],
   darkMode: 'class',
-} satisfies Config;
+};