TailwindCSS 2.0.1 requires PostCSS 8: build breaks if Tailwind added via gatsby-plugin-sass

[Hahlh]

Description

The group-hover defaults are not working (like textColor and backgroundColor) and following the docs and specifying them in the config doesn't seem to take effect.

If specified in tailwind.config.js under variants > extend as shown in the docs, the changes don't have effect:

[Hahlh]

The solution to this is to also add 'hover', not only 'group-hover'.

The defaults are overridden and 'hover' is one of them.

I found the solution while creating this issue, but decided to open this issue nevertheless for the befit of future generations.
May that spare them some valuable minutes.

Another point would be of course, why the defaults for group-hover, that normally shouldn't be needed to be added are not working, but I will close this issue for the time being until I have further investigated.

[Hahlh]

Okay, I actually have to reopen this issue.

Apparently the difference is indeed, that variants don't take effect, if applied via extend.
They are only applied, if added directly under variants.

I will add to this, that apparently the defaults, that according to the docs should be working without any changes to the config, are not:

[LekoArts]

Please open this on TailwindCSS repository, this one here is specific for issues with Gatsby.

[Hahlh]

Hey @LekoArts !
Thanks you for looking at this issue.

Apparently TailwindCSS updated to 2.0 a couple of days ago, which included the possibility to use 'extend' for variants.

Changing the version manually in package.json allows to update to TailwindCSS 2.0.1, but that breaks building as PostCSS 8 is required.

Looking at this issue, gatsby-plugin-postcss started to use PostCSS 8 beginning with 3.0.0.

If you use gatsby-plugin-sass (Option #3 in the Gatsby docs) for making TailwindCSS work, the dependency is not satisfied.

I reverted back to tailwindcss@^1.9.6 for the moment, which works fine if you don't follow the Tailwind docs and use 'extend', but add the variants directly.

[Hahlh]

@LekoArts

I changed the title to reflect my new understanding of this issue.
Any update regarding this?

Related stackoverflow thread and related docs, if Tailwind > 1.9.6 is required.

[Kevsonschouten]

Hi,

Joining in, because I'm experiencing the exact same issue.

Might be overseeing something here, but as i understand I'm having all the correct versions?

Thanks in advance for helping out.

[Hahlh]

@Kevsonschouten A temporary easy fix is to use the Tailwind compatibility build.

npm uninstall tailwindcss postcss autoprefixer 
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Once the issue has been resolved:

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest

[Hahlh]

Another option are the instructions provided by Tailwind to avoid gatsby-plugin-sass.

[Kevsonschouten]

Hi Hahlh , I’ve got things working. Thank you !

[austonpramodh]

Hi Hahlh , I’ve got things working. Thank you !

Hi, I am facing the same problem. Can you please tell me how did you get it fixed?

[Hahlh]

Hi Hahlh , I’ve got things working. Thank you !

Hi, I am facing the same problem. Can you please tell me how did you get it fixed?

Hey @austonpramodh. Hope you had a great weekend!

I described two solutions above. Did you try to implement them and ran into problems?

[austonpramodh]

Hi @Hahlh. I did have a great weekend playing around with tailwind and gatsby. Thanks for asking.

hope you had a great weekend too.

I tried solution no 2 - using tailwind with postcss7. At first, npm didn't allow me to downgrade the postcss. This was because i had gatsby-plugin-postcss installed. I uninstalled gatsby-plugin-postcss and followed your solution, configured gatsby config following Tailwind with Gatsby and it worked.

So the complete steps would be to follow Tailwind with Gatsby with option#3. Then use the Your solution to install tailwind-postcss7.

Hope this helps others too.

Thank you so much.