@apply not working with styled-jsx (Next.js v10, Tailwind v2)

There is another bug already about this (#1234), but it is closed as it seems like a solution was found for previous versions. I am using the new Tailwind v2 and I’ve tried some of the configurations listed in the issue’s comments but none have worked for me. Maybe there’s something wrong with my setup, but I’m posting as a new bug just in case it’s related to Tailwind v2.

Relevant configs

// .babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

// postcss.config.js
module.exports = {
  plugins: ['tailwindcss', 'autoprefixer']
}

// deps (package.json)
{
  "dependencies": {
    "bluebird": "^3.7.2",
    "classnames": "^2.2.6",
    "next": "10.0.2",
    "next-mdx-remote": "^1.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  },
  "devDependencies": {
    "@types/bluebird": "^3.5.33",
    "@types/classnames": "^2.2.11",
    "@types/node": "^14.14.9",
    "@types/react": "^17.0.0",
    "autoprefixer": "^10.0.2",
    "gray-matter": "^4.0.2",
    "postcss": "^8.1.8",
    "styled-jsx-plugin-postcss": "^3.0.2",
    "tailwindcss": "^2.0.1",
    "typescript": "^4.1.2"
  }
}

Errors that I’m getting

wait  - compiling...
[styled-jsx] Loading plugin from path: /home/dani/projects/daniguardiola-me/node_modules/styled-jsx-plugin-postcss/index.js
Next.js 9 default postcss support uses a non standard postcss config schema https://err.sh/next.js/postcss-shape, you must use the interoperable object-based format instead https://nextjs.org/docs/advanced-features/customizing-postcss-config
Next.js 9 default postcss support uses a non standard postcss config schema https://err.sh/next.js/postcss-shape, you must use the interoperable object-based format instead https://nextjs.org/docs/advanced-features/customizing-postcss-config
error - ./components/Post.tsx
Error: /home/dani/projects/daniguardiola-me/components/Post.tsx: postcss failed with TypeError: Invalid PostCSS Plugin found: [0]
    at Array.forEach (<anonymous>)

[adamwathan]

Hey! Please provide a GitHub repo that reproduces the issue so we don’t have to create it from scratch ourselves, we can help much faster if all we need to do is clone a reproduction and see what’s happening.

[DaniGuardiola]

Of course, if you see something wrong with the Next.js configuration, please let me know. AFAIK, it should be working with the given PostCSS and Babel configs 😦