Nx monorepo跨React/RN应用共享TailwindCSS预设问题解决

报错根因 #

三个问题分别对应三套解析链路的逻辑冲突：

• SyntaxError: Cannot use import statement outside a module：Tailwind CLI默认以CommonJS规范解析.js后缀的配置文件，在CJS文件里混用ESM的import语法和CJS的module.exports会直接触发语法错误。
• Cannot find module '@app/tailwind'：Tailwind解析配置文件时不会走Nx内置的TS模块解析链路，也不会自动编译TS格式的库源码，直接引用Nx库别名无法定位到可执行的JS产物。
• tailwind-rn无法识别TS格式配置：tailwind-rn的样式生成链路不支持直接解析TS格式的Tailwind配置文件，即使命令不报错，配置内容也不会被正确读取到编译流程中。在App.tsx里能正常引入预设，是因为业务代码走的是Metro/Webpack的Nx编译链路，和Tailwind独立的配置解析链路不是一套逻辑。

分步配置方案 #

1. 前期准备 #

两种引用方案选其一即可，开发阶段优先选无重复构建的源码引用方案：

• 方案A：构建产物引用（生产环境稳定性更高）
  修改libs/tailwind/project.json的构建配置，确保构建输出CommonJS规范产物：构建格式设置为cjs，输出路径保持默认的dist/libs/tailwind即可。

  注意：使用该方案时，每次修改共享预设的内容必须重新执行nx build tailwind，否则应用侧读取的是dist目录下的旧版本产物，改动不会生效。

• 方案B：TS源码直接引用（开发体验更好，无需重复构建）
  在需要使用预设的应用（web/mobile）下安装开发依赖：

  npm i -D ts-node tsconfig-paths
  

  在应用根目录新建路径注册脚本ts-path-register.js，让Node.js识别Nx的tsconfig路径别名：

  const tsConfigPaths = require('tsconfig-paths');
  const rootTsConfig = require('../../tsconfig.base.json');
  
  tsConfigPaths.register({
    baseUrl: '../../',
    paths: rootTsConfig.compilerOptions.paths,
  });
  

2. 应用侧Tailwind配置修改 #

保留配置文件为tailwind.config.js（不要用ts后缀，避免tailwind-rn解析失败），统一使用CommonJS语法：

• 对应方案A（构建产物引用）的配置内容：

const { preset } = require('../../dist/libs/tailwind/src');

module.exports = {
  content: ['./src/**/*.tsx', './src/app/**/*.tsx'],
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [preset],
  corePlugins: require('tailwind-rn/unsupported-core-plugins'),
};

• 对应方案B（源码直接引用）的配置内容：

// 顶部先注册TS解析和路径映射
require('./ts-path-register');
require('ts-node/register');

const { preset } = require('@app/tailwind');

module.exports = {
  content: ['./src/**/*.tsx', './src/app/**/*.tsx'],
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [preset],
  corePlugins: require('tailwind-rn/unsupported-core-plugins'),
};

注意：web端应用不需要配置corePlugins字段，删除对应行即可。

3. 验证生效 #

执行nx dev:tailwind命令，无语法/模块找不到报错，生成的tailwind样式文件包含预设中定义的主题、自定义工具类即为配置成功。

内容的提问来源于stack exchange，提问作者Jakub Jarząbek