如何在NX Monorepo中共享parwindcss预设

发布于 2025-02-11 19:44:58 字数 1135 浏览 1 评论 0原文

我正在尝试在TX MonorePo中的React和React-Native应用程序之间共享parwindcss的预设。预设存储在.js文件中，位于root nx库中，名为“ tailwind”。将预设对象导入tailwind.config.js with：

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

和运行nx dev：tailwind

SyntaxError: Cannot use import statement outside a module

我尝试使用而不是导入，

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

我会遇到错误：

Error: Cannot find module '@app/tailwind`

如果当我尝试将tailwind.config.js转换为tailwind.config.ts然后使用导入语句尾风配置。

如果我在app.tsx中为测试目的导入和console.log（）预设，则可以登录。

项目结构：

app/
├─ apps/
│  ├─ mobile/
│  │  ├─ tailwind.config.js
│  │  ├─ src/
│  │  ├─ android/
│  │  ├─ ios/
│  ├─ web/
├─ libs/
│  ├─ tailwind/
│  │  ├─ src/
│  │  │  ├─ index.ts
│  │  │  ├─ lib/
│  │  │  │  ├─ preset.ts

原文

I'm trying to share tailwindcss preset between both react and react-native apps in tx monorepo. Preset is stored in .js file located in root nx library named "tailwind".
While importing preset object to tailwind.config.js with:

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

and running nx dev:tailwind i get error

SyntaxError: Cannot use import statement outside a module

if I try to use require instead of import

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

I get error:

Error: Cannot find module '@app/tailwind`

And finally when I tried to convert tailwind.config.js to tailwind.config.ts and then use import statement, I did not get any errors, but tailwind-rn does not see tailwind config at all.

And if I import and console.log() preset for test purposes in App.tsx it logs just fine.

Project structure:

app/
├─ apps/
│  ├─ mobile/
│  │  ├─ tailwind.config.js
│  │  ├─ src/
│  │  ├─ android/
│  │  ├─ ios/
│  ├─ web/
├─ libs/
│  ├─ tailwind/
│  │  ├─ src/
│  │  │  ├─ index.ts
│  │  │  ├─ lib/
│  │  │  │  ├─ preset.ts

分享到QQ

分享到微博