reactjs - Tailwind 断点不适用于 Next.js SSG

Question

我的目录中有一个/latest页面，pages其中显示所有最新帖子。但是我的 Tailwind 课程 ( grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4) 不想工作。这是我遇到的问题的并排比较：

本地版本	生产版

我的组件看起来像这样（./pages/latest.tsx）：

const Latest: React.FC<LatestProps> = ({}) => {
  const { t } = useTranslation('latest')
  const { data, loading } = useFindLatestQuery()

  return (
    <>
      <Navigation />
      <DefaultWrapper>
        <div className="w-full">
          <div className="w-full flex justify-center">
            <h1>{t('recent')}</h1>
          </div>
          {!loading && data?.posts?.length > 0 ? (
            <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
              {[...data.posts].map((post, index) => (
                <SearchedPost key={index} post={post as unknown as Post} />
              ))}
            </div>
          ) : (
            <p>Loading...</p>
          )}
        </div>
      </DefaultWrapper>
    </>
  )
}

这是 Tailwind 生成的生产 CSS 的链接，您会看到与grid. 这也是该构建的链接。

顺风配置：

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

标签： reactjsnext.jscss-gridtailwind-csspostcss

Answer 1

至于为什么会出现这个错误，我真的不知道。

我回头看了看源代码。这段代码的第一次提交是在这里，从那以后它并没有真正改变。我还重新部署了该特定提交，并且一切正常。该错误必须与缓存相关。我将在下面发布所有链接和提交：

---

生产版

• 关联
• 该页面的 CSS 文件
• ./pages/latest.tsx在 GitHub 上

---

暂存版本（有错误）

• 关联
• 该页面的 CSS 文件
• ./pages/latest.tsx在 GitHub 上

---

抱歉，如果这对您的错误没有帮助。随意窥探我有错误和/或评论的回购:)