Next init/install needs to be updated

[hyperknot]

What version of Tailwind CSS are you using?

3.2.4

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 13.1.1

What version of Node.js are you using?

v16.17.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/hyperknot/next-tailwind-bug

In repo, run build, go to .next/static/css, run prettier and and look at the first line. It shows width <= 50rem which means the preset-env plugin is not applied.

Describe your issue

The simplified config (tailwindcss + autoprefixer) is not enough. We need to include a full config, like this. It also means we need to install postcss-flexbugs-fixes and postcss-preset-env in addition.

module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
  ],
}

I've opened in issue in Next for this:
vercel/next.js#44286

[hyperknot]

Also, the commerce example includes tailwindcss/nesting as well, is that needed as well?

https://github.com/vercel/commerce/blob/main/site/postcss.config.js

[adamwathan]

Hey! The docs are for just installing Tailwind CSS. If there are other tools you need for your project of course you'll want to follow the instructions for those tools. You don't need postcss-flexbugs-fixes, postcss-preset-env, or tailwindcss/nesting to use Tailwind with Next.js — we don't use those in our own Tailwind + Next.js projects.

You only need postcss-preset-env in your own project because you are writing custom CSS using features that aren't supported in browsers yet but that's out of the scope of what Tailwind handles. If you want to write code that requires other tools of course it's on you to install the other tools, Tailwind itself does not generate any CSS that requires postcss-preset-env to work in the browser.

[hyperknot]

OK, it's great to know that. Still, if someone uses any external non-Tailwind component, it might make sense to add back the Next.js defaults. Or if someone adds Tailwind to an existing project, the official instructions basically disable a couple of PostCSS features which were used before.