nx
nx copied to clipboard
Tailwind breakpoint conflict in multiple apps
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
does anyone have any idea how to fix this?
GitHub Repo
No response
Steps to Reproduce
- have several apps using tailwind
- have a page with a breakpoint
- load another page with the same class but without the breakpoint
- 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