feat: upgrade to TailwindCSS 2 #203

Atinux · 2020-11-19T10:54:42Z

This PR is a breaking change since TailwindCSS 2 introduced breaking changes, see https://blog.tailwindcss.com/tailwindcss-v2 and https://tailwindcss.com/docs/upgrading-to-v2#upgrade-to-node-js-12-13-or-higher

Since it does not support Node < 12.13 we have to release this module as version 4 and forcing node >= 12.3.0.

Nuxt 2.14 is still running PostCSS 7 since we supports Node 8, we have a PR to drop support for it but will still support Node 10, see nuxt/nuxt#8346 and nuxt/nuxt#8408

When Nuxt 2.15 will be out, I will update to tailwindcss@latest directly and release the version 4 of this module.

In the meantime I updated the documentation to explain how to upgrade to tailwindcss@compat: https://tailwindcss.nuxtjs.org/setup#tailwind-2

Resolves #202

BREAKING CHANGE

codecov · 2020-11-19T10:56:51Z

Codecov Report

Merging #203 (e43bd35) into main (b57bbdc) will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##              main      #203   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            3         3           
  Lines           42        42           
  Branches         8         8           
=========================================
  Hits            42        42

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b57bbdc...e43bd35. Read the comment docs.

germi · 2020-11-21T09:15:43Z

Hi

unfortunatelly, installing the compat version with tailwindcss@compat throws errors (this, a few times)

Module build failed (from ./node_modules/postcss-loader/src/index.js): 
TypeError: value.charCodeAt is not a function

strangely enough I get this error on one machine and not on another. Node 14 installed in both.

I also attempted this with no luck: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

EDIT: this is related to the TailwindUI plugin apparently. when removing it, the problem is gone.

vinayakkulkarni · 2020-11-24T10:33:53Z

Hi

unfortunatelly, installing the compat version with tailwindcss@compat throws errors (this, a few times)
Module build failed (from ./node_modules/postcss-loader/src/index.js): 
TypeError: value.charCodeAt is not a function
strangely enough I get this error on one machine and not on another. Node 14 installed in both.

I also attempted this with no luck: tailwindcss.com/docs/installation#post-css-7-compatibility-build

EDIT: this is related to the TailwindUI plugin apparently. when removing it, the problem is gone.

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    borderColor: ['responsive', 'hover', 'focus', 'active'],
    ...defaultTheme.variants,
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
  },
};

I believe, you have to remove @tailwindcss/ui from plugins: [] - mentioned in the docs (https://tailwindui.com/changes-for-v2)

Atinux · 2020-11-25T09:24:11Z

Hi @vinayakkulkarni

Thank you, do you mind opening a PR to update the docs please? :)

Heziode · 2020-12-09T20:38:44Z

Any progress on this next major release ?

UltraCakeBakery · 2021-01-14T16:44:04Z

Any progress on this next major release ?

A pull request is ready to merge nuxt/nuxt#8591 which will include the changes required for this upgrade. I hope they will merge it somewhere between now and early next month.

Is this draft ready to be merged and published as soon as nuxt 2.15 gets published?

Atinux · 2021-01-14T17:13:36Z

I will have to do testing for this @UltraCakeBakery but it is the plan yes.

hoektoe · 2021-01-31T11:16:53Z

When is this upgrade going to be merged or is there another way for me to upgrade to v2 on tailwindcss. Great work in the nuxt community.

Heziode · 2021-01-31T11:20:17Z

@hoektoe there is remaining work to be merged on other related project before it can be merged (take a look on related PR above).

You can already use Tailwind 2 in your project, take a look at: https://tailwindcss.nuxtjs.org/setup#tailwind-2

Nuxt 2.14 is still using PostCSS 7, we have a pull request opened to upgrade the dependencies. Once merged on v2.15, we will release a major version of this module to include TailwindCSS 2, see PR#203.

In the meantime, you can upgrade Tailwind by using the compatibility build:
yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Please ensure you are using Node >= 12.13.0 in order to use version 2 of TailwindCSS.

We have seen an issue with NPM regarding the packages resolution (see comment), we highly recommend using Yarn V1 when working with Nuxt 2.

ThomOrlo · 2021-01-31T11:20:20Z

