Tailwind not working properly in a monorepo architecture

Asked 1/2, 2022 at 15:22 Answered 1/2, 2022 at 20:5

Solved javascript reactjs next.js tailwind-css darkmode

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?

Axon answered 1/2, 2022 at 15:22 Comment(0)

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

Axon answered 1/2, 2022 at 20:5 Comment(0)

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).

Ultrasonic answered 1/2, 2022 at 15:37 Comment(4)

tried using this also, but this is also not working. – Axon 1/2, 2022 at 15:50

Did you also remove the colors object that was directly under theme? – Ultrasonic 1/2, 2022 at 16:20

I added a version question to my answer above. – Ultrasonic 1/2, 2022 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 ? – Axon 1/2, 2022 at 17:7

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

Axon answered 1/2, 2022 at 20:5 Comment(0)

Recommended topics

Hot tags