I am developing a hybrid mobile and web application using Nextjs and React Native. Since I want to use tailwind for styling, I would prefer to optimize my dependencies by installing in root, but since React Native doesnt support the normal tailwindcss, I have to install something like tailwind-rn. Since turborepo has a root/packages/ui folder in the root that contains my reusable components, if I install dependencies separately, within my root/apps/mobile and root/apps/web directories, how would the root/packages/ui folder have access to each tailwind version? Or is there another solution for this situation?
Assuming this is my project structure:
root/
├── apps/
│ ├── docs/
│ ├── web/
│ ├── mobile/
│ └── backend/
│
├── packages/
│ ├── eslint-config/
│ ├── typescript-config/
│ │── ui/
│
├── LICENSE
└── README.md
To configure dependencies for hybrid web and mobile apps in a monorepo using tools like Turborepo, start by organizing your project into clearly defined packages—such as apps/web, apps/mobile, and packages/ui. Use a shared package.json to manage common dependencies, and install tools like Yarn Workspaces or npm workspaces for workspace linking. Separate platform-specific code when necessary, and keep reusable components in shared packages. Turborepo helps speed up builds and caching across projects. Maintain clean dependency boundaries, use aliases for module resolution, and configure build pipelines per app for efficient development across web and mobile platforms.