How to get Tailwindcss 2.x on NuxtJS

Question

I tried to install Tailwindcss 2.x on the nuxtJS boilerplate from NetlifyCMS, but on dev build, i've got this error: Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError (3:18) Expected an opening square bracket.

I'm thinking that the error appear only when purgeCSS is not triggered, because there is no problem on production build.

I tried with tailwindcss 1.9 but there is no problems.

Qayyum Shareef · Accepted Answer · 2021-02-22 13:58:03Z

1

Instead of using Nuxt.js boilerplate from Netlify, you can follow the tailwind Nuxt.js installation guide here

answered Feb 22, 2021 at 13:58

Qayyum Shareef

547 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kissu · Accepted Answer · 2021-02-22 18:12:00Z

0

As explained in @nuxt/tailwind official documentation, Nuxt was still using PostCSS 7 and just upgraded to PostCSS 8 few days ago (Nuxt 2.15.0), so the core team is doing the migration to TailwindCSS 2.x right now.
@atinux is busy preparing his talk for VueJS Amsterdam right now, so the release will pretty much be on the first or second week of March.

You can either wait for the next release of the TailwindCSS official module, or use the solution provided in the first link aka

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

Also, as @Qayyum Shareef, I do recommend using the official module for some serious support and easier debugging.

answered Feb 22, 2021 at 18:12

kissu

47.3k16 gold badges94 silver badges196 bronze badges

2 Comments

Thomas Over a year ago

Yeah i had already the good version. I don't know why this error happened. This morning, I restarted a new project with the nuxt boilerplate from netlifyCMS website, and i've upgraded tailwindcss, and no error... with the same config, same dependancies. Btw, thanks to you two for trying to help me and thanks for the release information, it's a good news. I validate your comment, because it's the good way to update Tailwindcss.

kissu Over a year ago

Haha, thanks ! Do you have a repo to show us ? Why do you want that much to use the boilerplate from Netlify ?

Collectives™ on Stack Overflow

How to get Tailwindcss 2.x on NuxtJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related