Tailwind 断点不适用于 Next.js SSG

Posted 2023-03-07

技术标签:

【中文标题】Tailwind 断点不适用于 Next.js SSG【英文标题】：Tailwind breakpoints not working with Next.js SSG 【发布时间】：2021-08-23 10:21:31 【问题描述】：

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

Local Version	Production Version

我的组件看起来像这样 (./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 的 link，您会看到与 grid 没有任何关系。这也是该版本的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: [],

【问题讨论】：

在您的生产 css 中没有网格类，请仔细检查您的顺风设置。 @herbie vine 你知道为什么吗？我有类似的问题，一些断点不起作用。我在看我做了什么。已经有一段时间了，所以需要再次查看我的神秘编程哈哈 【参考方案1】：

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

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