diff --git a/.nx/version-plans/version-plan-1768323163192.md b/.nx/version-plans/version-plan-1768323163192.md
new file mode 100644
index 000000000..cfad48803
--- /dev/null
+++ b/.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
+> ```
diff --git a/apps/app-sandbox-react/postcss.config.js b/apps/app-sandbox-react/postcss.config.js
index 6e11d077e..b7ca7c7de 100644
--- a/apps/app-sandbox-react/postcss.config.js
+++ b/apps/app-sandbox-react/postcss.config.js
@@ -5,9 +5,6 @@
 
 export default {
   plugins: {
-    tailwindcss: {
-      config: './tailwind.config.ts',
-    },
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/apps/app-sandbox-react/src/global.css b/apps/app-sandbox-react/src/global.css
index b5c61c956..37eb4665d 100644
--- a/apps/app-sandbox-react/src/global.css
+++ b/apps/app-sandbox-react/src/global.css
@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../tailwind.config.ts';
diff --git a/apps/app-sandbox-react/vite.config.ts b/apps/app-sandbox-react/vite.config.ts
index 042a2d009..b7b64ba9f 100644
--- a/apps/app-sandbox-react/vite.config.ts
+++ b/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() ],
diff --git a/eslint.config.mjs b/eslint.config.mjs
index fa672ec09..a8f21acc3 100644
--- a/eslint.config.mjs
+++ b/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
        */
diff --git a/libs/design-core/README.md b/libs/design-core/README.md
index 83d85dd63..6d9d47feb 100644
--- a/libs/design-core/README.md
+++ b/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
 
diff --git a/libs/design-core/automations/designTokensEtl.ts b/libs/design-core/automations/designTokensEtl.ts
index 24491c22e..3ede6bc9f 100644
--- a/libs/design-core/automations/designTokensEtl.ts
+++ b/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'],
diff --git a/libs/design-core/package.json b/libs/design-core/package.json
index 5239fd440..62dcc880e 100644
--- a/libs/design-core/package.json
+++ b/libs/design-core/package.json
@@ -27,7 +27,7 @@
     "!dist/figma/*"
   ],
   "dependencies": {
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "tslib": "^2.3.0"
   }
 }
diff --git a/libs/design-core/src/presets/allBrands.ts b/libs/design-core/src/presets/allBrands.ts
index 5e997f688..f102333f6 100644
--- a/libs/design-core/src/presets/allBrands.ts
+++ b/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;
+};
diff --git a/libs/design-core/src/presets/enterprise.ts b/libs/design-core/src/presets/enterprise.ts
index ee7258f47..77d84c5d0 100644
--- a/libs/design-core/src/presets/enterprise.ts
+++ b/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;
+};
diff --git a/libs/design-core/src/presets/ledger-live.ts b/libs/design-core/src/presets/ledger-live.ts
index e31275abd..c357fda76 100644
--- a/libs/design-core/src/presets/ledger-live.ts
+++ b/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;
+};
diff --git a/libs/design-core/src/presets/websites.ts b/libs/design-core/src/presets/websites.ts
index 44bbf0d2a..550eb9e00 100644
--- a/libs/design-core/src/presets/websites.ts
+++ b/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;
+};
diff --git a/libs/design-core/src/themes/css/primitives-css.ts b/libs/design-core/src/themes/css/primitives-css.ts
index f7bb442cf..b1e146126 100644
--- a/libs/design-core/src/themes/css/primitives-css.ts
+++ b/libs/design-core/src/themes/css/primitives-css.ts
@@ -561,177 +561,177 @@ export const tokens: Record<string, Record<string, string | number>> = {
     '--color-dark-discover-rarible': '#feda03',
     '--color-dark-discover-zerion': '#2962ef',
     '--color-dark-discover-bitrefill': '#449bf7',
-    '--spacing-0': 0,
-    '--spacing-1': 1,
-    '--spacing-2': 2,
-    '--spacing-4': 4,
-    '--spacing-6': 6,
-    '--spacing-8': 8,
-    '--spacing-10': 10,
-    '--spacing-12': 12,
-    '--spacing-14': 14,
-    '--spacing-16': 16,
-    '--spacing-20': 20,
-    '--spacing-24': 24,
-    '--spacing-32': 32,
-    '--spacing-40': 40,
-    '--spacing-48': 48,
-    '--spacing-56': 56,
-    '--spacing-64': 64,
-    '--spacing-80': 80,
-    '--spacing-96': 96,
-    '--spacing-112': 112,
-    '--spacing-128': 128,
-    '--spacing-144': 144,
-    '--spacing-160': 160,
-    '--spacing-256': 256,
-    '--icon-width-12': 12,
-    '--icon-width-16': 16,
-    '--icon-width-20': 20,
-    '--icon-width-24': 24,
-    '--icon-width-32': 32,
-    '--icon-width-40': 40,
-    '--icon-width-48': 48,
-    '--icon-width-56': 56,
-    '--icon-height-12': 12,
-    '--icon-height-16': 16,
-    '--icon-height-20': 20,
-    '--icon-height-24': 24,
-    '--icon-height-32': 32,
-    '--icon-height-40': 40,
-    '--icon-height-48': 48,
-    '--icon-height-56': 56,
-    '--spot-width-32': 32,
-    '--spot-width-48': 48,
-    '--spot-width-56': 56,
-    '--spot-width-72': 72,
-    '--spot-height-32': 32,
-    '--spot-height-48': 48,
-    '--spot-height-56': 56,
-    '--spot-height-72': 72,
-    '--icon-border-width-12': 1,
-    '--icon-border-width-16': 1.2999999523162842,
-    '--icon-border-width-20': 1.5,
-    '--icon-border-width-24': 1.7999999523162842,
-    '--icon-border-width-32': 2,
-    '--icon-border-width-40': 2.200000047683716,
-    '--icon-border-width-48': 2.5,
-    '--icon-border-width-56': 2.799999952316284,
-    '--spinner-border-width-12': 1.2000000476837158,
-    '--spinner-border-width-16': 1.600000023841858,
-    '--spinner-border-width-20': 2,
-    '--spinner-border-width-24': 2.5999999046325684,
-    '--spinner-border-width-32': 3,
-    '--spinner-border-width-40': 3.200000047683716,
-    '--spinner-border-width-48': 3.5999999046325684,
-    '--spinner-border-width-56': 3.799999952316284,
-    '--size-0': 0,
-    '--size-1': 1,
-    '--size-2': 2,
-    '--size-4': 4,
-    '--size-6': 6,
-    '--size-8': 8,
-    '--size-10': 10,
-    '--size-12': 12,
-    '--size-14': 14,
-    '--size-16': 16,
-    '--size-20': 20,
-    '--size-24': 24,
-    '--size-28': 28,
-    '--size-32': 32,
-    '--size-36': 36,
-    '--size-40': 40,
-    '--size-44': 44,
-    '--size-48': 48,
-    '--size-56': 56,
-    '--size-64': 64,
-    '--size-72': 72,
-    '--size-80': 80,
-    '--size-96': 96,
-    '--size-112': 112,
-    '--size-128': 128,
-    '--size-144': 144,
-    '--size-176': 176,
-    '--size-192': 192,
-    '--size-208': 208,
-    '--size-224': 224,
-    '--size-256': 256,
-    '--size-288': 288,
-    '--size-320': 320,
-    '--size-400': 400,
-    '--size-480': 480,
-    '--size-560': 560,
-    '--border-radius-none': 0,
-    '--border-radius-xs': 4,
-    '--border-radius-sm': 8,
-    '--border-radius-md': 12,
-    '--border-radius-lg': 16,
-    '--border-radius-xl': 24,
-    '--border-radius-2xl': 32,
-    '--border-radius-full': 10000,
+    '--spacing-0': '0px',
+    '--spacing-1': '1px',
+    '--spacing-2': '2px',
+    '--spacing-4': '4px',
+    '--spacing-6': '6px',
+    '--spacing-8': '8px',
+    '--spacing-10': '10px',
+    '--spacing-12': '12px',
+    '--spacing-14': '14px',
+    '--spacing-16': '16px',
+    '--spacing-20': '20px',
+    '--spacing-24': '24px',
+    '--spacing-32': '32px',
+    '--spacing-40': '40px',
+    '--spacing-48': '48px',
+    '--spacing-56': '56px',
+    '--spacing-64': '64px',
+    '--spacing-80': '80px',
+    '--spacing-96': '96px',
+    '--spacing-112': '112px',
+    '--spacing-128': '128px',
+    '--spacing-144': '144px',
+    '--spacing-160': '160px',
+    '--spacing-256': '256px',
+    '--icon-width-12': '12px',
+    '--icon-width-16': '16px',
+    '--icon-width-20': '20px',
+    '--icon-width-24': '24px',
+    '--icon-width-32': '32px',
+    '--icon-width-40': '40px',
+    '--icon-width-48': '48px',
+    '--icon-width-56': '56px',
+    '--icon-height-12': '12px',
+    '--icon-height-16': '16px',
+    '--icon-height-20': '20px',
+    '--icon-height-24': '24px',
+    '--icon-height-32': '32px',
+    '--icon-height-40': '40px',
+    '--icon-height-48': '48px',
+    '--icon-height-56': '56px',
+    '--spot-width-32': '32px',
+    '--spot-width-48': '48px',
+    '--spot-width-56': '56px',
+    '--spot-width-72': '72px',
+    '--spot-height-32': '32px',
+    '--spot-height-48': '48px',
+    '--spot-height-56': '56px',
+    '--spot-height-72': '72px',
+    '--icon-border-width-12': '1px',
+    '--icon-border-width-16': '1.2999999523162842px',
+    '--icon-border-width-20': '1.5px',
+    '--icon-border-width-24': '1.7999999523162842px',
+    '--icon-border-width-32': '2px',
+    '--icon-border-width-40': '2.200000047683716px',
+    '--icon-border-width-48': '2.5px',
+    '--icon-border-width-56': '2.799999952316284px',
+    '--spinner-border-width-12': '1.2000000476837158px',
+    '--spinner-border-width-16': '1.600000023841858px',
+    '--spinner-border-width-20': '2px',
+    '--spinner-border-width-24': '2.5999999046325684px',
+    '--spinner-border-width-32': '3px',
+    '--spinner-border-width-40': '3.200000047683716px',
+    '--spinner-border-width-48': '3.5999999046325684px',
+    '--spinner-border-width-56': '3.799999952316284px',
+    '--size-0': '0px',
+    '--size-1': '1px',
+    '--size-2': '2px',
+    '--size-4': '4px',
+    '--size-6': '6px',
+    '--size-8': '8px',
+    '--size-10': '10px',
+    '--size-12': '12px',
+    '--size-14': '14px',
+    '--size-16': '16px',
+    '--size-20': '20px',
+    '--size-24': '24px',
+    '--size-28': '28px',
+    '--size-32': '32px',
+    '--size-36': '36px',
+    '--size-40': '40px',
+    '--size-44': '44px',
+    '--size-48': '48px',
+    '--size-56': '56px',
+    '--size-64': '64px',
+    '--size-72': '72px',
+    '--size-80': '80px',
+    '--size-96': '96px',
+    '--size-112': '112px',
+    '--size-128': '128px',
+    '--size-144': '144px',
+    '--size-176': '176px',
+    '--size-192': '192px',
+    '--size-208': '208px',
+    '--size-224': '224px',
+    '--size-256': '256px',
+    '--size-288': '288px',
+    '--size-320': '320px',
+    '--size-400': '400px',
+    '--size-480': '480px',
+    '--size-560': '560px',
+    '--border-radius-none': '0px',
+    '--border-radius-xs': '4px',
+    '--border-radius-sm': '8px',
+    '--border-radius-md': '12px',
+    '--border-radius-lg': '16px',
+    '--border-radius-xl': '24px',
+    '--border-radius-2xl': '32px',
+    '--border-radius-full': '10000px',
     '--font-family-font': 'Inter',
-    '--stroke-1': 1,
-    '--stroke-2': 2,
-    '--stroke-4': 4,
+    '--stroke-1': '1px',
+    '--stroke-2': '2px',
+    '--stroke-4': '4px',
     '--font-weight-bold': '700',
     '--font-weight-semi-bold': '600',
     '--font-weight-medium': '500',
-    '--font-size-6': 6,
-    '--font-size-8': 8,
-    '--font-size-10': 10,
-    '--font-size-12': 12,
-    '--font-size-14': 14,
-    '--font-size-16': 16,
-    '--font-size-18': 18,
-    '--font-size-20': 20,
-    '--font-size-22': 22,
-    '--font-size-24': 24,
-    '--font-size-28': 28,
-    '--font-size-32': 32,
-    '--font-size-36': 36,
-    '--font-size-40': 40,
-    '--font-size-48': 48,
-    '--font-size-52': 52,
-    '--font-size-64': 64,
-    '--font-size-80': 80,
-    '--font-size-112': 112,
-    '--font-line-height-10': 16,
-    '--font-line-height-12': 16,
-    '--font-line-height-14': 20,
-    '--font-line-height-16': 24,
-    '--font-line-height-18': 26,
-    '--font-line-height-20': 28,
-    '--font-line-height-22': 30,
-    '--font-line-height-24': 32,
-    '--font-line-height-28': 36,
-    '--font-line-height-32': 40,
-    '--font-line-height-36': 44,
-    '--font-line-height-40': 48,
-    '--font-line-height-48': 56,
-    '--font-line-height-52': 60,
-    '--font-line-height-64': 72,
-    '--font-line-height-80': 88,
-    '--font-line-height-112': 120,
-    '--font-letter-spacing-10': 0,
-    '--font-letter-spacing-12': 0,
-    '--font-letter-spacing-14': 0,
-    '--font-letter-spacing-16': 0,
-    '--font-letter-spacing-18': -0.5,
-    '--font-letter-spacing-20': -1,
-    '--font-letter-spacing-22': -1,
-    '--font-letter-spacing-24': -1,
-    '--font-letter-spacing-28': -1.5,
-    '--font-letter-spacing-32': -1.5,
-    '--font-letter-spacing-36': -2,
-    '--font-letter-spacing-40': -2,
-    '--font-letter-spacing-48': -2.5,
-    '--font-letter-spacing-52': -2.5,
-    '--font-letter-spacing-64': -2.5,
-    '--font-letter-spacing-80': -3,
-    '--font-letter-spacing-112': -4,
-    '--backdrop-blur-sm': 8,
-    '--backdrop-blur-md': 12,
-    '--backdrop-blur-lg': 16,
-    '--backdrop-blur-xl': 24,
+    '--font-size-6': '6px',
+    '--font-size-8': '8px',
+    '--font-size-10': '10px',
+    '--font-size-12': '12px',
+    '--font-size-14': '14px',
+    '--font-size-16': '16px',
+    '--font-size-18': '18px',
+    '--font-size-20': '20px',
+    '--font-size-22': '22px',
+    '--font-size-24': '24px',
+    '--font-size-28': '28px',
+    '--font-size-32': '32px',
+    '--font-size-36': '36px',
+    '--font-size-40': '40px',
+    '--font-size-48': '48px',
+    '--font-size-52': '52px',
+    '--font-size-64': '64px',
+    '--font-size-80': '80px',
+    '--font-size-112': '112px',
+    '--font-line-height-10': '16px',
+    '--font-line-height-12': '16px',
+    '--font-line-height-14': '20px',
+    '--font-line-height-16': '24px',
+    '--font-line-height-18': '26px',
+    '--font-line-height-20': '28px',
+    '--font-line-height-22': '30px',
+    '--font-line-height-24': '32px',
+    '--font-line-height-28': '36px',
+    '--font-line-height-32': '40px',
+    '--font-line-height-36': '44px',
+    '--font-line-height-40': '48px',
+    '--font-line-height-48': '56px',
+    '--font-line-height-52': '60px',
+    '--font-line-height-64': '72px',
+    '--font-line-height-80': '88px',
+    '--font-line-height-112': '120px',
+    '--font-letter-spacing-10': '0px',
+    '--font-letter-spacing-12': '0px',
+    '--font-letter-spacing-14': '0px',
+    '--font-letter-spacing-16': '0px',
+    '--font-letter-spacing-18': '-0.5px',
+    '--font-letter-spacing-20': '-1px',
+    '--font-letter-spacing-22': '-1px',
+    '--font-letter-spacing-24': '-1px',
+    '--font-letter-spacing-28': '-1.5px',
+    '--font-letter-spacing-32': '-1.5px',
+    '--font-letter-spacing-36': '-2px',
+    '--font-letter-spacing-40': '-2px',
+    '--font-letter-spacing-48': '-2.5px',
+    '--font-letter-spacing-52': '-2.5px',
+    '--font-letter-spacing-64': '-2.5px',
+    '--font-letter-spacing-80': '-3px',
+    '--font-letter-spacing-112': '-4px',
+    '--backdrop-blur-sm': '8px',
+    '--backdrop-blur-md': '12px',
+    '--backdrop-blur-lg': '16px',
+    '--backdrop-blur-xl': '24px',
   },
 };
diff --git a/libs/design-core/src/themes/css/primitives.css b/libs/design-core/src/themes/css/primitives.css
index 3ee36d488..4d08ab534 100644
--- a/libs/design-core/src/themes/css/primitives.css
+++ b/libs/design-core/src/themes/css/primitives.css
@@ -561,175 +561,175 @@
   --color-dark-discover-zerion: #2962ef;
   --color-dark-discover-bitrefill: #449bf7;
   --spacing-0: 0;
-  --spacing-1: 1;
-  --spacing-2: 2;
-  --spacing-4: 4;
-  --spacing-6: 6;
-  --spacing-8: 8;
-  --spacing-10: 10;
-  --spacing-12: 12;
-  --spacing-14: 14;
-  --spacing-16: 16;
-  --spacing-20: 20;
-  --spacing-24: 24;
-  --spacing-32: 32;
-  --spacing-40: 40;
-  --spacing-48: 48;
-  --spacing-56: 56;
-  --spacing-64: 64;
-  --spacing-80: 80;
-  --spacing-96: 96;
-  --spacing-112: 112;
-  --spacing-128: 128;
-  --spacing-144: 144;
-  --spacing-160: 160;
-  --spacing-256: 256;
-  --icon-width-12: 12;
-  --icon-width-16: 16;
-  --icon-width-20: 20;
-  --icon-width-24: 24;
-  --icon-width-32: 32;
-  --icon-width-40: 40;
-  --icon-width-48: 48;
-  --icon-width-56: 56;
-  --icon-height-12: 12;
-  --icon-height-16: 16;
-  --icon-height-20: 20;
-  --icon-height-24: 24;
-  --icon-height-32: 32;
-  --icon-height-40: 40;
-  --icon-height-48: 48;
-  --icon-height-56: 56;
-  --spot-width-32: 32;
-  --spot-width-48: 48;
-  --spot-width-56: 56;
-  --spot-width-72: 72;
-  --spot-height-32: 32;
-  --spot-height-48: 48;
-  --spot-height-56: 56;
-  --spot-height-72: 72;
-  --icon-border-width-12: 1;
-  --icon-border-width-16: 1.2999999523162842;
-  --icon-border-width-20: 1.5;
-  --icon-border-width-24: 1.7999999523162842;
-  --icon-border-width-32: 2;
-  --icon-border-width-40: 2.200000047683716;
-  --icon-border-width-48: 2.5;
-  --icon-border-width-56: 2.799999952316284;
-  --spinner-border-width-12: 1.2000000476837158;
-  --spinner-border-width-16: 1.600000023841858;
-  --spinner-border-width-20: 2;
-  --spinner-border-width-24: 2.5999999046325684;
-  --spinner-border-width-32: 3;
-  --spinner-border-width-40: 3.200000047683716;
-  --spinner-border-width-48: 3.5999999046325684;
-  --spinner-border-width-56: 3.799999952316284;
+  --spacing-1: 1px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-10: 10px;
+  --spacing-12: 12px;
+  --spacing-14: 14px;
+  --spacing-16: 16px;
+  --spacing-20: 20px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-56: 56px;
+  --spacing-64: 64px;
+  --spacing-80: 80px;
+  --spacing-96: 96px;
+  --spacing-112: 112px;
+  --spacing-128: 128px;
+  --spacing-144: 144px;
+  --spacing-160: 160px;
+  --spacing-256: 256px;
+  --icon-width-12: 12px;
+  --icon-width-16: 16px;
+  --icon-width-20: 20px;
+  --icon-width-24: 24px;
+  --icon-width-32: 32px;
+  --icon-width-40: 40px;
+  --icon-width-48: 48px;
+  --icon-width-56: 56px;
+  --icon-height-12: 12px;
+  --icon-height-16: 16px;
+  --icon-height-20: 20px;
+  --icon-height-24: 24px;
+  --icon-height-32: 32px;
+  --icon-height-40: 40px;
+  --icon-height-48: 48px;
+  --icon-height-56: 56px;
+  --spot-width-32: 32px;
+  --spot-width-48: 48px;
+  --spot-width-56: 56px;
+  --spot-width-72: 72px;
+  --spot-height-32: 32px;
+  --spot-height-48: 48px;
+  --spot-height-56: 56px;
+  --spot-height-72: 72px;
+  --icon-border-width-12: 1px;
+  --icon-border-width-16: 1.2999999523162842px;
+  --icon-border-width-20: 1.5px;
+  --icon-border-width-24: 1.7999999523162842px;
+  --icon-border-width-32: 2px;
+  --icon-border-width-40: 2.200000047683716px;
+  --icon-border-width-48: 2.5px;
+  --icon-border-width-56: 2.799999952316284px;
+  --spinner-border-width-12: 1.2000000476837158px;
+  --spinner-border-width-16: 1.600000023841858px;
+  --spinner-border-width-20: 2px;
+  --spinner-border-width-24: 2.5999999046325684px;
+  --spinner-border-width-32: 3px;
+  --spinner-border-width-40: 3.200000047683716px;
+  --spinner-border-width-48: 3.5999999046325684px;
+  --spinner-border-width-56: 3.799999952316284px;
   --size-0: 0;
-  --size-1: 1;
-  --size-2: 2;
-  --size-4: 4;
-  --size-6: 6;
-  --size-8: 8;
-  --size-10: 10;
-  --size-12: 12;
-  --size-14: 14;
-  --size-16: 16;
-  --size-20: 20;
-  --size-24: 24;
-  --size-28: 28;
-  --size-32: 32;
-  --size-36: 36;
-  --size-40: 40;
-  --size-44: 44;
-  --size-48: 48;
-  --size-56: 56;
-  --size-64: 64;
-  --size-72: 72;
-  --size-80: 80;
-  --size-96: 96;
-  --size-112: 112;
-  --size-128: 128;
-  --size-144: 144;
-  --size-176: 176;
-  --size-192: 192;
-  --size-208: 208;
-  --size-224: 224;
-  --size-256: 256;
-  --size-288: 288;
-  --size-320: 320;
-  --size-400: 400;
-  --size-480: 480;
-  --size-560: 560;
+  --size-1: 1px;
+  --size-2: 2px;
+  --size-4: 4px;
+  --size-6: 6px;
+  --size-8: 8px;
+  --size-10: 10px;
+  --size-12: 12px;
+  --size-14: 14px;
+  --size-16: 16px;
+  --size-20: 20px;
+  --size-24: 24px;
+  --size-28: 28px;
+  --size-32: 32px;
+  --size-36: 36px;
+  --size-40: 40px;
+  --size-44: 44px;
+  --size-48: 48px;
+  --size-56: 56px;
+  --size-64: 64px;
+  --size-72: 72px;
+  --size-80: 80px;
+  --size-96: 96px;
+  --size-112: 112px;
+  --size-128: 128px;
+  --size-144: 144px;
+  --size-176: 176px;
+  --size-192: 192px;
+  --size-208: 208px;
+  --size-224: 224px;
+  --size-256: 256px;
+  --size-288: 288px;
+  --size-320: 320px;
+  --size-400: 400px;
+  --size-480: 480px;
+  --size-560: 560px;
   --border-radius-none: 0;
-  --border-radius-xs: 4;
-  --border-radius-sm: 8;
-  --border-radius-md: 12;
-  --border-radius-lg: 16;
-  --border-radius-xl: 24;
-  --border-radius-2xl: 32;
-  --border-radius-full: 10000;
+  --border-radius-xs: 4px;
+  --border-radius-sm: 8px;
+  --border-radius-md: 12px;
+  --border-radius-lg: 16px;
+  --border-radius-xl: 24px;
+  --border-radius-2xl: 32px;
+  --border-radius-full: 10000px;
   --font-family-font: Inter;
-  --stroke-1: 1;
-  --stroke-2: 2;
-  --stroke-4: 4;
+  --stroke-1: 1px;
+  --stroke-2: 2px;
+  --stroke-4: 4px;
   --font-weight-bold: 700;
   --font-weight-semi-bold: 600;
   --font-weight-medium: 500;
-  --font-size-6: 6;
-  --font-size-8: 8;
-  --font-size-10: 10;
-  --font-size-12: 12;
-  --font-size-14: 14;
-  --font-size-16: 16;
-  --font-size-18: 18;
-  --font-size-20: 20;
-  --font-size-22: 22;
-  --font-size-24: 24;
-  --font-size-28: 28;
-  --font-size-32: 32;
-  --font-size-36: 36;
-  --font-size-40: 40;
-  --font-size-48: 48;
-  --font-size-52: 52;
-  --font-size-64: 64;
-  --font-size-80: 80;
-  --font-size-112: 112;
-  --font-line-height-10: 16;
-  --font-line-height-12: 16;
-  --font-line-height-14: 20;
-  --font-line-height-16: 24;
-  --font-line-height-18: 26;
-  --font-line-height-20: 28;
-  --font-line-height-22: 30;
-  --font-line-height-24: 32;
-  --font-line-height-28: 36;
-  --font-line-height-32: 40;
-  --font-line-height-36: 44;
-  --font-line-height-40: 48;
-  --font-line-height-48: 56;
-  --font-line-height-52: 60;
-  --font-line-height-64: 72;
-  --font-line-height-80: 88;
-  --font-line-height-112: 120;
+  --font-size-6: 6px;
+  --font-size-8: 8px;
+  --font-size-10: 10px;
+  --font-size-12: 12px;
+  --font-size-14: 14px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-22: 22px;
+  --font-size-24: 24px;
+  --font-size-28: 28px;
+  --font-size-32: 32px;
+  --font-size-36: 36px;
+  --font-size-40: 40px;
+  --font-size-48: 48px;
+  --font-size-52: 52px;
+  --font-size-64: 64px;
+  --font-size-80: 80px;
+  --font-size-112: 112px;
+  --font-line-height-10: 16px;
+  --font-line-height-12: 16px;
+  --font-line-height-14: 20px;
+  --font-line-height-16: 24px;
+  --font-line-height-18: 26px;
+  --font-line-height-20: 28px;
+  --font-line-height-22: 30px;
+  --font-line-height-24: 32px;
+  --font-line-height-28: 36px;
+  --font-line-height-32: 40px;
+  --font-line-height-36: 44px;
+  --font-line-height-40: 48px;
+  --font-line-height-48: 56px;
+  --font-line-height-52: 60px;
+  --font-line-height-64: 72px;
+  --font-line-height-80: 88px;
+  --font-line-height-112: 120px;
   --font-letter-spacing-10: 0;
   --font-letter-spacing-12: 0;
   --font-letter-spacing-14: 0;
   --font-letter-spacing-16: 0;
-  --font-letter-spacing-18: -0.5;
-  --font-letter-spacing-20: -1;
-  --font-letter-spacing-22: -1;
-  --font-letter-spacing-24: -1;
-  --font-letter-spacing-28: -1.5;
-  --font-letter-spacing-32: -1.5;
-  --font-letter-spacing-36: -2;
-  --font-letter-spacing-40: -2;
-  --font-letter-spacing-48: -2.5;
-  --font-letter-spacing-52: -2.5;
-  --font-letter-spacing-64: -2.5;
-  --font-letter-spacing-80: -3;
-  --font-letter-spacing-112: -4;
-  --backdrop-blur-sm: 8;
-  --backdrop-blur-md: 12;
-  --backdrop-blur-lg: 16;
-  --backdrop-blur-xl: 24;
+  --font-letter-spacing-18: -0.5px;
+  --font-letter-spacing-20: -1px;
+  --font-letter-spacing-22: -1px;
+  --font-letter-spacing-24: -1px;
+  --font-letter-spacing-28: -1.5px;
+  --font-letter-spacing-32: -1.5px;
+  --font-letter-spacing-36: -2px;
+  --font-letter-spacing-40: -2px;
+  --font-letter-spacing-48: -2.5px;
+  --font-letter-spacing-52: -2.5px;
+  --font-letter-spacing-64: -2.5px;
+  --font-letter-spacing-80: -3px;
+  --font-letter-spacing-112: -4px;
+  --backdrop-blur-sm: 8px;
+  --backdrop-blur-md: 12px;
+  --backdrop-blur-lg: 16px;
+  --backdrop-blur-xl: 24px;
 }
diff --git a/libs/design-core/src/themes/css/typographies/typography.lg-css.ts b/libs/design-core/src/themes/css/typographies/typography.lg-css.ts
index 4f982a2b0..c38b7cb7b 100644
--- a/libs/design-core/src/themes/css/typographies/typography.lg-css.ts
+++ b/libs/design-core/src/themes/css/typographies/typography.lg-css.ts
@@ -79,7 +79,7 @@ export const tokens: Record<string, Record<string, string | number>> = {
     '--font-style-body-4-weight-medium': 'var(--font-weight-medium)',
     '--font-style-body-4-line-height': 'var(--font-line-height-10)',
     '--font-style-body-4-letter-spacing': 'var(--font-letter-spacing-10)',
-    '--font-style-grid-column-count': 12,
+    '--font-style-grid-column-count': '12px',
     '--font-style-grid-gutter': 'var(--spacing-40)',
   },
 };
diff --git a/libs/design-core/src/themes/css/typographies/typography.md-css.ts b/libs/design-core/src/themes/css/typographies/typography.md-css.ts
index 4e042b74f..7d6d1badb 100644
--- a/libs/design-core/src/themes/css/typographies/typography.md-css.ts
+++ b/libs/design-core/src/themes/css/typographies/typography.md-css.ts
@@ -79,7 +79,7 @@ export const tokens: Record<string, Record<string, string | number>> = {
     '--font-style-body-4-weight-medium': 'var(--font-weight-medium)',
     '--font-style-body-4-line-height': 'var(--font-line-height-10)',
     '--font-style-body-4-letter-spacing': 'var(--font-letter-spacing-10)',
-    '--font-style-grid-column-count': 12,
+    '--font-style-grid-column-count': '12px',
     '--font-style-grid-gutter': 'var(--spacing-32)',
   },
 };
diff --git a/libs/design-core/src/themes/css/typographies/typography.sm-css.ts b/libs/design-core/src/themes/css/typographies/typography.sm-css.ts
index bcb053eae..c752c1aa2 100644
--- a/libs/design-core/src/themes/css/typographies/typography.sm-css.ts
+++ b/libs/design-core/src/themes/css/typographies/typography.sm-css.ts
@@ -79,7 +79,7 @@ export const tokens: Record<string, Record<string, string | number>> = {
     '--font-style-body-4-weight-medium': 'var(--font-weight-medium)',
     '--font-style-body-4-line-height': 'var(--font-line-height-10)',
     '--font-style-body-4-letter-spacing': 'var(--font-letter-spacing-10)',
-    '--font-style-grid-column-count': 8,
+    '--font-style-grid-column-count': '8px',
     '--font-style-grid-gutter': 'var(--spacing-24)',
   },
 };
diff --git a/libs/design-core/src/themes/css/typographies/typography.xl-css.ts b/libs/design-core/src/themes/css/typographies/typography.xl-css.ts
index dae00e292..f7e72520b 100644
--- a/libs/design-core/src/themes/css/typographies/typography.xl-css.ts
+++ b/libs/design-core/src/themes/css/typographies/typography.xl-css.ts
@@ -79,7 +79,7 @@ export const tokens: Record<string, Record<string, string | number>> = {
     '--font-style-body-4-weight-medium': 'var(--font-weight-medium)',
     '--font-style-body-4-line-height': 'var(--font-line-height-10)',
     '--font-style-body-4-letter-spacing': 'var(--font-letter-spacing-10)',
-    '--font-style-grid-column-count': 12,
+    '--font-style-grid-column-count': '12px',
     '--font-style-grid-gutter': 'var(--spacing-40)',
   },
 };
diff --git a/libs/design-core/src/utils/createAnimationsPlugin.ts b/libs/design-core/src/utils/createAnimationsPlugin.ts
index 54652a99f..fdb0faa64 100644
--- a/libs/design-core/src/utils/createAnimationsPlugin.ts
+++ b/libs/design-core/src/utils/createAnimationsPlugin.ts
@@ -1,6 +1,8 @@
 import plugin from 'tailwindcss/plugin.js';
 
-export function createAnimationsPlugin() {
+type TailwindPlugin = ReturnType<typeof plugin>;
+
+export function createAnimationsPlugin(): TailwindPlugin {
   return plugin(
     () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
     {
@@ -10,18 +12,21 @@ export function createAnimationsPlugin() {
             'content-show': {
               from: {
                 opacity: '0',
-                transform: 'translate(-50%, -48%) scale(0.96)',
+                scale: '0.96',
+              },
+              to: {
+                opacity: '1',
+                scale: '1',
               },
-              to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
             },
             'content-hide': {
               from: {
                 opacity: '1',
-                transform: 'translate(-50%, -50%) scale(1)',
+                scale: '1',
               },
               to: {
                 opacity: '0',
-                transform: 'translate(-50%, -48%) scale(0.96)',
+                scale: '0.96',
               },
             },
             'fade-in': {
@@ -60,44 +65,7 @@ export function createAnimationsPlugin() {
               },
               to: { transform: 'translateX(0px)', opacity: '1' },
             },
-            // Slide in animations (8px offset)
-            'slide-in-from-top-8': {
-              from: {
-                transform: 'translateY(calc(var(--spacing-10) * -1))',
-                opacity: '0',
-              },
-              to: { transform: 'translateY(var(--spacing-8))', opacity: '1' },
-            },
-            'slide-in-from-bottom-8': {
-              from: {
-                transform: 'translateY(var(--spacing-10))',
-                opacity: '0',
-              },
-              to: {
-                transform: 'translateY(calc(var(--spacing-8) * -1))',
-                opacity: '1',
-              },
-            },
-            'slide-in-from-left-8': {
-              from: {
-                transform: 'translateX(calc(var(--spacing-10) * -1))',
-                opacity: '0',
-              },
-              to: {
-                transform: 'translateX(calc(var(--spacing-8) * -1))',
-                opacity: '1',
-              },
-            },
-            'slide-in-from-right-8': {
-              from: {
-                transform: 'translateX(var(--spacing-10))',
-                opacity: '0',
-              },
-              to: {
-                transform: 'translateX(calc(var(--spacing-8) * -1))',
-                opacity: '1',
-              },
-            },
+
             'slide-out-to-top': {
               from: { transform: 'translateY(0px)', opacity: '1' },
               to: {
@@ -120,41 +88,12 @@ export function createAnimationsPlugin() {
               from: { transform: 'translateX(0px)', opacity: '1' },
               to: { transform: 'translateX(var(--spacing-10))', opacity: '0' },
             },
-            // Slide out animations (8px offset)
-            'slide-out-to-top-8': {
-              from: { transform: 'translateY(var(--spacing-8))', opacity: '1' },
-              to: {
-                transform: 'translateY(calc(var(--spacing-10) * -1))',
-                opacity: '0',
-              },
-            },
-            'slide-out-to-bottom-8': {
-              from: {
-                transform: 'translateY(calc(var(--spacing-8) * -1))',
-                opacity: '1',
-              },
-              to: { transform: 'translateY(var(--spacing-10))', opacity: '0' },
-            },
-            'slide-out-to-left-8': {
-              from: {
-                transform: 'translateX(calc(var(--spacing-8) * -1))',
-                opacity: '1',
-              },
-              to: {
-                transform: 'translateX(calc(var(--spacing-10) * -1))',
-                opacity: '0',
-              },
-            },
-            'slide-out-to-right-8': {
-              from: { transform: 'translateX(var(--spacing-8))', opacity: '1' },
-              to: { transform: 'translateX(var(--spacing-10))', opacity: '0' },
-            },
             'translate-from-right': {
               from: {
-                transform: 'translateX(var(--spacing-10))',
+                transform: 'translateX(4px)',
               },
               to: {
-                transform: 'translateX(0)',
+                transform: 'translateX(0px)',
               },
             },
           },
@@ -164,7 +103,6 @@ export function createAnimationsPlugin() {
             'fade-in': 'fade-in 300ms ease-in',
             'fade-out': 'fade-out 300ms ease-out',
 
-            // Slide animations with default 0px offset
             'slide-in-from-top': 'slide-in-from-top 300ms ease-in',
             'slide-in-from-bottom': 'slide-in-from-bottom 300ms ease-in',
             'slide-in-from-left': 'slide-in-from-left 300ms ease-in',
@@ -174,16 +112,6 @@ export function createAnimationsPlugin() {
             'slide-out-to-left': 'slide-out-to-left 300ms ease-out',
             'slide-out-to-right': 'slide-out-to-right 300ms ease-out',
 
-            // Slide animations with 8px offset
-            'slide-in-from-top-8': 'slide-in-from-top-8 300ms ease-in',
-            'slide-in-from-bottom-8': 'slide-in-from-bottom-8 300ms ease-in',
-            'slide-in-from-left-8': 'slide-in-from-left-8 300ms ease-in',
-            'slide-in-from-right-8': 'slide-in-from-right-8 300ms ease-in',
-            'slide-out-to-top-8': 'slide-out-to-top-8 300ms ease-out',
-            'slide-out-to-bottom-8': 'slide-out-to-bottom-8 300ms ease-out',
-            'slide-out-to-left-8': 'slide-out-to-left-8 300ms ease-out',
-            'slide-out-to-right-8': 'slide-out-to-right-8 300ms ease-out',
-
             'translate-from-right':
               'translate-from-right 250ms cubic-bezier(0.4, 0, 0.2, 1)',
           },
diff --git a/libs/design-core/src/utils/createCustomPlugin.ts b/libs/design-core/src/utils/createCustomPlugin.ts
index d53c4b2da..287f40076 100644
--- a/libs/design-core/src/utils/createCustomPlugin.ts
+++ b/libs/design-core/src/utils/createCustomPlugin.ts
@@ -1,6 +1,8 @@
 import plugin from 'tailwindcss/plugin.js';
 import { getThemeUtilsByPrefix } from './getThemeUtilsByPrefix.js';
 
+type TailwindPlugin = ReturnType<typeof plugin>;
+
 const DEFAULT_COLOR_VALUES = {
   transparent: 'transparent',
   inherit: 'inherit',
@@ -16,7 +18,7 @@ function extendWithDefaultColors<T extends Record<string, string>>(colors: T) {
 
 export function createThemePlugin(
   brandTheme: Record<string, Record<string, string>>,
-) {
+): TailwindPlugin {
   const cryptoColor = getThemeUtilsByPrefix(brandTheme, '--color-crypto-', {
     customPrefix: 'crypto-',
   });
@@ -65,7 +67,7 @@ export function createThemePlugin(
   );
 }
 
-export function createTypographyPlugin() {
+export function createTypographyPlugin(): TailwindPlugin {
   return plugin(function ({ addUtilities }) {
     const fontSmoothing = {
       '-webkit-font-smoothing': 'antialiased',
@@ -315,7 +317,7 @@ function extractCryptoNames(
 
 export function createGradientPlugin(
   brandTheme?: Record<string, Record<string, string>>,
-) {
+): TailwindPlugin {
   return plugin(function ({ addUtilities }) {
     const gradientStyles = {
       '.bg-gradient-top': {
@@ -354,7 +356,7 @@ export function createGradientPlugin(
   });
 }
 
-export function createShadowPlugin() {
+export function createShadowPlugin(): TailwindPlugin {
   return plugin(function ({ theme, addUtilities, matchUtilities }) {
     const defaultColor = 'rgba(0, 0, 0, 0.10)';
     const strongDefaultColor = 'rgba(0, 0, 0, 0.25)';
@@ -385,7 +387,7 @@ export function createShadowPlugin() {
     addUtilities(shadows);
     matchUtilities(
       { shadow: (value) => ({ '--tw-shadow-color': value }) },
-      { values: theme('colors') },
+      { values: theme('boxShadowColor') },
     );
   });
 }
diff --git a/libs/design-core/src/utils/createPrimitivesPlugin.ts b/libs/design-core/src/utils/createPrimitivesPlugin.ts
index 28e958d45..64060bef1 100644
--- a/libs/design-core/src/utils/createPrimitivesPlugin.ts
+++ b/libs/design-core/src/utils/createPrimitivesPlugin.ts
@@ -1,11 +1,12 @@
 import plugin from 'tailwindcss/plugin.js';
-import { CSSRuleObject } from 'tailwindcss/types/config.js';
 import { primitivesTheme } from '../themes/css';
 import { createIconUtilities } from './createIconUtilities.js';
 import { createSpotUtilities } from './createSpotUtilities.js';
 import { getThemeUtilsByPrefix } from './getThemeUtilsByPrefix.js';
 
-export function createPrimitivesPlugin() {
+type TailwindPlugin = ReturnType<typeof plugin>;
+
+export function createPrimitivesPlugin(): TailwindPlugin {
   const spacing = getThemeUtilsByPrefix(primitivesTheme, '--spacing-');
   const size = getThemeUtilsByPrefix(primitivesTheme, '--size-');
   const borderRadius = getThemeUtilsByPrefix(
@@ -37,7 +38,7 @@ export function createPrimitivesPlugin() {
   return plugin(
     function ({ addBase, theme, addUtilities }) {
       // TODO: Remove type cast after exporting all values as strings from Figma
-      addBase(primitivesTheme as CSSRuleObject);
+      addBase(primitivesTheme as never);
       addUtilities(createIconUtilities(theme));
       addUtilities(createSpotUtilities(theme));
     },
diff --git a/libs/ui-react/.storybook/components/ComponentCard.tsx b/libs/ui-react/.storybook/components/ComponentCard.tsx
index 690c0c09f..90bf5b909 100644
--- a/libs/ui-react/.storybook/components/ComponentCard.tsx
+++ b/libs/ui-react/.storybook/components/ComponentCard.tsx
@@ -39,15 +39,15 @@ export const ComponentCard: React.FC<ComponentCardProps> = ({
       {/* Content area */}
       <div className='flex flex-1 flex-col items-center justify-between'>
         <div>
-          <h4 className='heading-5 !mb-0 block !cursor-pointer text-base group-hover:text-[#B380DD] md:hidden'>
+          <h4 className='mb-0! block cursor-pointer! heading-4 text-base group-hover:text-[#B380DD] md:hidden'>
             {emoji && <div>{emoji}</div>}
             {title}
           </h4>
-          <h3 className='heading-5 !mb-0 hidden !cursor-pointer text-base group-hover:text-[#B380DD] md:block'>
+          <h3 className='mb-0! hidden cursor-pointer! heading-4 text-base group-hover:text-[#B380DD] md:block'>
             {emoji && <div>{emoji}</div>}
             {title}
           </h3>
-          <p className='line-clamp-2 hidden text-muted body-3 md:block'>
+          <p className='line-clamp-2 hidden body-3 text-muted md:block'>
             {description}
           </p>
         </div>
diff --git a/libs/ui-react/.storybook/components/CustomTabs.tsx b/libs/ui-react/.storybook/components/CustomTabs.tsx
index cbe930af4..8e2c3bf0d 100644
--- a/libs/ui-react/.storybook/components/CustomTabs.tsx
+++ b/libs/ui-react/.storybook/components/CustomTabs.tsx
@@ -32,7 +32,7 @@ export const CustomTabs: React.FC<CustomTabsProps> = ({ children }) => {
           <button
             key={idx}
             className={cn(
-              'group relative flex flex-col items-center gap-8 rounded-lg p-12 transition-all duration-200 focus:outline-none',
+              'group relative flex flex-col items-center gap-8 rounded-lg p-12 transition-all duration-200 focus:outline-hidden',
               active === idx ? 'text-active' : 'text-muted hover:text-active',
             )}
             onClick={() => setActive(idx)}
@@ -52,7 +52,7 @@ export const CustomTabs: React.FC<CustomTabsProps> = ({ children }) => {
             {/* Label */}
             <span
               className={cn(
-                'transition-colors duration-200 body-3',
+                'body-3 transition-colors duration-200',
                 active === idx
                   ? 'text-black'
                   : 'group-hover:text-active group-hover:opacity-80',
diff --git a/libs/ui-react/.storybook/components/DoVsDont/DoBlock.tsx b/libs/ui-react/.storybook/components/DoVsDont/DoBlock.tsx
index e8a0809cc..037176c68 100644
--- a/libs/ui-react/.storybook/components/DoVsDont/DoBlock.tsx
+++ b/libs/ui-react/.storybook/components/DoVsDont/DoBlock.tsx
@@ -21,21 +21,21 @@ export const DoBlockItem: React.FC<DoBlockItemProps> = ({
     >
       {/* Header */}
       {(title || description) && (
-        <div className='!-mb-16 flex flex-col gap-4 '>
+        <div className='-mb-16! flex flex-col gap-4'>
           {title && (
-            <div className='flex items-center gap-8 '>
+            <div className='flex items-center gap-8'>
               <span className='text-[#10B981]'>✓</span>
-              <h4 className='!m-0 text-base body-2-semi-bold'>{title}</h4>
+              <h4 className='m-0! body-2-semi-bold text-base'>{title}</h4>
             </div>
           )}
           {description && (
-            <p className='!m-0 text-muted body-3'>{description}</p>
+            <p className='m-0! body-3 text-muted'>{description}</p>
           )}
         </div>
       )}
 
       {/* Code Block */}
-      <div className='[&_pre]:!m-0 [&_pre]:!rounded-xs [&_pre]:!border-2 [&_pre]:!border-[#10B981] [&_pre]:!bg-[#F0FDF4]'>
+      <div className='[&>*:first-child_pre]:m-0! [&>*:first-child_pre]:rounded-xs! [&>*:first-child_pre]:border-2! [&>*:first-child_pre]:border-[#10B981]! [&>*:first-child_pre]:bg-[#F0FDF4]!'>
         {children}
       </div>
     </div>
diff --git a/libs/ui-react/.storybook/components/DoVsDont/DoVsDontRow.tsx b/libs/ui-react/.storybook/components/DoVsDont/DoVsDontRow.tsx
index 25dfd7233..6f50b8c02 100644
--- a/libs/ui-react/.storybook/components/DoVsDont/DoVsDontRow.tsx
+++ b/libs/ui-react/.storybook/components/DoVsDont/DoVsDontRow.tsx
@@ -12,7 +12,7 @@ export const DoVsDontRow: React.FC<DoVsDontRowProps> = ({
 }) => {
   return (
     <div className={cn('flex flex-col gap-16', className)}>
-      <div className='!-mb-16 grid grid-cols-1 gap-16 md:grid-cols-2'>
+      <div className='-mb-16! grid grid-cols-1 gap-16 md:grid-cols-2'>
         {children}
       </div>
     </div>
diff --git a/libs/ui-react/.storybook/components/DoVsDont/DontBlock.tsx b/libs/ui-react/.storybook/components/DoVsDont/DontBlock.tsx
index 2327e5d98..9dfa3777a 100644
--- a/libs/ui-react/.storybook/components/DoVsDont/DontBlock.tsx
+++ b/libs/ui-react/.storybook/components/DoVsDont/DontBlock.tsx
@@ -21,21 +21,21 @@ export const DontBlockItem: React.FC<DontBlockItemProps> = ({
     >
       {/* Header */}
       {(title || description) && (
-        <div className='!-mb-16 flex flex-col gap-4'>
+        <div className='-mb-16! flex flex-col gap-4'>
           {title && (
             <div className='flex items-center gap-8'>
               <span className='text-[#EF4444]'>✕</span>
-              <h4 className='!m-0 text-base body-2-semi-bold'>{title}</h4>
+              <h4 className='m-0! body-2-semi-bold text-base'>{title}</h4>
             </div>
           )}
           {description && (
-            <p className='!m-0 text-muted body-3'>{description}</p>
+            <p className='m-0! body-3 text-muted'>{description}</p>
           )}
         </div>
       )}
 
       {/* Code Block */}
-      <div className='[&_pre]:!m-0 [&_pre]:!rounded-xs [&_pre]:!border-2 [&_pre]:!border-[#EF4444] [&_pre]:!bg-[#FEF2F2]'>
+      <div className='[&>*:first-child_pre]:m-0! [&>*:first-child_pre]:rounded-xs! [&>*:first-child_pre]:border-2! [&>*:first-child_pre]:border-[#EF4444]! [&>*:first-child_pre]:bg-[#FEF2F2]!'>
         {children}
       </div>
     </div>
diff --git a/libs/ui-react/.storybook/docs/QuickStart.mdx b/libs/ui-react/.storybook/docs/QuickStart.mdx
index f833eec0b..62c5d4828 100644
--- a/libs/ui-react/.storybook/docs/QuickStart.mdx
+++ b/libs/ui-react/.storybook/docs/QuickStart.mdx
@@ -9,7 +9,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 Our design system is available as npm packages:
 
 - **[@ledgerhq/lumen-design-core](https://www.npmjs.com/package/@ledgerhq/lumen-design-core)** - Design tokens, themes, and core utilities all in one tailwind preset.
-- **[@ledgerhq/lumen-ui-react](https://www.npmjs.com/package/@ledgerhq/lumen-ui-react)** - React components built with Tailwind CSS V3 and Radix UI primitives.
+- **[@ledgerhq/lumen-ui-react](https://www.npmjs.com/package/@ledgerhq/lumen-ui-react)** - React components built with Tailwind CSS v4 and Radix UI primitives.
 - **[@ledgerhq/lumen-ui-rnative](https://www.npmjs.com/package/@ledgerhq/lumen-ui-rnative)** - React Native components built with NativeWind.
 
 ### 🛠️ Setup Steps
diff --git a/libs/ui-react/.storybook/docs/SetupTailwind.mdx b/libs/ui-react/.storybook/docs/SetupTailwind.mdx
index 065ecde68..d88c29e94 100644
--- a/libs/ui-react/.storybook/docs/SetupTailwind.mdx
+++ b/libs/ui-react/.storybook/docs/SetupTailwind.mdx
@@ -9,7 +9,7 @@ import {
 
 # 🎨 Setup Tailwind CSS
 
-The Ledger Design System uses [Tailwind CSS v3](https://v3.tailwindcss.com/) as its foundation for styling, **with custom configurations and extensions to implement our design language.**
+The Ledger Design System uses [Tailwind CSS v4](https://tailwindcss.com/) as its foundation for styling, **with custom configurations and extensions to implement our design language.**
 
 ## ✨ Key Features
 
@@ -27,9 +27,7 @@ Our Tailwind implementation includes:
 
 ### Prerequisites
 
-> **Note:** This guide assumes you already have Tailwind CSS v3.x installed in your project. Our Design System is built and tested with Tailwind CSS v3. If you haven't installed Tailwind CSS yet, please follow the [official Tailwind CSS installation guide](https://v3.tailwindcss.com/docs/installation) first.
-
-> **Tailwind v4 Migration:** We are currently using Tailwind CSS v3 and have not yet migrated to v4. For details about our styling strategy, version choice, and future migration plans, see our [ADR 005: Styling Strategy](https://ledgerhq.atlassian.net/wiki/spaces/TA/pages/5840142351/ADR+005+Styling+Strategy).
+> **Note:** This guide assumes you already have Tailwind CSS v4.x installed in your project. Our Design System is built and tested with Tailwind CSS v4. If you haven't installed Tailwind CSS yet, please follow the [official Tailwind CSS installation guide](https://tailwindcss.com/docs/installation) first.
 
 Install `lumen-design-core` and `lumen-ui-react` packages:
 
@@ -41,7 +39,7 @@ npm install @ledgerhq/lumen-design-core
 npm install @ledgerhq/lumen-ui-react
 
 # Install peer dependencies
-npm install tailwindcss@^3.4.0 react@^18.3.1 clsx tailwind-merge class-variance-authority
+npm install tailwindcss@^4.1.17 @tailwindcss/postcss @tailwindcss/vite react@^18.3.1 clsx tailwind-merge class-variance-authority
 ```
 
 ---
