Tailwind not working properly in a monorepo architecture

Question

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

Whenever I define new colors it is not working.
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?

Ed Lucas · Answer 1 · 2022-02-01T16:26:25.203

2

Adding the colors object directly under theme will replace the default color set with the colors you specify. If you want to add colors to the set or override single default colors, you should put them in a theme: { extend: { colors: { ... } } } section. This may also fix your dark mode issue.

  theme: {
    extend: {
      colors: {
        orange: '#E05507',
      },
    },
  },

See: https://tailwindcss.com/docs/customizing-colors#adding-additional-colors

Also, are using an older version of Tailwind? The latest, v3, no longer needs mode: 'jit' and uses content: instead of purge: (https://tailwindcss.com/docs/upgrade-guide#configure-content-sources).

edited Feb 01 '22 at 16:26

answered Feb 01 '22 at 15:37

Ed Lucas

5,955
4
30
42

tried using this also, but this is also not working. – prashant Feb 01 '22 at 15:50
Did you also remove the `colors` object that was directly under `theme`? – Ed Lucas Feb 01 '22 at 16:20
I added a version question to my answer above. – Ed Lucas Feb 01 '22 at 16:27
I am using tailwind v2 . Yes have removed the older way of using colors and used this also, but not working . For the same issue , darkMode is not working or any other issue ? – prashant Feb 01 '22 at 17:07

score 1 · Accepted Answer · answered Feb 01 '22 at 20:05

1

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

answered Feb 01 '22 at 20:05

prashant

210
2
11

Tailwind not working properly in a monorepo architecture

2 Answers2