小编Ste*_*eph的帖子

我正在构建一个 Next JS 网站并使用 JIT 运行 Tailwind。这是我的 tailwind.config.js：

  module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  extend: {},
  plugins: [],
  };

问题是，每次我编写新代码时，我都必须重新启动服务器并运行“npm run dev”，因为它没有更新 http://localhost:3000/ 上的 CSS。

当我运行服务器时，我也会收到警告：

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

有什么想法可能导致这种情况吗？谢谢！

我有一个 Next JS 项目，其静态 JSON 放置在 /pages/api/data.json 中，如下所示：

{
 "Card": [
   { "title": "Title 1", "content": "Content 1" },
   { "title": "Title 2", "content": "Content 2" },
   { "title": "Title 3", "content": "Content 3" }
 ]
}

我试图从该 JSON 中获取内容以加载到几个部分中，如下所示：

import { Card } from "../api/data";

export const getStaticProps = async () => {
  return {
    props: { cardData: Card },
  };
};

export default ({ cardData }) => (
  <>
    const card = cardData.title; console.log(cardData);
    { {cardData.map((cardData) => ( …

我有一个下一个项目，在这里存储： 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”作为一个类，但显示为单列。知道可能是什么原因造成的吗？