DEV Community

loading...
Cover image for Nuxt.js + Tailwind 2.0

Nuxt.js + Tailwind 2.0

seankerwin profile image Sean Kerwin ・2 min read

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.

Discussion

pic
Editor guide
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!