When is this upgrade going to be merged or is there another way for me to upgrade to v2 on tailwindcss. Great work in the nuxt community.

Yes : https://tailwindcss.nuxtjs.org/setup#upgrading-tailwind

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

hoektoe · 2021-01-31T11:28:59Z

@hoektoe there is remaining work to be merged on other related project before it can be merged (take a look on related PR above).

You can already use Tailwind 2 in your project, take a look at: https://tailwindcss.nuxtjs.org/setup#tailwind-2
Nuxt 2.14 is still using PostCSS 7, we have a pull request opened to upgrade the dependencies. Once merged on v2.15, we will release a major version of this module to include TailwindCSS 2, see PR#203.
In the meantime, you can upgrade Tailwind by using the compatibility build:
yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Please ensure you are using Node >= 12.13.0 in order to use version 2 of TailwindCSS.
We have seen an issue with NPM regarding the packages resolution (see comment), we highly recommend using Yarn V1 when working with Nuxt 2.

Awesome , sorry I misread the docs for that section.

productdevbook · 2021-02-15T15:34:34Z

coming soon ? :)

viennv1709 · 2021-02-16T01:51:35Z

Nuxt v2.15 is out!

sduduzog · 2021-02-16T06:50:28Z

package.json

@@ -28,7 +28,7 @@
    "consola": "^2.15.0",
    "defu": "^3.2.2",
    "fs-extra": "^9.0.1",
-    "tailwindcss": "^1.9.6"
+    "tailwindcss": "^2.0.1-compat"


With the upgrade to nuxt 2.15, will we still need to depend on the compat version of tailwindcss?

No, we don't. Please upgrade tailwindcss to 2.0.3

Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag:

Atinux · 2021-02-16T13:40:01Z

Will work on it ASAP

productdevbook · 2021-02-16T13:50:08Z

@Atinux
Do you intend to include this here? Or will we install external. Build times have a very fast effect.

https://windicss.netlify.app/guide/vue.html#nuxt
Github

vinayakkulkarni · 2021-02-16T13:54:31Z

WindiCSS could be an add-on and not a replacement for pure tailwindcss imho

Atinux · 2021-02-16T14:00:13Z

Indeed, it could be an option for the module (like windi: true). No idea I have to test it. Any feedback or sandboxes with it is more than welcome

Zenthae · 2021-02-18T13:40:13Z

soon ?

Atinux · 2021-02-19T17:11:41Z

Looking at it next week, was recording my talk for Nuxt 3 and VueJS Amsterdam this week. Welcome to open source ☺️

vinayakkulkarni · 2021-02-19T18:25:19Z

Looking at it next week, was recording my talk for Nuxt 3 and VueJS Amsterdam this week. Welcome to open source ☺️

Super psyched about Nuxt 3!

pratik149 · 2021-03-07T16:00:09Z

Eagerly waiting!

lpj145 · 2021-03-08T20:53:10Z

nuxt/nuxt#8591 everything is fine, go ahead.

luismarquesfreire · 2021-03-09T20:51:37Z

Is it coming already? Need this urgently

Heziode · 2021-03-10T09:44:48Z

To all impatient :

Don't forget that we all have 24h in a day. No more.

So, just, be patient.

Note that you can already use Tailwind 2 in your project, take a look at: https://tailwindcss.nuxtjs.org/setup#tailwind-2

Nuxt 2.14 is still using PostCSS 7, we have a pull request opened to upgrade the dependencies. Once merged on v2.15, we will release a major version of this module to include TailwindCSS 2, see PR#203.

In the meantime, you can upgrade Tailwind by using the compatibility build:
yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Please ensure you are using Node >= 12.13.0 in order to use version 2 of TailwindCSS.

We have seen an issue with NPM regarding the packages resolution (see comment), we highly recommend using Yarn V1 when working with Nuxt 2.

rxsto · 2021-03-11T09:38:32Z

In addition to the comment above there is already a beta out for the upcoming major version 4.0.0 (@nuxtjs/tailwindcss@4.0.0-0). This will enable you to use tailwind v2 without the compatability dependencies. More information to be found here: #270 (I've tested it, it's running perfectly fine as of now, didn't encounter any issues yet).

UltraCakeBakery · 2021-03-12T09:09:29Z

