2

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
Jakub Jarząbek
  • 195
  • 1
  • 6
  • Hey, maybe you can create a shared module and store the config there, and then import the module. I have seen some blogposts about that. – Julian Oct 24 '22 at 06:59

0 Answers0