Tailwind 在 monorepo 架构中无法正常工作答案

【问题标题】：Tailwind not working properly in a monorepo architectureTailwind 在 monorepo 架构中无法正常工作
【发布时间】：2022-02-02 04:05:26
【问题描述】：

我正在使用使用 yarn 工作区的 monorepo 架构，其中 Tailwind CSS 是项目的根。在我使用 React 的其中一个工作区中，我已将 Tailwind 实用程序添加到其样式中。 Tailwind 在该项目中运行良好

每当我定义新颜色时，它都不起作用。
此外，我还想实现darkMode，在tailwind.config.js 中，我添加了darkMode: 'class'，并制作了一个上下文包装器，将class='dark' 设置为html root，更改主题时<html class='dark' 尚未设置@ 987654324@ 不工作。

我的文件夹结构

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

我的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: [],
};

有什么想法吗？

【问题讨论】：

标签： javascript reactjs next.js tailwind-css darkmode

【解决方案1】：

直接在theme 下添加颜色对象将用您指定的颜色替换默认颜色集。如果要向集合中添加颜色或覆盖单个默认颜色，则应将它们放在 theme: { extend: { colors: { ... } } } 部分中。这也可以解决您的暗模式问题。

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

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

另外，使用的是旧版本的 Tailwind？最新的 v3 不再需要 mode: 'jit' 并使用 content: 而不是 purge: (https://tailwindcss.com/docs/upgrade-guide#configure-content-sources)。

【讨论】：

也尝试过使用它，但这也不起作用。
您是否还删除了位于theme 正下方的colors 对象？
我在上面的答案中添加了一个版本问题。
我正在使用 tailwind v2 。是的，已经删除了使用颜色的旧方式，也使用了这种方式，但不起作用。对于同样的问题，darkMode 不工作或任何其他问题？

【解决方案2】：

我已将 tailwind.config.js 和 postcss.config.js 文件移动到 react 应用程序中，而不是将其保留在根目录并重新启动服务器。然后darkMode和colors问题都解决了

【讨论】：