I have a project setup using Turborepo with the following structure:

apps/
├── layout
├── app1
├── app2
├── app3
packages/
├── ui
├── tailwind-config
├── eslint-config
├── other-configs

• The apps/ directory contains all the individual apps like layout, app1, app2, app3.
• The packages/ directory contains shared configurations and UI components (using Shadcn UI).
• The ui package contains reusable components which I import into my apps.
• The layout app hosts all the other apps. I achieve this by exposing the routes using Module Federation and then importing them into layout. Here is a simplified example of how I define and use routes:

// Create routes here
// This file is important. Define your routes here.

export const routesList = [
  {
    path: '/test',
    element: <h1 className='text-purple-600'>Route one</h1>,
  },
];

The Problem:

I am encountering an issue with Tailwind CSS specificity. There are duplicate CSS classes being generated, which results in conflicting styles (the number of classes equals the classes in layout plus the number of imported apps in layout).

Tailwind Configuration:

Here’s my Tailwind configuration:

// tailwind.config.js
import tailwindCssAnimate from 'tailwindcss-animate';

const config = {
  darkMode: ['class'],
  content: [
    `./src/**/*.{ts,tsx}`,
    '../../packages/**/*.{ts,tsx}',
    // './pages/**/*.{ts,tsx}',
    // './components/**/*.{ts,tsx}',
    // './app/**/*.{ts,tsx}',
    // './src/**/*.{ts,tsx}`,
    // '../../packages/ui/src/**/*.{ts,tsx}`,
  ],
  // other config options...
};

export default config;

import tailwindConfig from '@sahal/tailwind-config/tw';

export default {
  presets: [tailwindConfig],
  content: ['./src/**/*.{ts,tsx}', '../../packages/ui/src/**/*.{ts,tsx}'],
};

Question:

How can I resolve the Tailwind CSS specificity issues caused by duplicate CSS classes in this setup? Any guidance or best practices would be greatly appreciated.

My setup: Turborepo, vite, react, ts, tailwindcss, react-router-dom

I tried to directly importing the apps by exporting the apps in package.json and importing them in layout. that didn’t work.