Search code examples
javascriptreactjsnext.jstailwind-cssdarkmode

Tailwind not working properly in a monorepo architecture

I am using a monorepo architecture using yarn workspaces, in which Tailwind CSS is at the root of the project. In one of the workspaces I am using React and I have added Tailwind utilities into its styles. Tailwind is working fine in the project yet

  1. Whenever I define new colors it is not working.
  2. Moreover I also want to implement darkMode to which in tailwind.config.js i have added darkMode: 'class' and have made a context wrapper to set class='dark' to html root, on changing the theme <html class='dark' is set yet dark:bg-black is not working.

My folder structure

Project
 |    
 +-- packages
 |  |  
 |  \-- react-project-1
 |  |   |
 |  |   +--app.js
 |  |   +--app.css
 |  |  
 |  \-- react-project-2
 |    
 +-- tailwind.config.js

My tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './packages/react-project-1/src/**/*.{js,ts,jsx,tsx}',
    './packages/react-project-2/src/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class', 
  theme: {
    colors: {
      orange: '#E05507',
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Any ideas?

Solution

  • I have moved the tailwind.config.js and postcss.config.js file inside the react app instead of keeping it at root and restarted the server. Then both darkMode and colors issue was resolved