Search code examples
reactjsnext.jscss-gridtailwind-csspostcss

Tailwind breakpoints not working with Next.js SSG

I have a /latest page in my pages directory which displays all the latest posts. But my Tailwind classes (grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4) don't want to work. Here is a side by side comparison of the issue I'm having:

Local Version Production Version
Local Version Production Version

My component looks like this (./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>
    </>
  )
}

Here's a link to the production CSS generated by Tailwind, and you'll see that there's nothing related to grid. Here's also a link to that build.

Tailwind Config:

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

  • As for why this error occurred, I honestly don't know.

    I looked back at the source code. The very first commit of this code was here, and it hasn't really changed since. I also redeployed that specific commit, and all worked fine. The error must have been cached-related. I'll post all the links and commits below:

    Production version

    Staging version (which had the error)

    Sorry if this doesn't help your bug. Feel free to snoop around the repo where I had the error and/or comment :)