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