nx icon indicating copy to clipboard operation
nx copied to clipboard

Tailwind breakpoint conflict in multiple apps

Open FelixLgr opened this issue 2 years ago • 0 comments

Current Behavior

I have a monorepo with several react applications. Each one has tailwind installed. The problem is that there are conflicts because there are several tailwind configurations and the breakpoints no longer work when another application is loaded.

Here's my configuration: apps/<apps_name>/tailwind.config.js

const { createGlobPatternsForDependencies } = require('@nx/react/tailwind')
const { join } = require('path')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    join(__dirname, '{src,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

apps/<apps_name>/postcss.config.js

const { join } = require('path')

// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
// option from your application's configuration (i.e. project.json).
//
// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
}

Expected Behavior

image as you can see, this class is defined by several css files and mediaquery is blocked when it shouldn't be.

does anyone have any idea how to fix this?

GitHub Repo

No response

Steps to Reproduce

  1. have several apps using tailwind
  2. have a page with a breakpoint
  3. load another page with the same class but without the breakpoint
  4. return to the old page

Nx Report

Node   : 19.3.0
   OS     : darwin x64
   yarn   : 1.22.19
   Hasher : Native
   
   nx                 : 16.3.2
   @nx/js             : 16.3.2
   @nx/jest           : 16.3.2
   @nx/linter         : 16.3.2
   @nx/workspace      : 16.3.2
   @nx/devkit         : 16.3.2
   @nx/eslint-plugin  : 16.3.2
   @nx/react          : 16.3.2
   @nrwl/tao          : 16.3.2
   @nx/web            : 16.3.2
   @nx/webpack        : 16.3.2
   typescript         : 5.0.4
   tailwindcss        : 3.2.4

Failure Logs

No response

Operating System

  • [X] macOS
  • [ ] Linux
  • [ ] Windows
  • [ ] Other (Please specify)

Additional Information

No response

FelixLgr avatar Jun 10 '23 21:06 FelixLgr