Upgrade tailwind 2.0.1

[apithy-isidro-martinez]

Please upgrade to version 2.0.1 which has just been released

[ghost]

Note - it requires at least Node.js 12.13.0
https://tailwindcss.com/docs/upgrading-to-v2#upgrade-to-node-js-12-13-or-higher

[apithy-isidro-martinez]

@web2033 i know, i tried this https://tailwindcss.nuxtjs.org/setup/#upgrading-tailwind but the version still in 1.9.6

[malalecherocks]

Same here, updated Node to latest version, and I can't upgrade tailwind to 2.0.1, any news? Doc says: just use npm update to update to latest version of tailwind... :(

[Atinux]

Could you try directly to do yarn add —dev tailwindcss@2.0.1?

[apithy-isidro-martinez]

@Atinux i tried but i got this error

[ThomOrlo]

@apithy-isidro-martinez https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

[tapitapeh]

Hi, I got this error

Module build failed (from ./node_modules/postcss-loader/src/index.js):                                                                                                                            friendly-errors 05:08:57
TypeError: getProcessedPlugins is not a function

I'm using npm and this also happens when I tried to fresh install with npm init nuxt-app. How to fix this?
@Atinux

[apithy-isidro-martinez]

@ThomOrlo worked out doing this npm uninstall tailwindcss postcss autoprefixer and then npm install tailwindcss@latest postcss@latest autoprefixer@latest but anyway I hope the module will be updated

[malalecherocks]

Looks like tailwindui is no longer needed acording to ui doc, so I uninstalled it and now looks it's working, thanks anyway.

More info: https://tailwindui.com/changes-for-v2

[apithy-isidro-martinez]

@malalecherocks in the colors do you see the 50 values ? i.e bg-gray-50 not to me and I don't know why

[malalecherocks]

I was just seeing that haha, I need to check if they have limited the colors and you have to add the palettes? something like that? I'm checking it right now

[moritzruth]

In a fresh Nuxt.js project with @nuxtjs/tailwindcss, it was sufficient to run yarn add -D tailwindcss@compat.

[apithy-isidro-martinez]

@malalecherocks if you figured out let me know pls

[malalecherocks]

@apithy-isidro-martinez in your tailwind.config.js you need to add the colors you want to use in your project...

// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
future: {},
purge: [],
theme: {
extend: {},
colors: {
gray: colors.blueGray,
coolgray: colors.coolGray,
blue: colors.blue,
red: colors.rose,
pink: colors.fuchsia,
green: colors.green,
}
},
variants: {},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
}

all of this I found in the official doc,

[sduduzog]

Looks like it was picked up by renovate but tests are failing in CI #201

[jpokan]

In a fresh Nuxt.js project with @nuxtjs/tailwindcss, it was sufficient to run yarn add -D tailwindcss@compat.

@moritzruth Tried it, got it working. But it seems to take longer to compile and it is using lots of RAM. Have you noticed it or its just me?

Edit: Figure out it was because new Tailwind 2 was heavier with new defaults, so it was increasing the build time. To optimize it during development, you can disable some Tailwind features you don't plan to use in your tailwind.config.js file.

[tommypratama]

In the meantime, it seems like using the @nuxtjs/tailwindcss module isn't a good idea. Try the following:

• Install nuxt without the @nuxtjs/tailwindcss module
• yarn add -D tailwindcss@compat
• npx tailwindcss init

Done, you can use all the features in Tailwind v2

[ghost]

@Atinux Am I right, that if you use custom TW config, than this module doesn't help much?
(It was make sense for me when Nuxt created config files for TW, but then you removed that feature...)

[sduduzog]

I got my existing project by installing both tailwindcss and postcss as dev dependencies, Allthough I did notice slower build times. Just do:

npm install --save-dev postcss tailwindcss@latest

[victorgarciaesgi]

Tailwind v2 is using PostCss 8, Nuxt is using PostCss 7. I think we have to use the compat build

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

[Atinux]

I added a note how to upgrade to TailwindCSS 2 in the docs: https://tailwindcss.nuxtjs.org/setup#tailwind-2

Also, I have to wait for CodeSandBox to upgrade to Node 12 for the examples since it is still using Node 10.

[Atinux]

