我目前正在使用 TailwindCss 为我的下一个项目构建一个组件库，我在处理 Button 组件时遇到了一个小问题。

我传入一个类似于'primary'或 的道具'secondary'，它与我在中指定的颜色相匹配，tailwind.config.js然后我想使用Template literals如下方式将其分配给按钮组件：bg-${color}-500

<button
    className={`
    w-40 rounded-lg p-3 m-2 font-bold transition-all duration-100 border-2 active:scale-[0.98]
    bg-${color}-500 `}
    onClick={onClick}
    type="button"
    tabIndex={0}
  >
    {children}
</button>

类名在浏览器中显示得很好，它显示bg-primary-500在 DOM 中，但不显示在“应用的样式”选项卡中。

主题配置如下：

  theme: {
    extend: {
      colors: {
        primary: {
          500: '#B76B3F',
        },
        secondary: {
          500: '#344055',
        },
      },
    },
  },

但它不应用任何样式。如果我只是手动添加bg-primary-500它工作正常。

老实说，我只是想知道这是否是因为 JIT 编译器没有选择动态类名，或者我是否做错了什么（或者这不是使用 tailWind 的方式）。

欢迎任何帮助，提前致谢！

在next.config中导入本地文件

问题

您好，我们面临的问题是想要创建一个动态的下一个配置。当我们不导入任何文件时，这工作正常，但当尝试在 next.config.mjs 中导入常量文件时，事情就会崩溃。

我们使用下一个版本 12.1，以便使用配置文件的 MJS 变体。

常量文件是一个简单的 JS 文件，其中包含一些值来确定我们支持的不同品牌需要使用的区域设置。这些值在多个地方使用，这就是为什么我们不想在这里对这些值进行硬编码。

import { locales } from './src/constants/locales'; // It breaks on this import

const currentPlatform = process.env.NEXT_PUBLIC_PLATFORM;

module.exports = () => ({
  i18n: {
    localeDetection: false,
    ...locales[currentPlatform],
  },
  images: {
    domains: [
      // Our domains
    ],
  },
  async rewrites() {
    return [
      // Our rewrites
    ];
  },
  webpack: (config, { defaultLoaders }) => {
    config.module.rules.push(
      // Our config
    );

    return config;
  },
});

错误信息

这是我们尝试启动开发服务器时抛出的错误，表明导入路径错误。（它不是。）

error - Failed to …

因此，我正在尝试解决使用时遇到的保湿问题wrapper.getServerSideProps。当我使用当前设置重新路由时，存储会被清除，然后添加新数据，这会导致出现白页，因为许多重要数据不再存在（即翻译和 cms 数据）。

redux-dev-tools Hydrate 操作差异的屏幕截图：

屏幕截图是从主页路由到产品页面后拍摄的，因此存在一个现有商店。一切都重置为初始应用程序状态。

我正在尝试做什么

在 store.js 中，我创建了 store 并预见了一个减速器来处理 Hydrate 调用。这种方法的缺点是有效负载将始终是一个新的存储对象，因为它是在服务器上调用的。我想检查 2 个 json 之间的差异，然后只应用差异而不是整个初始存储。

1. 获取客户端和服务器状态之间的差异。
2. 创建下一个状态，用修补的服务器状态覆盖客户端状态，因此这包括水合物的更新状态和现有的客户端状态。
3. 目前结果是一个白页。

您可以在store.js中看到下面的reducer代码

//store.js

import combinedReducer from './reducer';

const bindMiddleware = (middleware) => {
    if (process.env.NODE_ENV !== 'production') {
        return composeWithDevTools(applyMiddleware(...middleware));
    }
    return applyMiddleware(...middleware);
};

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    const clientState = { ...state };
    const serverState = { ...action.payload };

    if (state) {
      // preserve state value on client …