Tailwind 断点不适用于 Next.js SSG

Question

我的 pages 目录中有一个 /latest 页面，其中显示了所有最新的帖子。但是我的 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>
    </>
  )
}

这是该版本的 link to the production CSS generated by Tailwind, and you'll see that there's nothing related to grid. Here's also a link。

顺风配置：

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: [],
}

Answer 1

至于为什么会出现这个错误，老实说我也不知道

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

正式版

暂存版本（有错误）

抱歉，如果这不能解决您的错误。随时窥探 repo 我有错误 and/or 评论的地方:)

Tailwind 断点不适用于 Next.js SSG

Tailwind breakpoints not working with Next.js SSG

reactjs

css-grid

postcss

next.js

tailwind-css

正式版

暂存版本（有错误）