@Atinux Am I right, that if you use custom TW config, than this module doesn't help much?
(It was make sense for me when Nuxt created config files for TW, but then you removed that feature...)

Would be nice if you read the docs before writing such comments: https://tailwindcss.nuxtjs.org/tailwind-config

This module adds:

• Sensible defaults for purging your files
• Ability to extend the tailwind config with hooks and a merging strategy (before Tailwind introduced extends)
• Add the possibility to access the Tailwind configuration with tree-shaking

[victorgarciaesgi]

@Atinux Is Postcss 8 support in the works for Nuxt 2.x or will it release with Nuxt 3?

[Atinux]

@victorgarciaesgi it is planned to add it for Nuxt 2.15 and is already supported in Nuxt 3

[florianjs]

Thank you for the updated Doc, really useful in dev mode.
I'll wait until V2.15 (BTW, do you have a release date?) for prod, in the meantime I'm going to use the CDN in the Header, not the best thing to do but I need the 2.0 Tailwind's functionality.

[jankal]

@Atinux please be aware that installing the tailwind compatibility build creates a hiccup with npm (npm@6.14.8).

Situation:

"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
"@nuxtjs/tailwindcss": "^3.1.0",
"nuxt": "^2.14.6"
"postcss": "^7.0.35",
"autoprefixer": "^9.8.6",

NPM resolves a tree and ends up with the following (npm list tailwindcss):

+-- @nuxtjs/tailwindcss@3.3.1
| `-- tailwindcss@1.9.6
`-- tailwindcss@npm:@tailwindcss/postcss7-compat@2.0.1

Based on the tailwindcss package.json in both builds, there should be two binaries in node_modules/.bin/: tailwindcss & tailwind. But there are none.

Sidenote: JetBrains IDEs since 2020.3 need these binaries to provide autocomplete. That's how I figured it out.

Yarn does it "better". At least those two binaries are in fact there. Running the tailwindcss command points out, that it in fact is the binary of @tailwindcss/postcss7-compat 2.0.1.

Yarn seems to resolve the same tree (concerning the relationship of these 3 packages):

├─ @nuxtjs/tailwindcss@3.3.1
│  └─ tailwindcss@1.9.6
└─ tailwindcss@2.0.1

I don't think we can fix this issue here, as long as @nuxtjs/tailwindcss v4 is out. If this is an issue, you can only use yarn for now.

[Atinux]

Thank you for the investigation @jankal

I updated the documentation: https://tailwindcss.nuxtjs.org/setup#tailwind-2

[apithy-isidro-martinez]

In a fresh Nuxt.js project with @nuxtjs/tailwindcss, it was sufficient to run yarn add -D tailwindcss@compat.

@moritzruth Tried it, got it working. But it seems to take longer to compile and it is using lots of RAM. Have you noticed it or its just me?

Edit: Figure out it was because new Tailwind 2 was heavier with new defaults, so it was increasing the build time. To optimize it during development, you can disable some Tailwind features you don't plan to use in your tailwind.config.js file.

How did you solve that? It seems to take more than 1 minute to build and consumes a lot of RAM

[jpokan]

@apithy-isidro-martinez So, in my tailwind.config.js file I defined only the features or in this case colors I intended to use and not extend it:
In this example just using transparent and yellow colors.

const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      yellow: colors.yellow,
    }
  }
}

You might want to check https://tailwindcss.com/docs/configuration and https://tailwindcss.com/docs/optimizing-for-production#limiting-your-color-palette for better understanding.
Also, when I upgraded to version >3.3.3 of @nuxt/tailwindcss , I noticed a faster build time.

[m2sahin]

Hello, when will this update. Please provide an exact date.

[manniL]

Hello, when will this update. Please provide an exact date.

Using Tailwind 2.x is already possible (see #202 (comment))

[martinnacimiento]

Hello, when will this update. Please provide an exact date.

Using Tailwind 2.x is already possible (see #202 (comment))

This is not possible for me, I deploy with npm run generate or yarn generate but not have any Tailwind 2 feature are available. Only works for npm run dev

[bmulholland]

I believe v4 closes this out @Atinux

[davodaslanifakor]

when we can use tailwind 3 in nuxt/tailwind? @Atinux