Upgrade to Tailwind CSS v3.0

[DamianGlowala]

Tailwind CSS v3.0 has just been released.

@atinux, would this upgrade be possible in the near future? It might only be about updating the dependencies and a short mention in the docs to highlight which version of the module supports which version of the Tailwind CSS (v2 vs v3) for clarity.

https://tailwindcss.com/docs/upgrade-guide

[dargmuesli]

I've gone ahead and did the hard parts of it: #407. Should now be just a review away from being updated. Have a good day folks!

[dargmuesli]

@atinux @danielroe @farnabaz @pi0 you guys might know me from other contributions now already. Let me offer you my support on nuxt-community maintenance through this comment. Maybe I can help out here and there. If that's an option to you, feel free to shoot me an email! :)

[aliwesome]

@pi0 we really need fast maintenance for this module.

[limosin]

Waiting (impatiently) for this to be closed...😅

[madsh93]

Would it make sense the create a new community based version of this module? Tailwind does not seem to get the prioritization it needs.

Edit: it may actually just be easier to use Tailwinds own installation. They made a nice guide:
https://tailwindcss.com/docs/guides/nuxtjs

[dargmuesli]

Good hint @madsh93, haven't stumbled over those instructions yet!
I had to split nuxt.config.{js,ts} though, as mentioned in https://github.com/nuxt-community/tailwindcss-module/blob/main/src/tailwind.config.ts#L16 for it to work in dev mode on Nuxt Bridge.

Is there anything this plugin does more than what's achieved with tailwind's instructions? I suppose not much. If not, wouldn't it be a possibility to simply deprecate this plugin as it's neither necessary nor maintained? @atinux 🙏

[karngyan]

Good hint @madsh93, haven't stumbled over those instructions yet! I had to split nuxt.config.{js,ts} though, as mentioned in https://github.com/nuxt-community/tailwindcss-module/blob/main/src/tailwind.config.ts#L16 for it to work in dev mode on Nuxt Bridge.

Is there anything this plugin does more than what's achieved with tailwind's instructions? I suppose not much. If not, wouldn't it be a possibility to simply deprecate this plugin as it's neither necessary nor maintained? @atinux 🙏

I do like the /_tailwind route this plugin sets up. It comes in handy sometimes.

[danielroe]

This is on our list, by the way - not forgotten!

[dolbex]

Much appreciated on the update @danielroe. Currently, at least for me, the JIT double compile issue is still an issue with Tailwind 3 and a direct install. It would be fantastic if we could get this worked out to avoid the double compile - direct install or through this package. Been reading all morning and I'm at a loss of what's going on.

Edit: Seems like @dargmuesli and @madsh93 are definitely on to something in this thread. Commenting out the the nuxt config using the install instructions at Tailwind 3 kills the double compile. Not sure what the implications are there yet. (Splitting the js and ts didn't work for me)

tailwind.config.js

  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    // './nuxt.config.{js,ts}',
  ],

[medairbit]

A quick workaround to keep using this module, is to install the latest tailwindcss package separately and then move its legacy purge option to the new content property, and in details:

1. Install the latest tailwind version
2. Use the tailwindcss:config hook to override the purge options:

// nuxt.config.js
export default {
  buildModules: [
   // ... other modules
   // TODO: Remove this function when tailwindcss-module adds support to v3 
   function () {
      this.nuxt.hook('tailwindcss:config', (config) => {
        // Move the legacy purge content array to the the new property
        // https://tailwindcss.com/docs/upgrade-guide#configure-content-sources
        config.content = config.purge.content
        // Remove legacy purge option to disable the warning
        config.purge = undefined
      })
    }
  ]
}

[creazy231]

Are there any updates on this issue by now? Just want to work with the latest Tailwind Version? (ofc without broken HMR) 😞

[iBobik]

Temporary solution
Forked and merged this PR and created a separate package.
@eliyas5044/tailwindcss

[IsraelOrtuno]

A quick workaround to keep using this module, is to install the latest tailwindcss package separately and then move its legacy purge option to the new content property, and in details:

1. Install the latest tailwind version
2. Use the tailwindcss:config hook to override the purge options:

// nuxt.config.js
export default {
  buildModules: [
   // ... other modules
   // TODO: Remove this function when tailwindcss-module adds support to v3 
   function () {
      this.nuxt.hook('tailwindcss:config', (config) => {
        // Move the legacy purge content array to the the new property
        // https://tailwindcss.com/docs/upgrade-guide#configure-content-sources
        config.content = config.purge.content
        // Remove legacy purge option to disable the warning
        config.purge = undefined
      })
    }
  ]
}

3. (optional) If you have issues with JIT and HMR not working properly, check this solution:
   Hot reloading does not work for HTML templates #357 (comment)

This just works perfectly

[creazy231]

@IsraelOrtuno what exactly did you do? When I install the latest TW version and adding this to my buildModules it still doesn't apply the new classes are present in the latest updates of TW 🤔

[IsraelOrtuno]

@creazy231 in my tailwind.config.js file I have this just like if it was Taiwind 2.

module.exports = {
  purge: {
    // REMOVE purge option WHEN MERGED and leave "content": https://github.com/nuxt-community/tailwindcss-module
    content: [
      'components/**/*.{vue,js,ts}',
      'layouts/**/*.vue',
      'pages/**/*.vue'
    ],
  },

And added that mentioned function option to my buildModules.

[creazy231]

Thanks, I'll give it a try

[vencho-mdp]

Hi! Any updates on this?

[olegstepura]

For anyone waiting for this module to be fixed. As @madsh93 already mentioned - tailwind can be used natively. We tried this way and it works perfect, hot reload works with latest tailwind version. Setup is really simple, just follow the official guide: https://tailwindcss.com/docs/guides/nuxtjs

[pi0]

5.0.0-alpha released with Nuxt 3 and Tailwindcss 3 support. Release notes https://github.com/nuxt-community/tailwindcss-module/releases/tag/v5.0.0-0.

[matepapp]

hey @pi0,
thanks for releasing v5 🙌 can we already use this pre-release version in prod or should we wait until the stable one?

[dargmuesli]

pre-release version in prod