最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Tailwind not working properly in a monorepo architecture - Stack Overflow

programmeradmin3浏览0评论

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?

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?

Share Improve this question edited Feb 1, 2022 at 15:40 Ed Lucas 7,3554 gold badges40 silver badges50 bronze badges asked Feb 1, 2022 at 15:22 prashantprashant 2602 silver badges11 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 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./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./docs/upgrade-guide#configure-content-sources).

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

Just a note for Tailwind 4 users, tailwind.config.js no longer applies. See "explicitly registering sources" section of Detecting classes in source files.

发布评论

评论列表(0)

  1. 暂无评论