To all impatient :

Don't forget that we all have 24h in a day. No more.

So, just, be patient.

Note that you can already use Tailwind 2 in your project, take a look at: https://tailwindcss.nuxtjs.org/setup#tailwind-2

I get where you come from and I agree with anyone that thinks we should never expect anything from open source project maintainers. But above the author says that the plan was to release this when nuxt 2.15 came out. It didn't, so he moved it to "next week", which was 3 weeks ago now.

People are not impatient, they are rightfully done waiting. Not all of us get away with dropping in a beta build or injecting dependencies manually. Some teams/companies have (high) standards.

kissu · 2021-03-12T09:11:44Z

To all impatient :
Don't forget that we all have 24h in a day. No more.
So, just, be patient.
Note that you can already use Tailwind 2 in your project, take a look at: https://tailwindcss.nuxtjs.org/setup#tailwind-2

I get where you come from and I agree with anyone that thinks we should never expect anything from open source project maintainers. But above the author says that the plan was to release this when nuxt 2.15 came out. It didn't, so he moved it to "next week", which was 3 weeks ago now.

People are not impatient, they are rightfully done waiting. Not all of us get away with dropping in a beta build or injecting dependencies manually. Some teams/companies have (high) standards.

Hi, you can hit the "fork" button and submit a PR. That way, you will provide high standards to everybody here and get a lot of love coming from us. 🤗

RomainLanz · 2021-03-12T10:07:31Z

Another PR that bump Tailwind to version 2 has been merged.

➡️ #270

lpj145 · 2021-03-12T13:15:51Z

To all impatient :
Don't forget that we all have 24h in a day. No more.
So, just, be patient.
Note that you can already use Tailwind 2 in your project, take a look at: https://tailwindcss.nuxtjs.org/setup#tailwind-2

I get where you come from and I agree with anyone that thinks we should never expect anything from open source project maintainers. But above the author says that the plan was to release this when nuxt 2.15 came out. It didn't, so he moved it to "next week", which was 3 weeks ago now.

People are not impatient, they are rightfully done waiting. Not all of us get away with dropping in a beta build or injecting dependencies manually. Some teams/companies have (high) standards.

Maybe i'm impatient, but not gracefully person, we need to understand open source projects always needs brave people, so i don't think what: people business/business company side is more important or great than people involved in projects, specially open source projects, "everbody need time" - is a good phrase.

Make love not war, thanks for great job. ❤

Atinux · 2021-03-15T23:10:17Z

Version 4 is out 🎊

https://github.com/nuxt-community/tailwindcss-module/releases/tag/v4.0.0

pratik149 · 2021-03-16T13:15:59Z

Version 4 is out 🎊

https://github.com/nuxt-community/tailwindcss-module/releases/tag/v4.0.0

Thank you so much for all the efforts you guys put into improving Nuxt and its modules. ❤🤗

hoektoe · 2021-03-16T15:23:33Z

Version 4 is out 🎊

https://github.com/nuxt-community/tailwindcss-module/releases/tag/v4.0.0

Awesome work guys, thank you so much for all the effort

feat: upgrade to TailwindCSS 2

653a842

BREAKING CHANGE

Atinux mentioned this pull request Nov 19, 2020

chore(deps): update dependency tailwindcss to v2 #201

Closed

1 task

chore(deps): force node 12.3.0 minimum

e43bd35

Atinux marked this pull request as draft November 19, 2020 11:27

SkullMasher mentioned this pull request Dec 25, 2020

chore(deps-dev): bump postcss from 7.0.35 to 8.2.1 heartless-gaming/heartlessgaming.com#58

Closed

MrNaif2018 mentioned this pull request Jan 20, 2021

Bump @nuxtjs/tailwindcss from 3.0.2 to 3.4.2 bitcart/bitcart-blog#25

Closed

sduduzog reviewed Feb 16, 2021

View reviewed changes

alexcroox mentioned this pull request Feb 16, 2021

Windi CSS (no longer required) #264

Closed

vinayakkulkarni mentioned this pull request Feb 16, 2021

docs: update nuxt 2.15 & tailwindcss 2.x with typography & dark-mode example #243

Closed

4 tasks

