Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compatibility with PostCSS 8 #2396

Closed
jonnitto opened this issue Sep 16, 2020 · 16 comments
Closed

Compatibility with PostCSS 8 #2396

jonnitto opened this issue Sep 16, 2020 · 16 comments

Comments

@jonnitto
Copy link

jonnitto commented Sep 16, 2020

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
Copy link

corstian commented Sep 16, 2020

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
Copy link

timmyjs commented Sep 16, 2020

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
Copy link
Member

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
Copy link

Sorry to say everything just doesn't work with PostCSS 8. I upgraded then downgraded my PostCSS plugins. The problem at #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
Copy link
Member

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
Copy link

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
Copy link
Member

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

@adamwathan adamwathan reopened this Sep 23, 2020
@adamwathan
Copy link
Member

Here is the issue to track on PostCSS:

postcss/postcss#1419

@adamwathan
Copy link
Member

Opened a PR that fixes the issue in PostCSS: postcss/postcss#1422

@adamwathan
Copy link
Member

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

@targos
Copy link

targos commented Sep 23, 2020

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
Copy link

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
Copy link
Member

Working on it, another PostCSS bug.

@josephzidell
Copy link

Any update @adamwathan?

@adamwathan
Copy link
Member

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

@ghost
Copy link

ghost commented Dec 1, 2020

This solved the issue for me:

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants