chore: configure Tailwind v3/v4 dual support across packages

- React Native package: Tailwind v3 only (using twrnc preset)
- React package: Support both v3 (preset) and v4 (theme.css)
- Update eslint and jest configs for platform-specific requirements
- Configure VSCode settings for appropriate Tailwind versions

Author: georgewrmarshall

.depcheckrc.yml

@@ -14,6 +14,7 @@ ignores:
   - 'eslint-interactive'
   - 'rimraf'
   - 'simple-git-hooks'
+  - 'tailwindcss'
   - 'tsx'
   # Ignore plugins for tools
   - '@typescript-eslint/*'

.yarnrc.yml

@@ -16,7 +16,7 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-allow-scripts.cjs
     spec: 'https://raw.githubusercontent.com/LavaMoat/LavaMoat/main/packages/yarn-plugin-allow-scripts/bundles/@yarnpkg/plugin-allow-scripts.js'
 
-nmHoistingLimits: none
+nmHoistingLimits: workspaces
 
 # NPM Supply Chain Attack Protection
 # Minimum age gate: only allow packages older than 3 days (4320 minutes)

apps/storybook-react-native/package.json

@@ -36,8 +36,10 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-native-get-random-values": "^1",
+    "eslint-plugin-tailwindcss": "^3.18.2",
     "react-dom": "^18.2.0",
     "react-native-svg-transformer": "^1.5.0",
+    "tailwindcss": "^3.4.0",
     "typescript": "~5.2.2"
   },
   "dependenciesMeta": {

eslint.config.mjs

@@ -2,9 +2,19 @@ import base, { createConfig } from '@metamask/eslint-config';
 import jest from '@metamask/eslint-config-jest';
 import nodejs from '@metamask/eslint-config-nodejs';
 import typescript from '@metamask/eslint-config-typescript';
-import tailwind from 'eslint-plugin-better-tailwindcss';
+import betterTailwind from 'eslint-plugin-better-tailwindcss';
+import { createRequire } from 'node:module';
+import path from 'node:path';
 
 const NODE_LTS_VERSION = 22;
+const nativeRequire = createRequire(
+  new URL('./apps/storybook-react-native/package.json', import.meta.url),
+);
+const nativeTailwind = nativeRequire('eslint-plugin-tailwindcss');
+const NATIVE_TAILWIND_CONFIG_PATH = path.resolve(
+  import.meta.dirname,
+  'apps/storybook-react-native/tailwind-intellisense.config.js',
+);
 
 const config = createConfig([
   ...base,
@@ -221,7 +231,7 @@ const config = createConfig([
       },
     },
     plugins: {
-      'better-tailwindcss': tailwind,
+      'better-tailwindcss': betterTailwind,
     },
     rules: {
       'better-tailwindcss/sort-classes': 'error',
@@ -233,17 +243,24 @@ const config = createConfig([
       'packages/design-system-react-native/src/**',
       'apps/storybook-react-native/stories/**',
     ],
-    settings: {
-      'better-tailwindcss': {
-        tailwindConfig:
-          'apps/storybook-react-native/tailwind-intellisense.config.js',
-      },
-    },
     plugins: {
-      'better-tailwindcss': tailwind,
+      tailwindcss: nativeTailwind,
     },
     rules: {
-      'better-tailwindcss/sort-classes': 'error',
+      'tailwindcss/classnames-order': 'error',
+      'tailwindcss/enforces-negative-arbitrary-values': 'error',
+      'tailwindcss/enforces-shorthand': 'error',
+      'tailwindcss/no-arbitrary-value': 'off', // There are legitimate reasons to use arbitrary values but we should specifically error on static colors
+      'tailwindcss/no-custom-classname': 'off', // Native includes dynamic token-driven class segments (e.g. text-${...})
+      'tailwindcss/no-contradicting-classname': 'error',
+      'tailwindcss/no-unnecessary-arbitrary-value': 'error',
+    },
+    settings: {
+      tailwindcss: {
+        callees: ['twClassName', 'tw'],
+        config: NATIVE_TAILWIND_CONFIG_PATH,
+        tags: ['tw'], // Enable template literal support for tw`classnames`
+      },
     },
   },
 ]);

jest.config.packages.js

@@ -200,5 +200,5 @@ module.exports = {
   // watchPathIgnorePatterns: [],
 
   // Whether to use watchman for file crawling
-  // watchman: true,
+  watchman: false,
 };

package.json

@@ -69,6 +69,7 @@
     "simple-plist": "1.3.1",
     "shell-quote": "1.7.3",
     "cross-spawn": "7.0.5",
+    "twrnc/tailwindcss": "^3.4.0",
     "node-fetch": "2.6.7",
     "json5": "2.2.2",
     "merge": "2.1.1",
@@ -122,6 +123,7 @@
     "rimraf": "^5.0.5",
     "semver": "^7.7.1",
     "simple-git-hooks": "^2.8.0",
+    "tailwindcss": "^4.0.0",
     "tsx": "^4.20.6",
     "twrnc": "^4.5.1",
     "typescript": "~5.2.2",

packages/design-system-react-native/jest.setup.js

@@ -1,3 +1,24 @@
+global.__fbBatchedBridgeConfig = {
+  remoteModuleConfig: [],
+};
+
+jest.mock(
+  'react-native/Libraries/Utilities/NativePlatformConstantsIOS',
+  () => ({
+    __esModule: true,
+    default: {
+      getConstants: () => ({
+        forceTouchAvailable: false,
+        interfaceIdiom: 'handset',
+        isTesting: true,
+        osVersion: '0.0.0',
+        reactNativeVersion: { major: 0, minor: 0, patch: 0, prerelease: null },
+        systemName: 'iOS',
+      }),
+    },
+  }),
+);
+
 jest.mock('react-native-svg', () => {
   const React = require('react');
   const { View } = require('react-native');

packages/design-system-react-native/package.json

@@ -84,6 +84,7 @@
     "react-native-svg": "^15.10.1",
     "react-native-svg-transformer": "^1.5.0",
     "react-test-renderer": "^18.3.1",
+    "tailwindcss": "^3.4.0",
     "ts-jest": "^29.2.5",
     "tsx": "^4.20.6",
     "typescript": "~5.2.2"

packages/design-system-react/global.d.ts

@@ -10,3 +10,17 @@ declare module '*.svg' {
   const src: string;
   export default src;
 }
+
+declare module '@testing-library/dom' {
+  export type Queries = any;
+  export type BoundFunction<T = any> = (...args: any[]) => any;
+  export const queries: Queries;
+  export const screen: any;
+  export const fireEvent: any;
+  export function waitFor<T = any>(callback: () => T, options?: any): Promise<T>;
+  export function waitForElementToBeRemoved<T = any>(callback: () => T, options?: any): Promise<void>;
+  export function act(fn: () => any): Promise<any> | void;
+  export function within(...args: any[]): any;
+  export function configure(options: any): void;
+  export function getConfig(): any;
+}

packages/design-system-twrnc-preset/package.json

@@ -76,6 +76,7 @@
     "metro-react-native-babel-preset": "^0.77.0",
     "react": "^18.2.0",
     "react-test-renderer": "^18.3.1",
+    "tailwindcss": "^3.4.0",
     "ts-jest": "^29.2.5",
     "typescript": "~5.2.2"
   },