Tailwindcss: Compatibility with PostCSS 8

[jonnitto]

As you probably know, [PostCSS 8] was released a few days ago. It would be great if you could make Tailwind CSS compatible with the latest version. The creators of the project have even released this [migration guide].

[corstian]

Additionally, an error such as Invalid PostCSS Plugin found at: plugins[1] may pop up when running a project containing Tailwind. For me this error appeared when upgrading all packages, and is due to [email protected] having a dependency on PostCSS 8. The issue can be temporarily mitigated by adding [email protected] to your project instead.

[timmyjs]

Just updated my dependencies and everything works fine like before. Here an excerpt from my devDependencies:

  "devDependencies": {
    "postcss": "8.0.3",
    "postcss-cli": "7.1.2",
    "tailwindcss": "1.8.10",
    ...
  },

Probably it's relate to the node version? I'm working with node v14.1.0 (npm v6.14.4).

[adamwathan]

Yep everything should just work, just need to be on PostCSS ^8.0.2 as there was a bug that broke things before that. You'll see a little deprecation warning but we can't do anything about that until Tailwind 2.0. I need to co-ordinate with some other framework authors and find out about their plans for PostCSS 8 support as well though before going all in.

[ozguruysal]

Sorry to say everything just doesn't work with PostCSS 8. I upgraded then downgraded my PostCSS plugins. The problem at https://github.com/tailwindlabs/tailwindcss/issues/2426 is also PostCSS 8. Version 3.0.0 of postcss-scss plugin is using PostCSS 8. Keeping this issue open might be helpful for others.

[adamwathan]

Sorry I don’t understand, what’s the actual Tailwind issue? If there’s an issue with postcss-scss it feels like that belongs in their repo rather than ours? If there’s an actual Tailwind issue we’ll fix it but currently there are no Tailwind issues related to PostCSS 8 as far as I’m aware.

[ozguruysal]

Unfortunately I cannot get Tailwindcss work with PostCSS 8. I maybe missing something (pretty late here and I'm exhausted) so I created a test repo so you can reproduce the issue. You can just follow the steps in the readme. Thanks!

[adamwathan]

Yep looks like PostCSS 8.0.7 broke Tailwind again. Works with PostCSS 8.0.2-8.0.6. Will investigate, thanks.

[adamwathan]

Here is the issue to track on PostCSS:

https://github.com/postcss/postcss/issues/1419

[adamwathan]

Opened a PR that fixes the issue in PostCSS: https://github.com/postcss/postcss/pull/1422/

[adamwathan]

Fixed, update to PostCSS 8.0.8 👍 Thanks for the report.

[targos]

I don't know if I'm doing it wrong, but it still doesn't work with this repro:

mkdir test && cd test
npm init -y
npm i -D tailwindcss postcss postcss-cli
npx tailwindcss init
npx postcss styles.css -o build.css

styles.css:

@tailwind base;

@tailwind components;

@tailwind utilities;

postcss.config.js:

'use strict';

module.exports = {
  plugins: [
    require('tailwindcss'),
  ],
};

Error:

TypeError: Cannot read property 'type' of undefined
    at D:\Git\test\styles.css:3:1
    at AtRule.normalize (D:\Git\test\node_modules\tailwindcss\node_modules\postcss\lib\container.js:673:22)
    at AtRule.prepend (D:\Git\test\node_modules\tailwindcss\node_modules\postcss\lib\container.js:413:24)
    at AtRule.prepend (D:\Git\test\node_modules\tailwindcss\node_modules\postcss\lib\at-rule.js:64:73)
    at D:\Git\test\node_modules\tailwindcss\lib\lib\substituteResponsiveAtRules.js:44:27
    at D:\Git\test\node_modules\postcss\lib\container.js:159:16
    at D:\Git\test\node_modules\postcss\lib\container.js:82:18
    at AtRule.each (D:\Git\test\node_modules\postcss\lib\container.js:68:16)
    at AtRule.walk (D:\Git\test\node_modules\postcss\lib\container.js:79:17)
    at AtRule.walkAtRules (D:\Git\test\node_modules\postcss\lib\container.js:157:17)
    at D:\Git\test\node_modules\tailwindcss\lib\lib\substituteResponsiveAtRules.js:38:19 {
  postcssNode: AtRule {
    raws: { before: '\r\n\r\n' },
    type: 'atrule',
    name: 'layer',
    params: 'components',
    nodes: [ [AtRule] ],
    source: { start: [Object], input: [Input], end: [Object] },
    lastEach: 6,
    indexes: { '6': 0 },
    parent: Root {
      raws: [Object],
      type: 'root',
      nodes: [Array],
      source: [Object],
      lastEach: 7,
      indexes: [Object],
      [Symbol(isComplete)]: false,
      [Symbol(isClean)]: false
    },
    [Symbol(isComplete)]: false,
    [Symbol(isClean)]: false
  }
}

It seems like there's a mix of PostCSS 8 (installed at the root level) and PostCSS 7 (installed and used by tailwindcss) and they do not work well together.

[ozguruysal]

I can also confirm that I have the same error @targos is getting, in the test repo I provided above, after updating PostCSS to 8.0.8.

[adamwathan]

Working on it, another PostCSS bug.

[josephzidell]

Any update @adamwathan?

[adamwathan]

Everything should be working now, if you have an issue please start a new issue 👍🏻