DEV Community 👩‍💻👨‍💻

Cover image for Nuxt.js + Tailwind 2.0
Sean Kerwin
Sean Kerwin

Posted on • Updated on

Nuxt.js + Tailwind 2.0

In the post, i'm going to explain how to use the new Tailwind 2.0 with Nuxt.js.

By default, when you create a new Nuxt project, it comes with tailwind 1.X. To utilize the new Tailwind 2.0 and it's new classes you'll need to make some changes.

As of writing this post. There is a PR out for Nuxt and Tailwind 2.0, there's currently an issue because Nuxt 2.14 still uses PostCSS 7. Tailwind 2.0 requires PostCSS 8. You can checkout the PR here.

The good people over at Tailwind have made a compatibility build, allowing us to use PostCSS 7 with Tailwind 2. Nuxt 2.15 should be using PostCSS 8 but again, as of writing this, Nuxt 2.14 is using PostCSS 7.

What I did to get Tailwind 2.0 working on a fresh project is the following:

Run create-nuxt-app tailwind-v2 to create a project.

I answered the following:

> Project name: tailwind-v2
> Programming language: JavaScript
> Package manager: Yarn
> UI framework: Tailwind CSS
> Testing framework: None
> Rendering mode: Universal (SSR / SSG)
> Deployment target: Server (Node.js hosting)
Enter fullscreen mode Exit fullscreen mode

This will create a new project, but using Tailwind 1.X, I then went on to do the following:

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

This will add the compatibility build to your project.

I then ran npx tailwind init to generate a tailwind.config.js and added the new tailwind/forms package required in tailwind 2.0 for the form styling to test it out.

My tailwind.config.js just looks like this for the demo project.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Enter fullscreen mode Exit fullscreen mode

And that's basically it.

Run yarn dev in your terminal and then head-over to https://tailwindui.com to test out the new pre-built Tailwind 2.0 components.

Top comments (1)

Collapse
 
dikaio profile image
Donovan Dikaio

I think you'll need to also add yarn add -D @tailwindcss/forms to the install but looks great thank you for sharing!

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