jsilva-pt mentioned this pull request Feb 20, 2021

Tailwind is out of date 1.9.6 -> 2.0.2 jsilva-pt/nuxt-content-theme-blog#48

Closed

Base automatically changed from master to main March 5, 2021 13:55

Atinux closed this Mar 15, 2021

Atinux deleted the feat/tailwindcss2 branch March 8, 2022 11:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: upgrade to TailwindCSS 2 #203

feat: upgrade to TailwindCSS 2 #203

Atinux commented Nov 19, 2020 •

edited

codecov bot commented Nov 19, 2020 •

edited

germi commented Nov 21, 2020 •

edited

vinayakkulkarni commented Nov 24, 2020

Atinux commented Nov 25, 2020

Heziode commented Dec 9, 2020

UltraCakeBakery commented Jan 14, 2021

Atinux commented Jan 14, 2021

hoektoe commented Jan 31, 2021 •

edited

Heziode commented Jan 31, 2021 •

edited

ThomOrlo commented Jan 31, 2021

hoektoe commented Jan 31, 2021

productdevbook commented Feb 15, 2021

viennv1709 commented Feb 16, 2021

sduduzog Feb 16, 2021

izundo-viennv Feb 16, 2021

Atinux commented Feb 16, 2021

productdevbook commented Feb 16, 2021 •

edited

vinayakkulkarni commented Feb 16, 2021

Atinux commented Feb 16, 2021

Zenthae commented Feb 18, 2021

Atinux commented Feb 19, 2021

vinayakkulkarni commented Feb 19, 2021

pratik149 commented Mar 7, 2021

lpj145 commented Mar 8, 2021

luismarquesfreire commented Mar 9, 2021

Heziode commented Mar 10, 2021

rxsto commented Mar 11, 2021

UltraCakeBakery commented Mar 12, 2021

kissu commented Mar 12, 2021 •

edited

RomainLanz commented Mar 12, 2021

lpj145 commented Mar 12, 2021

Atinux commented Mar 15, 2021

pratik149 commented Mar 16, 2021

hoektoe commented Mar 16, 2021

feat: upgrade to TailwindCSS 2 #203

feat: upgrade to TailwindCSS 2 #203

Conversation

Atinux commented Nov 19, 2020 • edited

codecov bot commented Nov 19, 2020 • edited

Codecov Report

germi commented Nov 21, 2020 • edited

vinayakkulkarni commented Nov 24, 2020

Atinux commented Nov 25, 2020

Heziode commented Dec 9, 2020

UltraCakeBakery commented Jan 14, 2021

Atinux commented Jan 14, 2021

hoektoe commented Jan 31, 2021 • edited

Heziode commented Jan 31, 2021 • edited

ThomOrlo commented Jan 31, 2021

hoektoe commented Jan 31, 2021

productdevbook commented Feb 15, 2021

viennv1709 commented Feb 16, 2021

sduduzog Feb 16, 2021

Choose a reason for hiding this comment

izundo-viennv Feb 16, 2021

Choose a reason for hiding this comment

Atinux commented Feb 16, 2021

productdevbook commented Feb 16, 2021 • edited

vinayakkulkarni commented Feb 16, 2021

Atinux commented Feb 16, 2021

Zenthae commented Feb 18, 2021

Atinux commented Feb 19, 2021

vinayakkulkarni commented Feb 19, 2021

pratik149 commented Mar 7, 2021

lpj145 commented Mar 8, 2021

luismarquesfreire commented Mar 9, 2021

Heziode commented Mar 10, 2021

rxsto commented Mar 11, 2021

UltraCakeBakery commented Mar 12, 2021

kissu commented Mar 12, 2021 • edited

RomainLanz commented Mar 12, 2021

lpj145 commented Mar 12, 2021

Atinux commented Mar 15, 2021

pratik149 commented Mar 16, 2021

hoektoe commented Mar 16, 2021

Atinux commented Nov 19, 2020 •

edited

codecov bot commented Nov 19, 2020 •

edited

germi commented Nov 21, 2020 •

edited

hoektoe commented Jan 31, 2021 •

edited

Heziode commented Jan 31, 2021 •

edited

productdevbook commented Feb 16, 2021 •

edited

kissu commented Mar 12, 2021 •

edited