Tailwind grid-cols 无法与 Next 在生产环境中一起使用答案

【问题标题】：Tailwind grid-cols not working in production with NextTailwind grid-cols 无法与 Next 在生产环境中一起使用
【发布时间】：2021-10-27 10:07:37
【问题描述】：

我有一个下一个项目，在这里回购： https://github.com/DoctorSte/remoteOS

我有一个 Columns 组件，它有一个名为 grid-cols-[x] 的类，其中 X 是一个道具。

export const Columns = ({
  children,
  columns,
  border,
  background,
  align,
  ...rest
}) => {
  return (
    <section
      className={`grid  md:grid-cols-${columns} grid-cols-1 items-${align} border-t-${border} ${background} gap-4 px-10 py-10 lg:px-48 w-full `}
      {...rest}
    >
      {children}
    </section>
  );
};

在本地显示正常，但在生产中柱结构刹车。检查时，该部分将“grid-cols-4”作为一个类，但显示为单列。知道是什么原因造成的吗？

【问题讨论】：

这能回答你的问题吗？ Why is the custom color in tailwind not defined in NextJS production stage

标签： next.js components tailwind-css

【解决方案1】：

您不能 string concatenate 名称或 tailwind /postcss 在构建过程中不会拾取它们 - 类不会添加到构建中。

 className={`grid  ${columns === 4 ? 'md:grid-cols-4 sm:grid-cols-2': ''}`}

您必须评估您的动态类是如何生成的，以查看是否有办法将其与整个名称内联（可能只存储整个类名）。

或者 - 您可以添加不会被顺风清除的 css。请参阅我的other post，了解类似但略有不同的问题。

【讨论】：