@@ -89,12 +87,12 @@ For the best development experience, we recommend the following setup:
      }
      ```
 
-2. **ESLint Plugin Tailwind** ([eslint-plugin-tailwindcss](https://github.com/tailwindlabs/eslint-plugin-tailwindcss))
-   - Lints Tailwind classes in a consistent order
-   - Formats Tailwind classes using official prettier tailwind plugin
+2. **ESLint Plugin for Tailwind** ([eslint-plugin-better-tailwindcss](https://github.com/schoero/eslint-plugin-better-tailwindcss))
+   - Lints Tailwind classes (v4-compatible) and enforces consistent ordering
+   - Configure the `entryPoint` to your main Tailwind stylesheet (e.g., `./src/styles.css`)
    - Install with:
      ```bash
-     npm install -D eslint-plugin-tailwindcss
+     npm install -D eslint-plugin-better-tailwindcss
      ```
 
 3. **AI Assistant Rules** (Optional)
@@ -355,7 +353,7 @@ All design tokens automatically support dark mode:
 
 {/* prettier-ignore */}
 ```tsx
-<div className='p-[5px] gap-[7px]'>
+<div className='p-5 gap-7'>
   Content
 </div>
 ```
diff --git a/libs/ui-react/.storybook/main.ts b/libs/ui-react/.storybook/main.ts
index b17f7f817..9bf384e11 100644
--- a/libs/ui-react/.storybook/main.ts
+++ b/libs/ui-react/.storybook/main.ts
@@ -45,10 +45,7 @@ const config: StorybookConfig = {
       plugins: [nxViteTsPaths()],
       css: {
         postcss: {
-          plugins: [
-            (await import('tailwindcss')).default,
-            (await import('autoprefixer')).default,
-          ],
+          plugins: [(await import('@tailwindcss/postcss')).default],
         },
       },
     });
diff --git a/libs/ui-react/eslint.config.mjs b/libs/ui-react/eslint.config.mjs
index 6d1237b4e..4b61a0030 100644
--- a/libs/ui-react/eslint.config.mjs
+++ b/libs/ui-react/eslint.config.mjs
@@ -1,3 +1,4 @@
+import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss';
 import storybook from 'eslint-plugin-storybook';
 
 import baseConfig from '../../eslint.config.mjs';
@@ -8,6 +9,7 @@ export default [
     files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
     plugins: {
       storybook,
+      'better-tailwindcss': eslintPluginBetterTailwindcss,
     },
     rules: {
       'storybook/no-uninstalled-addons': [
@@ -16,6 +18,29 @@ export default [
           packageJsonLocation: '../../package.json',
         },
       ],
+      ...eslintPluginBetterTailwindcss.configs['recommended-warn'].rules,
+      ...eslintPluginBetterTailwindcss.configs['recommended-error'].rules,
+      'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
+    },
+    settings: {
+      'better-tailwindcss': {
+        callees: [
+          ['cn', [{ match: 'strings' }]],
+          [
+            'cva',
+            [
+              { match: 'strings' },
+              {
+                match: 'objectValues',
+                pathPattern:
+                  '^compoundVariants\\[\\d+\\]\\.(?:className|class)$',
+              },
+            ],
+          ],
+        ],
+        entryPoint: './src/styles.css',
+        tailwindConfig: './tailwind.config.ts',
+      },
     },
   },
   {
@@ -26,12 +51,5 @@ export default [
       '**/*.figma.jsx',
     ],
   },
-  {
-    settings: {
-      tailwindcss: {
-        callees: ['classnames', 'clsx', 'ctl', 'cn', 'cva'],
-      },
-    },
-  },
   ...storybook.configs['flat/recommended'],
 ];
diff --git a/libs/ui-react/src/lib/Components/AddressInput/AddressInput.stories.tsx b/libs/ui-react/src/lib/Components/AddressInput/AddressInput.stories.tsx
index ca7afe616..e853bfa4d 100644
--- a/libs/ui-react/src/lib/Components/AddressInput/AddressInput.stories.tsx
+++ b/libs/ui-react/src/lib/Components/AddressInput/AddressInput.stories.tsx
@@ -183,7 +183,7 @@ export const Controlled: Story = {
           className='max-w-md'
         />
 
-        <div className='text-muted body-3'>
+        <div className='body-3 text-muted'>
           <p>
             Click the QR code icon when the field is empty to scan an address.
           </p>
@@ -191,10 +191,10 @@ export const Controlled: Story = {
 
         {address && !error && (
           <div className='rounded-md border border-muted bg-success p-16'>
-            <h4 className='mb-4 text-success body-2-semi-bold'>
+            <h4 className='mb-4 body-2-semi-bold text-success'>
               Valid Address
             </h4>
-            <p className='break-all text-success body-3'>{address}</p>
+            <p className='body-3 break-all text-success'>{address}</p>
           </div>
         )}
       </div>
diff --git a/libs/ui-react/src/lib/Components/AddressInput/AddressInput.tsx b/libs/ui-react/src/lib/Components/AddressInput/AddressInput.tsx
index 91df4b399..08d5bae46 100644
--- a/libs/ui-react/src/lib/Components/AddressInput/AddressInput.tsx
+++ b/libs/ui-react/src/lib/Components/AddressInput/AddressInput.tsx
@@ -68,7 +68,7 @@ export const AddressInput = React.forwardRef<
   // Use custom prefix if provided, otherwise default "To:" prefix
   const effectivePrefix = (
     <span
-      className='text-nowrap text-base body-1 group-has-[:disabled]:text-disabled'
+      className='body-1 text-nowrap text-base group-has-disabled:text-disabled'
       aria-hidden='true'
     >
       {prefix}
@@ -84,7 +84,7 @@ export const AddressInput = React.forwardRef<
         iconType='filled'
         onClick={onQrCodeClick}
         aria-label={t('components.addressInput.qrCodeAriaLabel')}
-        className='group-has-[:disabled]:text-disabled'
+        className='group-has-disabled:text-disabled'
       >
         <QrCodeIcon size={20} />
       </InteractiveIcon>
diff --git a/libs/ui-react/src/lib/Components/AmountInput/AmountInput.stories.tsx b/libs/ui-react/src/lib/Components/AmountInput/AmountInput.stories.tsx
index 032499ff3..9d9f8405e 100644
--- a/libs/ui-react/src/lib/Components/AmountInput/AmountInput.stories.tsx
+++ b/libs/ui-react/src/lib/Components/AmountInput/AmountInput.stories.tsx
@@ -126,7 +126,7 @@ export const LargeAmountDisplay: Story = {
             currencyPosition={isEth ? 'right' : 'left'}
             aria-invalid={hasError}
           />
-          <div className='mt-16 text-center text-muted body-2'>
+          <div className='mt-16 text-center body-2 text-muted'>
             {convertedValue}
           </div>
 
@@ -139,7 +139,7 @@ export const LargeAmountDisplay: Story = {
           size='xs'
           appearance='gray'
           aria-label='Toggle currency'
-          className='absolute right-8 top-12'
+          className='absolute top-12 right-8'
           onClick={() => setIsEth(!isEth)}
         />
       </div>
diff --git a/libs/ui-react/src/lib/Components/AmountInput/AmountInput.tsx b/libs/ui-react/src/lib/Components/AmountInput/AmountInput.tsx
index b795e3856..357438499 100644
--- a/libs/ui-react/src/lib/Components/AmountInput/AmountInput.tsx
+++ b/libs/ui-react/src/lib/Components/AmountInput/AmountInput.tsx
@@ -11,10 +11,10 @@ import { AmountInputProps } from './types';
 
 const inputStyles = cva(
   [
-    'bg-transparent caret-active outline-none transition-colors heading-0',
+    'bg-transparent heading-0 caret-active outline-hidden transition-colors',
     'text-base placeholder:text-muted-subtle',
     'disabled:cursor-not-allowed disabled:bg-base-transparent disabled:text-disabled',
-    '[&[aria-invalid="true"]]:text-error',
+    'aria-invalid:text-error',
     '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
     'h-56',
   ],
diff --git a/libs/ui-react/src/lib/Components/Banner/Banner.stories.tsx b/libs/ui-react/src/lib/Components/Banner/Banner.stories.tsx
index 6a45f402b..5b390e27f 100644
--- a/libs/ui-react/src/lib/Components/Banner/Banner.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Banner/Banner.stories.tsx
@@ -340,7 +340,7 @@ export const ContentVariations: Story = {
 export const NaturalWidth: Story = {
   render: () => (
     <div className='space-y-4'>
-      <p className='text-muted body-3'>
+      <p className='body-3 text-muted'>
         Banner without container constraints - takes full parent width:
       </p>
       <Banner
@@ -365,7 +365,7 @@ export const NaturalWidth: Story = {
 export const ResponsiveLayout: Story = {
   render: () => (
     <div className='grid w-400 grid-cols-1 gap-16 bg-muted-pressed p-16'>
-      <div className='text-muted body-4-semi-bold'>
+      <div className='body-4-semi-bold text-muted'>
         Container with a fixed width
       </div>
       <Banner
diff --git a/libs/ui-react/src/lib/Components/BaseInput/BaseInput.tsx b/libs/ui-react/src/lib/Components/BaseInput/BaseInput.tsx
index 2d17fa050..cb3d9d4d9 100644
--- a/libs/ui-react/src/lib/Components/BaseInput/BaseInput.tsx
+++ b/libs/ui-react/src/lib/Components/BaseInput/BaseInput.tsx
@@ -8,24 +8,24 @@ import { BaseInputProps } from './types';
 const baseContainerStyles = cn(
   'group relative flex h-48 w-full cursor-text items-center gap-8 rounded-sm bg-muted px-16 transition-colors',
   'focus-within:ring-2 focus-within:ring-active hover:bg-muted-hover',
-  'has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-disabled has-[:disabled]:text-disabled',
-  'has-[:invalid]:border-error has-[:invalid]:ring-1 has-[:invalid]:ring-error',
+  'has-disabled:cursor-not-allowed has-disabled:bg-disabled has-disabled:text-disabled',
+  'has-invalid:border-error has-invalid:ring-1 has-invalid:ring-error',
   'has-[input[aria-invalid="true"]]:border-error has-[input[aria-invalid="true"]]:ring-1 has-[input[aria-invalid="true"]]:ring-error',
 );
 
 const baseInputStyles = cn(
-  'peer w-full flex-1 bg-muted text-base caret-active outline-none transition-colors body-1',
+  'peer w-full flex-1 bg-muted body-1 text-base caret-active outline-hidden transition-colors',
   'group-hover:bg-muted-hover group-disabled:bg-disabled',
-  'group-has-[:disabled]:cursor-not-allowed group-has-[:disabled]:bg-disabled group-has-[:disabled]:text-disabled',
-  'placeholder:text-muted group-has-[:disabled]:placeholder:text-disabled',
+  'group-has-disabled:cursor-not-allowed group-has-disabled:bg-disabled group-has-disabled:text-disabled',
+  'placeholder:text-muted group-has-disabled:placeholder:text-disabled',
   '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
   'truncate',
 );
 
 const baseLabelStyles = cn(
-  'pointer-events-none absolute left-16 top-6 origin-left text-muted transition-all duration-300 body-4',
+  'pointer-events-none absolute top-6 left-16 origin-left body-4 text-muted transition-all duration-300',
   'peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:body-2',
-  'group-has-[:disabled]:text-disabled',
+  'group-has-disabled:text-disabled',
   'peer-focus:top-6 peer-focus:-translate-y-0 peer-focus:body-4',
   'w-[calc(100%-var(--size-56))] truncate',
 );
@@ -225,7 +225,7 @@ export const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
         {errorMessage && (
           <div
             id={errorId}
-            className='mt-8 flex items-center gap-2 text-error body-3'
+            className='mt-8 flex items-center gap-2 body-3 text-error'
             role='alert'
           >
             <DeleteCircleFill size={16} className='shrink-0 text-error' />
diff --git a/libs/ui-react/src/lib/Components/Button/BaseButton.tsx b/libs/ui-react/src/lib/Components/Button/BaseButton.tsx
index e294560d5..c1ce4a4b3 100644
--- a/libs/ui-react/src/lib/Components/Button/BaseButton.tsx
+++ b/libs/ui-react/src/lib/Components/Button/BaseButton.tsx
@@ -7,7 +7,7 @@ import { Spinner } from '../Spinner';
 import { BaseButtonProps } from './types';
 
 const baseButtonVariants = cva(
-  'inline-flex size-fit cursor-pointer items-center justify-center rounded-full transition-colors duration-200 body-1-semi-bold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus [&[data-disabled="true"]]:bg-disabled [&[data-disabled="true"]]:text-disabled',
+  'inline-flex size-fit cursor-pointer items-center justify-center rounded-full body-1-semi-bold transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus data-[disabled="true"]:bg-disabled data-[disabled="true"]:text-disabled',
   {
     variants: {
       appearance: {
diff --git a/libs/ui-react/src/lib/Components/Button/Button.stories.tsx b/libs/ui-react/src/lib/Components/Button/Button.stories.tsx
index c3939ec5f..d3bf231b8 100644
--- a/libs/ui-react/src/lib/Components/Button/Button.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Button/Button.stories.tsx
@@ -179,7 +179,7 @@ export const ResponsiveLayout: Story = {
 export const LabelTruncate: Story = {
   render: () => (
     <>
-      <p className='text-muted body-4-semi-bold'>
+      <p className='body-4-semi-bold text-muted'>
         This container has a fixed width.
       </p>
       <div className='w-400 p-16'>
diff --git a/libs/ui-react/src/lib/Components/CardButton/CardButton.stories.tsx b/libs/ui-react/src/lib/Components/CardButton/CardButton.stories.tsx
index 4e93db972..3c291938a 100644
--- a/libs/ui-react/src/lib/Components/CardButton/CardButton.stories.tsx
+++ b/libs/ui-react/src/lib/Components/CardButton/CardButton.stories.tsx
@@ -149,7 +149,7 @@ export const FullFeatures: Story = {
 export const NaturalWidth: Story = {
   render: () => (
     <div className='w-full bg-muted-pressed p-16'>
-      <div className='mb-16 text-muted body-4-semi-bold'>
+      <div className='mb-16 body-4-semi-bold text-muted'>
         CardButton naturally flows to fill parent container width
       </div>
       <CardButton
@@ -271,7 +271,7 @@ export const StatesShowcase: Story = {
 export const ResponsiveLayout: Story = {
   render: () => (
     <div className='grid w-320 grid-cols-1 gap-16 bg-muted-pressed p-16'>
-      <div className='text-muted body-4-semi-bold'>Container: 320px wide</div>
+      <div className='body-4-semi-bold text-muted'>Container: 320px wide</div>
       <CardButton
         appearance='base'
         title='Short Title'
diff --git a/libs/ui-react/src/lib/Components/CardButton/CardButton.tsx b/libs/ui-react/src/lib/Components/CardButton/CardButton.tsx
index 6d4fb102c..214dfec19 100644
--- a/libs/ui-react/src/lib/Components/CardButton/CardButton.tsx
+++ b/libs/ui-react/src/lib/Components/CardButton/CardButton.tsx
@@ -11,7 +11,7 @@ const buttonVariants = cva(
       appearance: {
         base: 'bg-muted text-base hover:bg-muted-hover active:bg-muted-pressed disabled:bg-disabled',
         outline:
-          'bg-base-transparent text-base outline-dashed outline-1 outline-muted-subtle hover:bg-base-transparent-hover hover:outline-muted-subtle-hover focus-visible:outline-none focus-visible:outline-offset-0 active:bg-base-transparent-pressed active:outline-muted-subtle-pressed disabled:bg-base-transparent disabled:outline-disabled',
+          'bg-base-transparent text-base outline-dashed outline-1 outline-muted-subtle hover:bg-base-transparent-hover hover:outline-muted-subtle-hover focus-visible:outline-hidden focus-visible:outline-offset-0 active:bg-base-transparent-pressed active:outline-muted-subtle-pressed disabled:bg-base-transparent disabled:outline-disabled',
       },
     },
     defaultVariants: {
diff --git a/libs/ui-react/src/lib/Components/Checkbox/Checkbox.tsx b/libs/ui-react/src/lib/Components/Checkbox/Checkbox.tsx
index 78b30658b..8108ca435 100644
--- a/libs/ui-react/src/lib/Components/Checkbox/Checkbox.tsx
+++ b/libs/ui-react/src/lib/Components/Checkbox/Checkbox.tsx
@@ -4,9 +4,9 @@ import React from 'react';
 import { Check } from '../../Symbols/Icons/Check';
 import { CheckboxProps } from './types';
 
-const checkboxStyles = [
-  'h-20 w-20 shrink-0 rounded-xs transition-colors',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2',
+const checkboxStyles = cn(
+  'size-20 shrink-0 cursor-pointer rounded-xs transition-colors',
+  'focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 focus-visible:outline-hidden',
 
   'data-[state=unchecked]:border data-[state=unchecked]:border-muted data-[state=unchecked]:bg-base',
   'data-[state=unchecked]:hover:bg-base-hover',
@@ -17,7 +17,7 @@ const checkboxStyles = [
   'data-[state=checked]:hover:bg-active-hover',
   'data-[state=checked]:active:bg-active-pressed',
   'data-[state=checked]:disabled:bg-disabled data-[state=checked]:disabled:text-disabled',
-].join(' ');
+);
 
 /**
  * A customizable checkbox component built on top of Radix UI Checkbox primitive.
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/animations/Animations.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/animations/Animations.stories.tsx
index 0d92222f0..fd8b9657d 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/animations/Animations.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/animations/Animations.stories.tsx
@@ -66,7 +66,7 @@ const AnimationDemo = ({
     <div className='flex flex-col items-center gap-16 rounded-sm p-24'>
       <div className='text-center'>
         <h3 className='mb-8 heading-4'>{title}</h3>
-        <p className='mb-16 text-muted body-2'>{description}</p>
+        <p className='mb-16 body-2 text-muted'>{description}</p>
         <Tag label={animationClass} appearance='gray' />
       </div>
 
@@ -85,7 +85,7 @@ const AnimationDemo = ({
           {/* Animated element */}
           <div
             className={cn(
-              'absolute inset-0 flex items-center justify-center bg-accent text-on-accent body-2-semi-bold',
+              'absolute inset-0 flex items-center justify-center bg-accent body-2-semi-bold text-on-accent',
               // For out animations, show by default, hide when animating out
               isOutAnimation
                 ? isVisible && !isAnimating
@@ -202,7 +202,7 @@ export const SlideOut: Story = {
 export const DefaultTailwindAnimations: Story = {
   render: () => (
     <>
-      <h2 className='mb-16 mt-32 text-start heading-3'>Static animation</h2>
+      <h2 className='mt-32 mb-16 text-start heading-3'>Static animation</h2>
       <div className='rounded-2xl border border-muted-subtle bg-canvas p-16'>
         <div className='grid grid-cols-1 gap-24 md:grid-cols-2 lg:grid-cols-4'>
           {/* Spin Animation */}
@@ -272,7 +272,7 @@ export const AllAnimations: Story = {
     <div className='space-y-48'>
       {/* Fade Animations Section */}
       <div>
-        <h2 className='mb-16 mt-32 text-start heading-3'>Fade</h2>
+        <h2 className='mt-32 mb-16 text-start heading-3'>Fade</h2>
         <div className='rounded-2xl border border-muted-subtle bg-canvas p-16'>
           <div className='grid grid-cols-1 gap-24 md:grid-cols-2'>
             <AnimationDemo
@@ -291,7 +291,7 @@ export const AllAnimations: Story = {
 
       {/* Slide In Animations Section */}
       <div>
-        <h2 className='mb-16 mt-32 text-start heading-3'>Slide in</h2>
+        <h2 className='mt-32 mb-16 text-start heading-3'>Slide in</h2>
         <div className='rounded-2xl border border-muted-subtle bg-canvas p-8'>
           <div className='grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4'>
             <AnimationDemo
@@ -320,7 +320,7 @@ export const AllAnimations: Story = {
 
       {/* Slide Out Animations Section */}
       <div>
-        <h2 className='mb-16 mt-32 text-start heading-3'>Slide out</h2>
+        <h2 className='mt-32 mb-16 text-start heading-3'>Slide out</h2>
         <div className='rounded-2xl border border-muted-subtle bg-canvas p-8'>
           <div className='grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4'>
             <AnimationDemo
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/border/borderRadius.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/border/borderRadius.stories.tsx
index 4abaf1b25..f54b9636e 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/border/borderRadius.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/border/borderRadius.stories.tsx
@@ -24,8 +24,8 @@ const BorderRadiusShowcase = () => (
         <div key={name} className=''>
           <div className={`mb-8 size-80 bg-accent ${className}`}></div>
           <div></div>
-          <div className='text-base body-2'>{name}</div>
-          <div className='text-muted body-4'>{className}</div>
+          <div className='body-2 text-base'>{name}</div>
+          <div className='body-4 text-muted'>{className}</div>
         </div>
       ))}
     </div>
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/border/borderWidth.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/border/borderWidth.stories.tsx
index 773d10754..99f1d80e9 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/border/borderWidth.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/border/borderWidth.stories.tsx
@@ -17,8 +17,8 @@ const BorderWidthShowcase = () => (
       ].map(({ name, class: borderWidthClass, token }) => (
         <div key={name} className='flex items-center gap-16'>
           <div>
-            <div className='w-48 text-base body-2'>{name}</div>
-            <div className='text-muted body-4'>{token}</div>
+            <div className='w-48 body-2 text-base'>{name}</div>
+            <div className='body-4 text-muted'>{token}</div>
           </div>
           <div
             className={`${borderWidthClass} size-80 rounded-sm border border-active`}
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/dimensions/height/height.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/dimensions/height/height.stories.tsx
index 4d0a5d6af..efaa924d8 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/dimensions/height/height.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/dimensions/height/height.stories.tsx
@@ -46,8 +46,8 @@ const HeightShowcase = () => (
           <div
             className={`${heightClass} mb-12 w-24 rounded-xs bg-accent`}
           ></div>
-          <div className='w-48 text-base body-2'>{name}</div>
-          <div className='text-muted body-4'>{token}</div>
+          <div className='w-48 body-2 text-base'>{name}</div>
+          <div className='body-4 text-muted'>{token}</div>
         </div>
       ))}
     </div>
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/dimensions/size/size.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/dimensions/size/size.stories.tsx
index 2aa58d8ef..21b3c7a3d 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/dimensions/size/size.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/dimensions/size/size.stories.tsx
@@ -30,14 +30,14 @@ const SizeShowcase = () => (
             <div
               className={`${token} flex items-center justify-center rounded-xs bg-accent text-white`}
             ></div>
-            <div className=' space-y-1 text-center'>
-              <div className='text-left text-muted body-3'>{token}</div>
-              <div className='text-left text-muted body-4'>{value}px</div>
+            <div className='space-y-1 text-center'>
+              <div className='text-left body-3 text-muted'>{token}</div>
+              <div className='text-left body-4 text-muted'>{value}px</div>
             </div>
           </div>
         ))}
       </div>
-      <div className='mt-32 text-center text-muted body-2'>
+      <div className='mt-32 text-center body-2 text-muted'>
         The complete scale includes 33 tokens from{' '}
         <code className='text-warning'>size-1</code> to{' '}
         <code className='text-warning'>size-560</code>.
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/dimensions/spacing.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/dimensions/spacing.stories.tsx
index 74e79a7a9..f2341914f 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/dimensions/spacing.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/dimensions/spacing.stories.tsx
@@ -39,13 +39,13 @@ const SpacingShowcase = () => (
       ].map(({ name, class: widthClass, token }) => (
         <div key={name} className='flex items-center gap-8'>
           <div>
-            <div className='text-muted body-2'>{token}</div>
-            <div className='w-48 text-base body-4'>{name}</div>
+            <div className='body-2 text-muted'>{token}</div>
+            <div className='w-48 body-4 text-base'>{name}</div>
           </div>
           <div
             className={`${widthClass} rounded-md border border-muted-subtle bg-[repeating-linear-gradient(45deg,var(--border-muted-subtle)_2px,var(--border-muted-subtle)_4px,transparent_4px,transparent_12px)]`}
           >
-            <div className='size-56 rounded-sm bg-accent text-muted body-2'></div>
+            <div className='size-56 rounded-sm bg-accent body-2 text-muted'></div>
           </div>
         </div>
       ))}
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/dimensions/width/width.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/dimensions/width/width.stories.tsx
index 268e9a9b9..45ce5eb0a 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/dimensions/width/width.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/dimensions/width/width.stories.tsx
@@ -44,8 +44,8 @@ const WidthShowcase = () => (
       ].map(({ name, class: widthClass, token }) => (
         <div key={name} className='flex items-center gap-8'>
           <div>
-            <div className='w-48 text-base body-2'>{name}</div>
-            <div className='text-muted body-4'>{token}</div>
+            <div className='w-48 body-2 text-base'>{name}</div>
+            <div className='body-4 text-muted'>{token}</div>
           </div>
           <div className={`${widthClass} h-24 rounded-xs bg-accent`}></div>
         </div>
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/shared.tsx b/libs/ui-react/src/lib/Components/Design-tokens/shared.tsx
index cceb81689..1dcbdbfb7 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/shared.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/shared.tsx
@@ -24,8 +24,8 @@ export const ColorSwatch = ({
             >
               <div className={cn('heading-5', textClassName)}>Aa</div>
             </div>
-            <div className='mt-8 text-base body-1-semi-bold'>{name}</div>
-            <div className='text-muted body-3'>{textClassName}</div>
+            <div className='mt-8 body-1-semi-bold text-base'>{name}</div>
+            <div className='body-3 text-muted'>{textClassName}</div>
           </>
         );
       case 'border':
@@ -37,8 +37,8 @@ export const ColorSwatch = ({
                 className.replace('bg-base', ''),
               )}
             ></div>
-            <div className='mt-8 text-base body-1-semi-bold'>{name}</div>
-            <div className='text-muted body-3'>
+            <div className='mt-8 body-1-semi-bold text-base'>{name}</div>
+            <div className='body-3 text-muted'>
               {className.replace('bg-base ', '')}
             </div>
           </>
@@ -55,7 +55,7 @@ export const ColorSwatch = ({
             <div className={cn('mt-8 body-1-semi-bold', textClassName)}>
               {name}
             </div>
-            <div className={cn('text-muted body-3', textClassName)}>
+            <div className={cn('body-3 text-muted', textClassName)}>
               {className}
             </div>
           </>
@@ -74,7 +74,7 @@ export const SectionHeader = ({
   description?: string;
 }) => (
   <div className='mb-48'>
-    <h2 className='mb-8 text-base responsive-display-4'>{title}</h2>
+    <h2 className='mb-8 responsive-display-4 text-base'>{title}</h2>
     {description && <p className='text-muted'>{description}</p>}
   </div>
 );
@@ -89,7 +89,7 @@ export const ColorSection = ({
   category?: 'background' | 'text' | 'border';
 }) => (
   <div className='mb-32'>
-    {title && <h3 className='mb-32 text-base heading-4'>{title}</h3>}
+    {title && <h3 className='mb-32 heading-4 text-base'>{title}</h3>}
     <div className='grid grid-cols-1 gap-16 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
       {tokens.map(({ name, className, textClassName }) => (
         <ColorSwatch
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/styles/backdrop.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/styles/backdrop.stories.tsx
index 69609b3c0..9f06df0f6 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/styles/backdrop.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/styles/backdrop.stories.tsx
@@ -35,8 +35,8 @@ const BackdropShowcase = () => (
               className={cn('absolute inset-24 rounded-lg', backdropClass)}
             />
           </div>
-          <div className='mt-8 text-base body-2'>{backdropClass}</div>
-          <div className='mt-8 text-muted body-4'>{name}</div>
+          <div className='mt-8 body-2 text-base'>{backdropClass}</div>
+          <div className='mt-8 body-4 text-muted'>{name}</div>
         </div>
       ))}
     </div>
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/styles/gradients.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/styles/gradients.stories.tsx
index 08e97a3f5..e76db36b9 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/styles/gradients.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/styles/gradients.stories.tsx
@@ -12,7 +12,7 @@ const GradientShowcase = () => (
   <div className='mb-32'>
     <div className='space-y-32'>
       <div>
-        <h4 className='heading-5 mb-16 text-base'>Directional Gradients</h4>
+        <h4 className='mb-16 heading-5 text-base'>Directional Gradients</h4>
         <div className='grid grid-cols-1 gap-16 sm:grid-cols-2'>
           {[
             { name: 'Top', class: 'bg-gradient-top' },
@@ -22,15 +22,15 @@ const GradientShowcase = () => (
               <div
                 className={`h-96 rounded-lg border border-muted-subtle ${gradientClass}`}
               ></div>
-              <div className='mt-8 text-base body-2'>{name}</div>
-              <div className='mt-8 text-muted body-4'>{gradientClass}</div>
+              <div className='mt-8 body-2 text-base'>{name}</div>
+              <div className='mt-8 body-4 text-muted'>{gradientClass}</div>
             </div>
           ))}
         </div>
       </div>
 
       <div>
-        <h4 className='heading-5 mb-16 text-base'>Status Gradients</h4>
+        <h4 className='mb-16 heading-5 text-base'>Status Gradients</h4>
         <div className='grid grid-cols-1 gap-16 sm:grid-cols-3'>
           {[
             { name: 'Error', class: 'bg-gradient-error' },
@@ -41,15 +41,15 @@ const GradientShowcase = () => (
               <div
                 className={`h-224 rounded-lg border border-muted-subtle ${gradientClass}`}
               ></div>
-              <div className='mt-8 text-base body-2'>{name}</div>
-              <div className='mt-8 text-muted body-4'>{gradientClass}</div>
+              <div className='mt-8 body-2 text-base'>{name}</div>
+              <div className='mt-8 body-4 text-muted'>{gradientClass}</div>
             </div>
           ))}
         </div>
       </div>
 
       <div>
-        <h4 className='heading-5 mb-16 text-base'>Asset Gradients</h4>
+        <h4 className='mb-16 heading-5 text-base'>Asset Gradients</h4>
         <div className='grid grid-cols-2 gap-16 sm:grid-cols-3 lg:grid-cols-6'>
           {[
             { name: 'Aion', class: 'bg-gradient-aion' },
@@ -126,8 +126,8 @@ const GradientShowcase = () => (
               <div
                 className={`h-64 rounded-lg border border-muted-subtle ${gradientClass}`}
               ></div>
-              <div className='mt-8 text-base body-2'>{name}</div>
-              <div className='mt-8 text-muted body-4'>{gradientClass}</div>
+              <div className='mt-8 body-2 text-base'>{name}</div>
+              <div className='mt-8 body-4 text-muted'>{gradientClass}</div>
             </div>
           ))}
         </div>
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/styles/shadows.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/styles/shadows.stories.tsx
index a75bb1ce1..2ca324c1a 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/styles/shadows.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/styles/shadows.stories.tsx
@@ -22,8 +22,8 @@ const ShadowShowcase = () => (
           <div className='flex size-192 items-center justify-center rounded-lg border border-muted-subtle text-center dark:bg-muted-strong'>
             <div className={`size-80 rounded-lg ${shadowClass}`}></div>
           </div>
-          <div className='mt-8 text-base body-2'>{name}</div>
-          <div className='mt-8 text-muted body-4'>{shadowClass}</div>
+          <div className='mt-8 body-2 text-base'>{name}</div>
+          <div className='mt-8 body-4 text-muted'>{shadowClass}</div>
         </div>
       ))}
     </div>
diff --git a/libs/ui-react/src/lib/Components/Design-tokens/styles/typography.stories.tsx b/libs/ui-react/src/lib/Components/Design-tokens/styles/typography.stories.tsx
index 327c5a5a0..beea66f9d 100644
--- a/libs/ui-react/src/lib/Components/Design-tokens/styles/typography.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Design-tokens/styles/typography.stories.tsx
@@ -21,8 +21,8 @@ const TypographySample = ({
     >
       The quick brown fox jumps over the lazy dog
       <div className='mt-24 bg-muted-pressed p-[0.5px]' />
-      <div className='mb-4 mt-16 text-base body-2'> {title} </div>
-      <div className='text-muted body-4'>{className}</div>
+      <div className='mt-16 mb-4 body-2 text-base'> {title} </div>
+      <div className='body-4 text-muted'>{className}</div>
     </div>
   </div>
 );
diff --git a/libs/ui-react/src/lib/Components/Dialog/Dialog.stories.tsx b/libs/ui-react/src/lib/Components/Dialog/Dialog.stories.tsx
index 3c4ecfc66..dc2084085 100644
--- a/libs/ui-react/src/lib/Components/Dialog/Dialog.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Dialog/Dialog.stories.tsx
@@ -29,8 +29,8 @@ const DialogContentTemplate = () => {
         The content area after the DialogHeader can contain any components.
         Ensure proper padding and scrolling if needed.
       </p>
-      <div className='bg-muted rounded-sm p-12'>
-        <p className='text-muted body-3'>
+      <div className='rounded-sm bg-muted p-12'>
+        <p className='body-3 text-muted'>
           <strong className='body-3-semi-bold text-base'>Note:</strong> The
           dialog content defaults to a width of 400px and height auto-adjusts to
           content. Use the className prop on DialogContent to customize
@@ -160,7 +160,7 @@ export const HeightLayouts: Story = {
               onClose={() => setOpenHug(false)}
             />
             <DialogBody>
-              <p className='text-muted body-2'>
+              <p className='body-2 text-muted'>
                 The dialog height adjusts to fit the content, up to a maximum of
                 560px.
               </p>
@@ -180,7 +180,7 @@ export const HeightLayouts: Story = {
               onClose={() => setOpenFixed(false)}
             />
             <DialogBody>
-              <p className='text-muted body-2'>
+              <p className='body-2 text-muted'>
                 The dialog always has a fixed height of 560px, regardless of
                 content.
               </p>
@@ -550,7 +550,7 @@ export const WithListsContent: Story = {
               <h4 className='heading-5-semi-bold'>Settings</h4>
 
               <div className='-mx-8 flex flex-col gap-4'>
-                <div className='bg-canvas sticky top-0 py-8'>
+                <div className='sticky top-0 bg-canvas py-8'>
                   <SearchInput className='mx-8' placeholder='Search item...' />
                 </div>
                 {Array.from({ length: 12 }).map((_, i) => (
@@ -592,11 +592,11 @@ export const InfoStateVariants: Story = {
             />
             <DialogBody>
               <div className='flex flex-col items-center gap-24 overflow-hidden'>
-                <div className='bg-gradient-error pointer-events-none absolute inset-x-0 top-0 h-full' />
+                <div className='pointer-events-none absolute inset-x-0 top-0 h-full bg-gradient-error' />
                 <Spot appearance='error' size={72} />
                 <div className='flex flex-col items-center gap-12 text-center'>
                   <h3 className='heading-4-semi-bold text-base'>Title</h3>
-                  <p className='text-muted body-2'>Description</p>
+                  <p className='body-2 text-muted'>Description</p>
                 </div>
               </div>
             </DialogBody>
@@ -623,11 +623,11 @@ export const InfoStateVariants: Story = {
             />
             <DialogBody>
               <div className='flex flex-col items-center gap-24 overflow-hidden'>
-                <div className='bg-gradient-success pointer-events-none absolute inset-x-0 top-0 h-full' />
+                <div className='pointer-events-none absolute inset-x-0 top-0 h-full bg-gradient-success' />
                 <Spot appearance='check' size={72} />
                 <div className='flex flex-col items-center gap-12 text-center'>
                   <h3 className='heading-4-semi-bold text-base'>Title</h3>
-                  <p className='text-muted body-2'>Description</p>
+                  <p className='body-2 text-muted'>Description</p>
                 </div>
               </div>
             </DialogBody>
diff --git a/libs/ui-react/src/lib/Components/Dialog/Dialog.tsx b/libs/ui-react/src/lib/Components/Dialog/Dialog.tsx
index c278ff036..48607c346 100644
--- a/libs/ui-react/src/lib/Components/Dialog/Dialog.tsx
+++ b/libs/ui-react/src/lib/Components/Dialog/Dialog.tsx
@@ -20,7 +20,7 @@ const [DialogContextProvider, useDialogContext] = createSafeContext<{
 const dialogContentVariants = cva(
   [
     'flex w-400 max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl bg-canvas-sheet pb-24',
-    'fixed left-[50%] top-[50%] z-dialog-content translate-x-[-50%] translate-y-[-50%]',
+    'fixed top-[50%] left-[50%] z-dialog-content translate-[-50%]',
     'data-[state=closed]:animate-content-hide data-[state=open]:animate-content-show',
   ],
   {
diff --git a/libs/ui-react/src/lib/Components/Dialog/DialogHeader/DialogHeader.tsx b/libs/ui-react/src/lib/Components/Dialog/DialogHeader/DialogHeader.tsx
index 47b4dc790..2b6e4e143 100644
--- a/libs/ui-react/src/lib/Components/Dialog/DialogHeader/DialogHeader.tsx
+++ b/libs/ui-react/src/lib/Components/Dialog/DialogHeader/DialogHeader.tsx
@@ -119,12 +119,12 @@ const DialogHeaderComponent = React.forwardRef<
               })}
             >
               {title && (
-                <div className='heading-5-semi-bold truncate text-center'>
+                <div className='truncate text-center heading-5-semi-bold'>
                   {title}
                 </div>
               )}
               {description && (
-                <div className='truncate text-center text-muted body-2'>
+                <div className='truncate text-center body-2 text-muted'>
                   {description}
                 </div>
               )}
@@ -144,7 +144,7 @@ const DialogHeaderComponent = React.forwardRef<
               <div className='flex flex-col gap-4'>
                 {title && <div className='heading-3-semi-bold'>{title}</div>}
                 {description && (
-                  <div className='text-muted body-2'>{description}</div>
+                  <div className='body-2 text-muted'>{description}</div>
                 )}
               </div>
             )}
diff --git a/libs/ui-react/src/lib/Components/Divider/Divider.stories.tsx b/libs/ui-react/src/lib/Components/Divider/Divider.stories.tsx
index 5cdb8ad67..76878477b 100644
--- a/libs/ui-react/src/lib/Components/Divider/Divider.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Divider/Divider.stories.tsx
@@ -32,11 +32,11 @@ export const Base: Story = {
             : 'flex w-full flex-col gap-16'
         }
       >
-        <div className='text-base body-2'>
+        <div className='body-2 text-base'>
           {isVertical ? 'Left content' : 'Content above'}
         </div>
         <Divider {...args} className={isVertical ? 'h-48' : undefined} />
-        <div className='text-base body-2'>
+        <div className='body-2 text-base'>
           {isVertical ? 'Right content' : 'Content below'}
         </div>
       </div>
@@ -57,20 +57,20 @@ export const OrientationShowcase: Story = {
   render: () => (
     <div className='flex flex-col gap-32'>
       <div className='flex flex-col gap-8'>
-        <span className='text-muted body-3'>Horizontal (default)</span>
+        <span className='body-3 text-muted'>Horizontal (default)</span>
         <div className='flex w-full flex-col gap-16'>
-          <div className='text-base body-2'>Content above</div>
+          <div className='body-2 text-base'>Content above</div>
           <Divider orientation='horizontal' />
-          <div className='text-base body-2'>Content below</div>
+          <div className='body-2 text-base'>Content below</div>
         </div>
       </div>
 
       <div className='flex flex-col gap-8'>
-        <span className='text-muted body-3'>Vertical</span>
+        <span className='body-3 text-muted'>Vertical</span>
         <div className='flex items-center gap-16'>
-          <div className='text-base body-2'>Left content</div>
+          <div className='body-2 text-base'>Left content</div>
           <Divider orientation='vertical' className='h-48' />
-          <div className='text-base body-2'>Right content</div>
+          <div className='body-2 text-base'>Right content</div>
         </div>
       </div>
     </div>
@@ -94,18 +94,18 @@ export const InList: Story = {
   render: () => (
     <div className='flex w-full max-w-400 flex-col rounded-lg border border-muted bg-canvas'>
       <div className='flex items-center justify-between p-16'>
-        <span className='text-base body-2'>Item 1</span>
-        <span className='text-muted body-3'>$100</span>
+        <span className='body-2 text-base'>Item 1</span>
+        <span className='body-3 text-muted'>$100</span>
       </div>
       <Divider />
       <div className='flex items-center justify-between p-16'>
-        <span className='text-base body-2'>Item 2</span>
-        <span className='text-muted body-3'>$200</span>
+        <span className='body-2 text-base'>Item 2</span>
+        <span className='body-3 text-muted'>$200</span>
       </div>
       <Divider />
       <div className='flex items-center justify-between p-16'>
-        <span className='text-base body-2'>Item 3</span>
-        <span className='text-muted body-3'>$300</span>
+        <span className='body-2 text-base'>Item 3</span>
+        <span className='body-3 text-muted'>$300</span>
       </div>
     </div>
   ),
diff --git a/libs/ui-react/src/lib/Components/Icon/Icon.stories.tsx b/libs/ui-react/src/lib/Components/Icon/Icon.stories.tsx
index 72bebfdbe..bcf1b724a 100644
--- a/libs/ui-react/src/lib/Components/Icon/Icon.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Icon/Icon.stories.tsx
@@ -52,10 +52,10 @@ const IconCard = ({
       onClick={handleClick}
     >
       <IconComponent size={size} className={className} />
-      <span className='text-muted body-4'>{name}</span>
+      <span className='body-4 text-muted'>{name}</span>
       {copied && (
         <div className='absolute inset-0 flex items-center justify-center rounded-lg bg-muted'>
-          <span className='text-on-accent body-4'>Copied!</span>
+          <span className='body-4 text-on-accent'>Copied!</span>
         </div>
       )}
     </div>
@@ -153,7 +153,7 @@ export const Gallery: StoryObj = {
 
           {/* Results count */}
           <div className='mb-4'>
-            <span className='ml-8 text-muted body-3'>
+            <span className='ml-8 body-3 text-muted'>
               {filteredIcons.length} of {Object.keys(Icons).length} icons
               {searchTerm && ` matching "${searchTerm}"`}
             </span>
@@ -170,12 +170,12 @@ export const Gallery: StoryObj = {
         {/* No results message */}
         {filteredIcons.length === 0 && searchTerm && (
           <div className='flex flex-col items-center justify-center py-16'>
-            <p className='text-muted body-2'>
+            <p className='body-2 text-muted'>
               No icons found matching "{searchTerm}"
             </p>
             <button
               onClick={() => setSearchTerm('')}
-              className='mt-4 text-interactive body-2 hover:text-interactive-hover'
+              className='mt-4 body-2 text-interactive hover:text-interactive-hover'
             >
               Clear search
             </button>
diff --git a/libs/ui-react/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx b/libs/ui-react/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx
index 69c136265..724ad9314 100644
--- a/libs/ui-react/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx
+++ b/libs/ui-react/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { InteractiveIconProps } from './types';
 
 const buttonVariants = cva(
-  'inline-flex size-fit items-center justify-center rounded-full text-muted transition-colors hover:text-muted-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:text-muted-pressed disabled:text-disabled',
+  'inline-flex size-fit cursor-pointer items-center justify-center rounded-full text-muted transition-colors hover:text-muted-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:text-muted-pressed disabled:text-disabled',
   {
     variants: {
       iconType: {
diff --git a/libs/ui-react/src/lib/Components/Link/Link.stories.tsx b/libs/ui-react/src/lib/Components/Link/Link.stories.tsx
index 1d5a4808a..5c59f75f4 100644
--- a/libs/ui-react/src/lib/Components/Link/Link.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Link/Link.stories.tsx
@@ -314,7 +314,7 @@ import { Link as RouterLink } from 'react-router-dom';
 export const InheritVariants: Story = {
   render: () => (
     <div className='flex flex-col gap-32 p-8'>
-      <div className='text-base body-2'>
+      <div className='body-2 text-base'>
         By continuing, you agree to our{' '}
         <Link href='#' onClick={onClick}>
           Terms & Conditions
@@ -326,14 +326,14 @@ export const InheritVariants: Story = {
         .
       </div>
 
-      <div className='text-interactive heading-4'>
+      <div className='heading-4 text-interactive'>
         Need help?{' '}
         <Link href='#' onClick={onClick}>
           Contact Support
         </Link>
       </div>
 
-      <div className='text-muted body-3'>
+      <div className='body-3 text-muted'>
         Learn more about security in our{' '}
         <Link href='#' onClick={onClick}>
           Security Guide
@@ -341,7 +341,7 @@ export const InheritVariants: Story = {
         .
       </div>
 
-      <div className='text-base body-1-semi-bold'>
+      <div className='body-1-semi-bold text-base'>
         Already have an account?{' '}
         <Link underline={false} href='#' onClick={onClick}>
           Sign in
diff --git a/libs/ui-react/src/lib/Components/ListItem/ListItem.stories.tsx b/libs/ui-react/src/lib/Components/ListItem/ListItem.stories.tsx
index 3395b2a0a..4418853f4 100644
--- a/libs/ui-react/src/lib/Components/ListItem/ListItem.stories.tsx
+++ b/libs/ui-react/src/lib/Components/ListItem/ListItem.stories.tsx
@@ -345,7 +345,7 @@ export const DisabledState: Story = {
 export const ResponsiveLayout: Story = {
   render: () => (
     <div className='grid w-400 grid-cols-1 gap-4 border border-muted-subtle p-16'>
-      <div className='text-muted body-4-semi-bold'>Container: 320px wide</div>
+      <div className='body-4-semi-bold text-muted'>Container: 320px wide</div>
       <div>
         <ListItem>
           <ListItemLeading>
diff --git a/libs/ui-react/src/lib/Components/ListItem/ListItem.tsx b/libs/ui-react/src/lib/Components/ListItem/ListItem.tsx
index 995f1b96c..0d98ee9c4 100644
--- a/libs/ui-react/src/lib/Components/ListItem/ListItem.tsx
+++ b/libs/ui-react/src/lib/Components/ListItem/ListItem.tsx
@@ -159,7 +159,7 @@ export const ListItemDescription = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'w-full items-center truncate text-muted body-3',
+        'w-full items-center truncate body-3 text-muted',
         isInTrailing ? 'justify-end text-end' : 'justify-start text-start',
         disabled && 'text-disabled',
         className,
diff --git a/libs/ui-react/src/lib/Components/Menu/Menu.tsx b/libs/ui-react/src/lib/Components/Menu/Menu.tsx
index 224ea6803..51331b3bf 100644
--- a/libs/ui-react/src/lib/Components/Menu/Menu.tsx
+++ b/libs/ui-react/src/lib/Components/Menu/Menu.tsx
@@ -26,16 +26,16 @@ const contentStyles = cn(
 );
 
 const itemStyles = cn(
-  'relative flex cursor-default select-none items-center gap-12',
-  'h-44 rounded-sm px-8 outline-none',
-  'text-base body-2-semi-bold',
+  'relative flex cursor-default items-center gap-12 select-none',
+  'h-44 rounded-sm px-8 outline-hidden',
+  'body-2-semi-bold text-base',
   'transition-colors',
   'focus:bg-base-transparent-hover',
   'active:bg-base-transparent-pressed',
-  'data-[disabled]:pointer-events-none data-[disabled]:text-disabled',
+  'data-disabled:pointer-events-none data-disabled:text-disabled',
 );
 
-const labelStyles = cn('px-8 py-4 text-muted body-3-semi-bold');
+const labelStyles = cn('px-8 py-4 body-3-semi-bold text-muted');
 
 const subTriggerStyles = cn(
   itemStyles,
diff --git a/libs/ui-react/src/lib/Components/SearchInput/SearchInput.stories.tsx b/libs/ui-react/src/lib/Components/SearchInput/SearchInput.stories.tsx
index 90214b861..8386e67c7 100644
--- a/libs/ui-react/src/lib/Components/SearchInput/SearchInput.stories.tsx
+++ b/libs/ui-react/src/lib/Components/SearchInput/SearchInput.stories.tsx
@@ -207,14 +207,14 @@ export const DebouncedSearchInput: Story = {
         />
         {/* Search status indicator */}
         {isSearching && (
-          <div className='italic text-muted body-3'>Searching...</div>
+          <div className='body-3 text-muted italic'>Searching...</div>
         )}
         {/* Results */}
         {inputValue.length > 0 && !isSearching && (
           <div className='rounded-md bg-muted p-16'>
             {filteredResults.length > 0 ? (
               <div>
-                <p className='mb-8 text-muted body-3'>
+                <p className='mb-8 body-3 text-muted'>
                   Found {filteredResults.length} result
                   {filteredResults.length !== 1 ? 's' : ''} for "{searchQuery}"
                 </p>
@@ -232,8 +232,8 @@ export const DebouncedSearchInput: Story = {
               </div>
             ) : (
               <div className='text-center'>
-                <p className='text-muted body-2'>Nothing found</p>
-                <p className='mt-4 text-muted body-3'>
+                <p className='body-2 text-muted'>Nothing found</p>
+                <p className='mt-4 body-3 text-muted'>
                   No fruits match "{searchQuery}"
                 </p>
               </div>
diff --git a/libs/ui-react/src/lib/Components/SearchInput/SearchInput.tsx b/libs/ui-react/src/lib/Components/SearchInput/SearchInput.tsx
index 5a493e7f5..d2568835d 100644
--- a/libs/ui-react/src/lib/Components/SearchInput/SearchInput.tsx
+++ b/libs/ui-react/src/lib/Components/SearchInput/SearchInput.tsx
@@ -64,7 +64,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
         size={20}
         // Todo: fix gap between search icon and input not showing input-caret on hover
         // we need to use paddings around the prefix rather then gaps ( radix ui is doing this )
-        className='text-muted group-has-[:disabled]:text-disabled'
+        className='text-muted group-has-disabled:text-disabled'
         aria-hidden='true'
       />
     );
diff --git a/libs/ui-react/src/lib/Components/Select/Select.stories.tsx b/libs/ui-react/src/lib/Components/Select/Select.stories.tsx
index 2d58e3bd8..162c4d997 100644
--- a/libs/ui-react/src/lib/Components/Select/Select.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Select/Select.stories.tsx
@@ -234,14 +234,14 @@ export const WithDescription: Story = {
               className='flex flex-col items-start justify-start gap-2'
             >
               <SelectItemText>Option 1</SelectItemText>
-              <div className='text-muted body-4'>this is a description</div>
+              <div className='body-4 text-muted'>this is a description</div>
             </SelectItem>
             <SelectItem
               value='option2'
               className='flex flex-col items-start justify-start gap-4'
             >
               <SelectItemText>Option 2</SelectItemText>
-              <div className='text-muted body-4'>this is a description</div>
+              <div className='body-4 text-muted'>this is a description</div>
             </SelectItem>
           </SelectContent>
         </Select>
diff --git a/libs/ui-react/src/lib/Components/Select/Select.tsx b/libs/ui-react/src/lib/Components/Select/Select.tsx
index dffd55b98..036033691 100644
--- a/libs/ui-react/src/lib/Components/Select/Select.tsx
+++ b/libs/ui-react/src/lib/Components/Select/Select.tsx
@@ -24,19 +24,19 @@ function SelectGroup({ ...props }: SelectGroupProps) {
 }
 
 const triggerStyles = cn(
-  'group relative flex h-48 w-full items-center justify-between gap-8',
+  'group relative flex h-48 w-full cursor-pointer items-center justify-between gap-8',
   'rounded-sm bg-muted px-16',
-  'text-base body-2',
+  'body-2 text-base',
   'hover:bg-muted-hover',
-  'transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-focus',
+  'transition-colors duration-200 focus:ring-2 focus:ring-focus focus:outline-hidden',
   'disabled:cursor-not-allowed disabled:text-disabled',
 );
 
 const labelStyles = cn(
   'pointer-events-none absolute left-16 origin-left text-muted transition-all duration-300',
   'top-10 -translate-y-4 body-4',
-  'group-data-[placeholder]:top-14 group-data-[placeholder]:translate-y-0 group-data-[placeholder]:body-2',
-  'group-data-[:disabled]:text-disabled disabled:text-disabled group-data-[disabled]:text-disabled group-data-[placeholder][disabled]:text-disabled',
+  'group-data-placeholder:top-14 group-data-placeholder:translate-y-0 group-data-placeholder:body-2',
+  'group-data-disabled:text-disabled disabled:text-disabled',
   'max-w-[calc(100%-var(--size-56))] truncate',
 );
 
@@ -55,9 +55,9 @@ const SelectTrigger = React.forwardRef<
     )}
     <span
       className={cn(
-        'flex-1 truncate text-left ',
+        'flex-1 truncate text-left',
         label &&
-          'mt-16 opacity-100 transition-opacity delay-100 duration-300 group-data-[placeholder]:mt-0 group-data-[placeholder]:opacity-0',
+          'mt-16 opacity-100 transition-opacity delay-100 duration-300 group-data-placeholder:mt-0 group-data-placeholder:opacity-0',
         className,
       )}
     >
@@ -66,7 +66,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Icon asChild>
       <ChevronDown
         size={20}
-        className='shrink-0 text-muted group-data-[disabled]:text-disabled'
+        className='shrink-0 text-muted group-data-disabled:text-disabled'
       />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
@@ -75,13 +75,13 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const contentStyles = cva(
   [
-    'relative z-select max-h-[var(--radix-select-content-available-height)] overflow-y-auto overflow-x-hidden',
+    'relative z-select max-h-(--radix-select-content-available-height) overflow-x-hidden overflow-y-auto',
     'rounded-sm bg-muted',
     'shadow-md',
-    'data-[side=bottom]:animate-slide-in-from-top-8',
-    'data-[side=top]:animate-slide-in-from-bottom-8',
-    'data-[side=left]:animate-slide-in-from-right-8',
-    'data-[side=right]:animate-slide-in-from-left-8',
+    'data-[side=bottom]:animate-slide-in-from-top',
+    'data-[side=top]:animate-slide-in-from-bottom',
+    'data-[side=left]:animate-slide-in-from-right',
+    'data-[side=right]:animate-slide-in-from-left',
   ],
   {
     variants: {
@@ -101,7 +101,7 @@ const viewportStyles = cva('p-8', {
   variants: {
     position: {
       popper:
-        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)',
       'item-aligned': '',
     },
   },
@@ -139,20 +139,20 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     data-slot='select-label'
-    className={cn('mb-4 px-8 pb-0 pt-8 text-muted body-3-semi-bold', className)}
+    className={cn('mb-4 px-8 pt-8 pb-0 body-3-semi-bold text-muted', className)}
     {...props}
   />
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const itemStyles = cn(
-  'relative flex w-full cursor-default select-none items-center bg-base-transparent',
+  'relative flex w-full cursor-pointer items-center bg-base-transparent select-none',
   'rounded-sm p-8',
-  'text-base body-2',
-  'outline-none',
+  'body-2 text-base',
+  'outline-hidden',
   'focus:bg-base-transparent-hover',
   'active:bg-base-transparent-pressed',
-  'data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled',
+  'data-disabled:cursor-not-allowed data-disabled:text-disabled',
 );
 
 const SelectItem = React.forwardRef<
@@ -193,7 +193,7 @@ const SelectItemText = React.forwardRef<
   <SelectPrimitive.ItemText
     ref={ref}
     data-slot='select-item-text'
-    className={cn('text-muted body-2', className)}
+    className={cn('body-2 text-muted', className)}
     {...props}
   />
 ));
diff --git a/libs/ui-react/src/lib/Components/Spinner/Spinner.stories.tsx b/libs/ui-react/src/lib/Components/Spinner/Spinner.stories.tsx
index de9743192..22657999e 100644
--- a/libs/ui-react/src/lib/Components/Spinner/Spinner.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Spinner/Spinner.stories.tsx
@@ -39,31 +39,31 @@ export const Sizes: Story = {
     <div className='flex items-center justify-center gap-32'>
       <div className='flex flex-col items-center gap-4'>
         <Spinner size={12} />
-        <span className='text-muted body-4'>12</span>
+        <span className='body-4 text-muted'>12</span>
       </div>
       <div className='flex flex-col items-center gap-4'>
         <Spinner size={16} />
-        <span className='text-muted body-4'>16</span>
+        <span className='body-4 text-muted'>16</span>
       </div>
       <div className='flex flex-col items-center gap-4'>
         <Spinner size={20} />
-        <span className='text-muted body-4'>20</span>
+        <span className='body-4 text-muted'>20</span>
       </div>
       <div className='flex flex-col items-center gap-4'>
         <Spinner size={24} />
-        <span className='text-muted body-4'>24</span>
+        <span className='body-4 text-muted'>24</span>
       </div>
       <div className='flex flex-col items-center gap-4'>
         <Spinner size={40} />
-        <span className='text-muted body-4'>40</span>
+        <span className='body-4 text-muted'>40</span>
       </div>
       <div className='flex flex-col items-center gap-4'>
         <Spinner size={48} />
-        <span className='text-muted body-4'>48</span>
+        <span className='body-4 text-muted'>48</span>
       </div>
       <div className='flex flex-col items-center gap-4'>
         <Spinner size={56} />
-        <span className='text-muted body-4'>56</span>
+        <span className='body-4 text-muted'>56</span>
       </div>
     </div>
   ),
diff --git a/libs/ui-react/src/lib/Components/Subheader/Subheader.stories.tsx b/libs/ui-react/src/lib/Components/Subheader/Subheader.stories.tsx
index 2c46ec8ba..53ccb5311 100644
--- a/libs/ui-react/src/lib/Components/Subheader/Subheader.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Subheader/Subheader.stories.tsx
@@ -246,7 +246,7 @@ export const ContentVariations: Story = {
 export const ResponsiveLayout: Story = {
   render: () => (
     <Container className='grid grid-cols-1 gap-16'>
-      <div className='text-muted body-4-semi-bold'>
+      <div className='body-4-semi-bold text-muted'>
         Container with a fixed width
       </div>
       <Subheader title='Title with Tooltip'>
diff --git a/libs/ui-react/src/lib/Components/Subheader/Subheader.tsx b/libs/ui-react/src/lib/Components/Subheader/Subheader.tsx
index 5e9e257f8..499c7ca0c 100644
--- a/libs/ui-react/src/lib/Components/Subheader/Subheader.tsx
+++ b/libs/ui-react/src/lib/Components/Subheader/Subheader.tsx
@@ -85,7 +85,7 @@ export const Subheader = ({
       {...props}
     >
       <div className='flex min-w-0 items-center gap-2'>
-        <h2 className='heading-5-semi-bold min-w-0 truncate'>{title}</h2>
+        <h2 className='min-w-0 truncate heading-5-semi-bold'>{title}</h2>
         {infoSlot}
       </div>
       {actionSlot}
diff --git a/libs/ui-react/src/lib/Components/Switch/Switch.tsx b/libs/ui-react/src/lib/Components/Switch/Switch.tsx
index 415b1550e..bd30c224f 100644
--- a/libs/ui-react/src/lib/Components/Switch/Switch.tsx
+++ b/libs/ui-react/src/lib/Components/Switch/Switch.tsx
@@ -6,10 +6,10 @@ import { SwitchProps } from './types';
 
 const switchVariants = cva(
   cn(
-    'group flex items-center rounded-full p-2 transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
+    'group flex cursor-pointer items-center rounded-full p-2 transition-colors duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
     '[&[data-state=unchecked]:not([data-disabled])]:bg-muted-strong [&[data-state=unchecked]:not([data-disabled])]:hover:bg-muted-strong-hover [&[data-state=unchecked]:not([data-disabled])]:active:bg-muted-strong-pressed',
     '[&[data-state=checked]:not([data-disabled])]:bg-active [&[data-state=checked]:not([data-disabled])]:hover:bg-active-hover [&[data-state=checked]:not([data-disabled])]:active:bg-active-pressed',
-    'data-[disabled]:bg-disabled-strong',
+    'data-disabled:bg-disabled-strong',
   ),
   {
     variants: {
@@ -25,7 +25,7 @@ const switchVariants = cva(
 );
 
 const thumbVariants = cva(
-  'translate-x-0 rounded-full bg-white transition-transform duration-200 ease-in-out group-data-[disabled]:bg-base',
+  'translate-x-0 rounded-full bg-white transition-transform duration-200 ease-in-out group-data-disabled:bg-base',
   {
     variants: {
       size: {
diff --git a/libs/ui-react/src/lib/Components/TextInput/TextInput.stories.tsx b/libs/ui-react/src/lib/Components/TextInput/TextInput.stories.tsx
index b3a0d62fb..250500818 100644
--- a/libs/ui-react/src/lib/Components/TextInput/TextInput.stories.tsx
+++ b/libs/ui-react/src/lib/Components/TextInput/TextInput.stories.tsx
@@ -175,7 +175,7 @@ export const HiddenClearButton: Story = {
           onChange={(e) => setValue(e.target.value)}
           hideClearButton
         />
-        <div className='text-muted body-3'>
+        <div className='body-3 text-muted'>
           Use hideClearButton to prevent the clear button from appearing.
         </div>
       </div>
@@ -217,7 +217,7 @@ export const WithError: Story = {
             !isValidEmail ? 'Please enter a valid email address' : undefined
           }
         />
-        <div className='mt-12 text-muted body-3'>
+        <div className='mt-12 body-3 text-muted'>
           Try typing a valid email address or clicking the clear button to
           remove the error state
         </div>
@@ -324,7 +324,7 @@ export const WithCustomElement: Story = {
             />
           </div>
         </div>
-        <div className='mt-16 text-muted body-3'>
+        <div className='mt-16 body-3 text-muted'>
           The suffix prop allows you to add custom interactive elements like
           tooltips, or action buttons
         </div>
@@ -413,10 +413,10 @@ export const Interactive: Story = {
     if (isSubmitted) {
       return (
         <div className='rounded-md bg-success p-16 text-center'>
-          <div className='text-success body-1-semi-bold'>
+          <div className='body-1-semi-bold text-success'>
             ✓ Form submitted successfully!
           </div>
-          <div className='mt-4 text-muted body-3'>Resetting form...</div>
+          <div className='mt-4 body-3 text-muted'>Resetting form...</div>
         </div>
       );
     }
@@ -487,7 +487,7 @@ export const Interactive: Story = {
             </Button>
           </div>
 
-          <div className='text-muted body-3'>
+          <div className='body-3 text-muted'>
             This example demonstrates form validation, error handling, clear
             buttons, and right elements working together.
           </div>
diff --git a/libs/ui-react/src/lib/Components/Tile/Tile.stories.tsx b/libs/ui-react/src/lib/Components/Tile/Tile.stories.tsx
index b8ea2ce8c..79b7b0b14 100644
--- a/libs/ui-react/src/lib/Components/Tile/Tile.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Tile/Tile.stories.tsx
@@ -127,7 +127,7 @@ export const VariantsShowcase: Story = {
           <TileTitle>With Trailing Content</TileTitle>
           <TileDescription>Additional information</TileDescription>
         </TileContent>
-        <div className='text-success body-2-semi-bold'>+7.87%</div>
+        <div className='body-2-semi-bold text-success'>+7.87%</div>
       </Tile>
     </div>
   ),
diff --git a/libs/ui-react/src/lib/Components/Tile/Tile.tsx b/libs/ui-react/src/lib/Components/Tile/Tile.tsx
index 658a12dd0..abaaa41e9 100644
--- a/libs/ui-react/src/lib/Components/Tile/Tile.tsx
+++ b/libs/ui-react/src/lib/Components/Tile/Tile.tsx
@@ -24,7 +24,7 @@ const tileVariants = {
   root: cva(
     [
       'group relative flex flex-col items-center gap-8 text-base transition-colors',
-      'focus-visible:outline-focus rounded-md focus-visible:outline-2',
+      'rounded-md focus-visible:outline-2 focus-visible:outline-focus',
     ],
     {
       variants: {
@@ -75,7 +75,7 @@ const tileVariants = {
     },
   ),
   button: cva(
-    'focus-visible:outline-focus flex w-full flex-col  items-center gap-8 rounded-md px-8 py-12 focus-visible:outline-2',
+    'flex w-full cursor-pointer flex-col items-center gap-8 rounded-md px-8 py-12 focus-visible:outline-2 focus-visible:outline-focus',
   ),
 };
 
@@ -254,7 +254,7 @@ export const TileTitle = ({
   return (
     <div
       className={cn(
-        'body-2-semi-bold w-full truncate',
+        'w-full truncate body-2-semi-bold',
         disabled && 'text-disabled',
         className,
       )}
@@ -282,7 +282,7 @@ export const TileDescription = ({
   return (
     <div
       className={cn(
-        'body-3 w-full truncate',
+        'w-full truncate body-3',
         disabled ? 'text-disabled' : 'text-muted',
         className,
       )}
@@ -340,7 +340,7 @@ export const TileSecondaryAction = ({
     <InteractiveIcon
       data-slot='tile-secondary-action'
       className={cn(
-        'absolute right-4 top-8 opacity-0 transition-opacity duration-200 focus-within:opacity-100 group-hover:opacity-100',
+        'absolute top-8 right-4 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100',
         className,
       )}
       data-secondary-button-container
diff --git a/libs/ui-react/src/lib/Components/Tooltip/Tooltip.stories.tsx b/libs/ui-react/src/lib/Components/Tooltip/Tooltip.stories.tsx
index 5e1da60af..a447e79b3 100644
--- a/libs/ui-react/src/lib/Components/Tooltip/Tooltip.stories.tsx
+++ b/libs/ui-react/src/lib/Components/Tooltip/Tooltip.stories.tsx
@@ -137,7 +137,7 @@ export const LongContent: Story = {
 export const CustomDelay: Story = {
   render: () => (
     <div className='flex h-256 flex-col items-center justify-center gap-8'>
-      <p className='text-muted body-2'>Compare different delay durations</p>
+      <p className='body-2 text-muted'>Compare different delay durations</p>
       <Tooltip>
         <TooltipTrigger asChild>
           <Button>Default delay (200ms)</Button>
diff --git a/libs/ui-react/src/lib/Components/Tooltip/Tooltip.tsx b/libs/ui-react/src/lib/Components/Tooltip/Tooltip.tsx
index 4778746bd..3f2a4ce6d 100644
--- a/libs/ui-react/src/lib/Components/Tooltip/Tooltip.tsx
+++ b/libs/ui-react/src/lib/Components/Tooltip/Tooltip.tsx
@@ -9,7 +9,7 @@ import {
 } from './types';
 
 const tooltipContentVariants = cva(
-  'z-tooltip w-fit select-none text-balance rounded-xs bg-interactive px-8 py-4 text-on-interactive body-3',
+  'z-tooltip w-fit rounded-xs bg-interactive px-8 py-4 body-3 text-balance text-on-interactive select-none',
   {
     variants: {
       side: {
@@ -166,7 +166,7 @@ export const TooltipContent = ({
         className={cn(tooltipContentVariants({ side }), className)}
         {...props}
       >
-        <TooltipPrimitive.Arrow className='size-10 translate-y-[calc(-50%_-_1px)] rotate-45 rounded-[1px] bg-interactive fill-interactive' />
+        <TooltipPrimitive.Arrow className='size-10 translate-y-[calc(-50%-1px)] rotate-45 rounded-[1px] bg-interactive fill-interactive' />
         <div className='relative'>{children}</div>
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
diff --git a/libs/ui-react/src/styles.css b/libs/ui-react/src/styles.css
index b5c61c956..37eb4665d 100644
--- a/libs/ui-react/src/styles.css
+++ b/libs/ui-react/src/styles.css
@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../tailwind.config.ts';
diff --git a/package-lock.json b/package-lock.json
index e46aee75d..63a8b125c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,6 +78,8 @@
         "@swc/core": "~1.5.7",
         "@swc/helpers": "~0.5.11",
         "@swc/jest": "~0.2.36",
+        "@tailwindcss/postcss": "^4.1.17",
+        "@tailwindcss/vite": "^4.1.17",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-native": "^5.4.3",
         "@testing-library/react": "16.1.0",
@@ -91,17 +93,16 @@
         "@vitejs/plugin-react": "^4.3.4",
         "@vitest/coverage-v8": "^3.0.5",
         "@vitest/ui": "^3.0.0",
-        "autoprefixer": "10.4.13",
         "chromatic": "^13.1.2",
         "eslint": "^9.36.0",
         "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-better-tailwindcss": "^4.0.0-beta.3",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-jsx-a11y": "6.10.1",
         "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-react": "7.35.0",
         "eslint-plugin-react-hooks": "5.0.0",
         "eslint-plugin-storybook": "10.0.3",
-        "eslint-plugin-tailwindcss": "^3.18.2",
         "jest": "^30.2.0",
         "jest-environment-node": "^29.7.0",
         "jest-react-native": "18.0.0",
@@ -109,7 +110,6 @@
         "jsdom": "~22.1.0",
         "jsonc-eslint-parser": "^2.1.0",
         "nx": "21.2.2",
-        "postcss": "^8.4.38",
         "prettier": "^3.0.0",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -125,7 +125,7 @@
         "storybook": "10.0.3",
         "style-dictionary": "^4.3.3",
         "swc-loader": "0.1.15",
-        "tailwindcss": "^3.4.3",
+        "tailwindcss": "^4.1.17",
         "ts-jest": "^29.1.0",
         "ts-node": "10.9.1",
         "tslib": "^2.3.0",
@@ -140,7 +140,7 @@
       "peerDependencies": {
         "react": "18.3.1",
         "react-native": "~0.77.3",
-        "tailwindcss": "^3.4.3"
+        "tailwindcss": "^4.1.17"
       }
     },
     "apps/app-sandbox-react": {
@@ -172,7 +172,7 @@
       "version": "0.0.39",
       "license": "Apache-2.0",
       "dependencies": {
-        "tailwindcss": "^3.4.0",
+        "tailwindcss": "^4.1.17",
         "tslib": "^2.3.0"
       }
     },
@@ -242,6 +242,7 @@
     },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3035,6 +3036,27 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/css-tree": {
+      "version": "3.6.8",
+      "resolved": "https://registry.npmjs.org/@eslint/css-tree/-/css-tree-3.6.8.tgz",
+      "integrity": "sha512-s0f40zY7dlMp8i0Jf0u6l/aSswS0WRAgkhgETgiCJRcxIWb4S/Sp9uScKHWbkM3BnoFLbJbmOYk5AZUDFVxaLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.23.0",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@eslint/css-tree/node_modules/mdn-data": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.23.0.tgz",
+      "integrity": "sha512-786vq1+4079JSeu2XdcDjrhi/Ry7BWtjDl9WtGPWLiIHb2T66GvIVflZTBoSNZ5JqTtJGYEVMuFA/lbQlMOyDQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "3.3.1",
       "dev": true,
@@ -3640,6 +3662,7 @@
     },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -3655,6 +3678,7 @@
     },
     "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
       "version": "6.2.3",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3665,6 +3689,7 @@
     },
     "node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -3680,6 +3705,7 @@
     },
     "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
       "version": "8.1.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -6960,6 +6986,7 @@
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -6971,6 +6998,7 @@
     },
     "node_modules/@nodelib/fs.stat": {
       "version": "2.0.5",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -6978,6 +7006,7 @@
     },
     "node_modules/@nodelib/fs.walk": {
       "version": "1.2.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -7579,6 +7608,7 @@
     },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -12941,6 +12971,302 @@
         "node": ">=14.16"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
+      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz",
+      "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "tailwindcss": "4.1.18"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "dev": true,
@@ -14111,6 +14437,16 @@
         "win32"
       ]
     },
+    "node_modules/@valibot/to-json-schema": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@valibot/to-json-schema/-/to-json-schema-1.5.0.tgz",
+      "integrity": "sha512-GE7DmSr1C2UCWPiV0upRH6mv0cCPsqYGs819fb6srCS1tWhyXrkGGe+zxUiwzn/L1BOfADH4sNjY/YHCuP8phQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "valibot": "^1.2.0"
+      }
+    },
     "node_modules/@verdaccio/auth": {
       "version": "8.0.0-next-8.19",
       "dev": true,
@@ -15399,10 +15735,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "license": "MIT"
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "license": "ISC",
@@ -15480,10 +15812,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "dev": true,
@@ -16227,16 +16555,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/bl": {
       "version": "4.1.0",
       "dev": true,
@@ -16332,6 +16650,7 @@
     },
     "node_modules/brace-expansion": {
       "version": "2.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -16621,13 +16940,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "dev": true,
@@ -16712,38 +17024,6 @@
         "node": ">= 16"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/chromatic": {
       "version": "13.3.3",
       "dev": true,
@@ -17358,6 +17638,7 @@
     },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -17483,6 +17764,7 @@
     },
     "node_modules/cssesc": {
       "version": "3.0.0",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -18027,6 +18309,16 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "dev": true,
@@ -18056,10 +18348,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "license": "Apache-2.0"
-    },
     "node_modules/diff": {
       "version": "4.0.2",
       "dev": true,
@@ -18095,10 +18383,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "license": "MIT"
-    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "dev": true,
@@ -18268,6 +18552,7 @@
     },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/ecc-jsbn": {
@@ -18322,6 +18607,7 @@
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/emojis-list": {
@@ -18364,7 +18650,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.18.3",
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -18823,6 +19111,49 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/eslint-plugin-better-tailwindcss": {
+      "version": "4.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-better-tailwindcss/-/eslint-plugin-better-tailwindcss-4.0.0-rc.0.tgz",
+      "integrity": "sha512-GhVpJvjDt5PpIe3ryyj/ahSVeMfYyd+oRExorluBL/1AYPwL2l0yiKKTIvdqyl2VXFDxD/v3NKMRBZvHkeySFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint/css-tree": "^3.6.8",
+        "@valibot/to-json-schema": "^1.5.0",
+        "enhanced-resolve": "^5.18.4",
+        "jiti": "^2.6.1",
+        "synckit": "^0.11.11",
+        "tailwind-csstree": "^0.1.4",
+        "tsconfig-paths-webpack-plugin": "^4.2.0",
+        "valibot": "^1.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0",
+        "oxlint": "^1.35.0",
+        "tailwindcss": "^3.3.0 || ^4.1.17"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        },
+        "oxlint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-better-tailwindcss/node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/eslint-plugin-import": {
       "version": "2.31.0",
       "dev": true,
@@ -19089,21 +19420,6 @@
         "storybook": "^10.0.3"
       }
     },
-    "node_modules/eslint-plugin-tailwindcss": {
-      "version": "3.18.2",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fast-glob": "^3.2.5",
-        "postcss": "^8.4.4"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      },
-      "peerDependencies": {
-        "tailwindcss": "^3.4.0"
-      }
-    },
     "node_modules/eslint-scope": {
       "version": "8.4.0",
       "dev": true,
@@ -19514,6 +19830,7 @@
     },
     "node_modules/fast-glob": {
       "version": "3.3.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -19528,6 +19845,7 @@
     },
     "node_modules/fast-glob/node_modules/glob-parent": {
       "version": "5.1.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -19586,6 +19904,7 @@
     },
     "node_modules/fastq": {
       "version": "1.19.1",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -20498,6 +20817,7 @@
     },
     "node_modules/glob-parent": {
       "version": "6.0.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -21424,16 +21744,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "dev": true,
@@ -21531,6 +21841,7 @@
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -21585,6 +21896,7 @@
     },
     "node_modules/is-glob": {
       "version": "4.0.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -21884,6 +22196,7 @@
     },
     "node_modules/isexe": {
       "version": "2.0.0",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/isobject": {
@@ -22055,6 +22368,7 @@
     },
     "node_modules/jackspeak": {
       "version": "3.4.3",
+      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -25336,6 +25650,267 @@
       "version": "2.0.0",
       "license": "MIT"
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "dev": true,
@@ -25777,7 +26352,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.18",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -25895,6 +26472,7 @@
     },
     "node_modules/merge2": {
       "version": "1.4.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -26466,6 +27044,7 @@
     },
     "node_modules/minipass": {
       "version": "7.1.2",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -26509,15 +27088,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "funding": [
@@ -27235,18 +27805,12 @@
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "dev": true,
@@ -27615,6 +28179,7 @@
     },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
+      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/pako": {
@@ -27823,6 +28388,7 @@
     },
     "node_modules/path-key": {
       "version": "3.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -27834,6 +28400,7 @@
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
+      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
@@ -27848,6 +28415,7 @@
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
       "version": "10.4.3",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/path-to-regexp": {
@@ -28209,6 +28777,7 @@
     },
     "node_modules/postcss": {
       "version": "8.5.6",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -28321,38 +28890,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
     "node_modules/postcss-load-config": {
       "version": "3.1.4",
       "dev": true,
@@ -28578,29 +29115,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
     "node_modules/postcss-normalize-charset": {
       "version": "5.1.0",
       "dev": true,
@@ -28783,6 +29297,7 @@
     },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -28936,6 +29451,7 @@
     },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -29200,6 +29716,7 @@
     },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -29878,20 +30395,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/read-cache/node_modules/pify": {
-      "version": "2.3.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "dev": true,
@@ -29905,26 +30408,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/readline": {
       "version": "1.3.0",
       "license": "BSD"
@@ -30105,6 +30588,7 @@
     },
     "node_modules/resolve": {
       "version": "1.22.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -30189,6 +30673,7 @@
     },
     "node_modules/reusify": {
       "version": "1.1.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -30457,6 +30942,7 @@
     },
     "node_modules/run-parallel": {
       "version": "1.2.0",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -30833,6 +31319,7 @@
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -30843,6 +31330,7 @@
     },
     "node_modules/shebang-regex": {
       "version": "3.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -31051,6 +31539,7 @@
     },
     "node_modules/source-map-js": {
       "version": "1.2.1",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -31847,6 +32336,7 @@
     "node_modules/string-width-cjs": {
       "name": "string-width",
       "version": "4.2.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -31859,10 +32349,12 @@
     },
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -31870,6 +32362,7 @@
     },
     "node_modules/string-width-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -32002,6 +32495,7 @@
     },
     "node_modules/strip-ansi": {
       "version": "7.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -32016,6 +32510,7 @@
     "node_modules/strip-ansi-cjs": {
       "name": "strip-ansi",
       "version": "6.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -32026,6 +32521,7 @@
     },
     "node_modules/strip-ansi/node_modules/ansi-regex": {
       "version": "6.2.2",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -32205,92 +32701,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/sucrase/node_modules/foreground-child": {
-      "version": "3.3.1",
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "license": "MIT"
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "license": "ISC",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/sudo-prompt": {
       "version": "9.2.1",
       "dev": true,
@@ -32401,6 +32811,20 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tailwind-csstree": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/tailwind-csstree/-/tailwind-csstree-0.1.4.tgz",
+      "integrity": "sha512-FzD187HuFIZEyeR7Xy6sJbJll2d4SybS90satC8SKIuaNRC05CxMvdzN7BUsfDQffcnabckRM5OIcfArjsZ0mg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.6.0",
       "license": "MIT",
@@ -32410,89 +32834,10 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/jiti": {
-      "version": "1.21.7",
-      "license": "MIT",
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/lilconfig": {
-      "version": "3.1.3",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.2.3",
@@ -32713,23 +33058,6 @@
         "b4a": "^1.6.4"
       }
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/thingies": {
       "version": "2.5.0",
       "dev": true,
@@ -33010,10 +33338,6 @@
         "node": ">=6.10"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "license": "Apache-2.0"
-    },
     "node_modules/ts-jest": {
       "version": "29.4.1",
       "dev": true,
@@ -33175,6 +33499,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/tsconfig-paths-webpack-plugin": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.2.0.tgz",
+      "integrity": "sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.7.0",
+        "tapable": "^2.2.1",
+        "tsconfig-paths": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/tsconfig-paths/node_modules/strip-bom": {
       "version": "3.0.0",
       "dev": true,
@@ -33723,6 +34063,7 @@
     },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/utils-merge": {
@@ -33758,6 +34099,21 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/valibot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/valibot/-/valibot-1.2.0.tgz",
+      "integrity": "sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/validate-npm-package-name": {
       "version": "5.0.1",
       "dev": true,
@@ -35045,6 +35401,7 @@
     },
     "node_modules/which": {
       "version": "2.0.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -35199,6 +35556,7 @@
     "node_modules/wrap-ansi-cjs": {
       "name": "wrap-ansi",
       "version": "7.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -35214,6 +35572,7 @@
     },
     "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -35306,6 +35665,7 @@
     },
     "node_modules/yaml": {
       "version": "2.8.1",
+      "dev": true,
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
diff --git a/package.json b/package.json
index 9acbb08e9..7eb340a21 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,8 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.0.5",
     "@vitest/ui": "^3.0.0",
-    "autoprefixer": "10.4.13",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.17",
     "chromatic": "^13.1.2",
     "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
@@ -94,7 +95,7 @@
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-storybook": "10.0.3",
-    "eslint-plugin-tailwindcss": "^3.18.2",
+    "eslint-plugin-better-tailwindcss": "^4.0.0-beta.3",
     "jest": "^30.2.0",
     "jest-environment-node": "^29.7.0",
     "jest-react-native": "18.0.0",
@@ -102,7 +103,6 @@
     "jsdom": "~22.1.0",
     "jsonc-eslint-parser": "^2.1.0",
     "nx": "21.2.2",
-    "postcss": "^8.4.38",
     "prettier": "^3.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -118,7 +118,7 @@
     "storybook": "10.0.3",
     "style-dictionary": "^4.3.3",
     "swc-loader": "0.1.15",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.1.17",
     "ts-jest": "^29.1.0",
     "ts-node": "10.9.1",
     "tslib": "^2.3.0",
@@ -150,6 +150,6 @@
   "peerDependencies": {
     "react": "18.3.1",
     "react-native": "~0.77.3",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^4.1.17"
   }
 }