Tailwind 网格列在生产中无法与 Next 一起使用

Question

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

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

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”作为一个类，但显示为单列。知道可能是什么原因造成的吗？

Answer 1

您不能对名称进行字符串连接，否则 tailwind /postcss 将不会在构建过程中选取它们 - 类不会添加到构建中。

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

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

或者 - 您可以添加不会被顺风清除的 css。请参阅我关于类似但略有不同问题的另一篇文章。