Setting Up Nuxt.js and Tailwind CSS the Right Way

Learn how to set up Nuxt.js and Tailwind seamlessly.

Photo by Suzunatsu

Working around with Nuxt.js together with Tailwind CSS makes everything look great and offers the best developer experience ever.

When not set up appropriately, we are certain that we might end up breaking things and incurring another lot of time setting up the things altogether.

For those who aren’t familiar with Nuxt.js, it is a framework that is built entirely on top of Vue and comes bundled with a lot of amazing features such as SSR, automatic routing just to name but a few.

In this article, we are going to look at the various ways we can use to set up Tailwind CSS and Nuxt.js appropriately.

Nuxt.js together with Tailwind CSS

Prerequisites

• Have Node.js installed
• Have npm installed

This method involves setting up TailwindCSS concurrently with Nuxt at the same time.

To set up Nuxt.js together with Tailwind CSS, first, open your developer terminal and enter the following commands depending on your preferred package manager.

Using yarn

yarn create nuxt-app nuxttailwind

Using Npx

npx create-nuxt-app nuxttailwind

Using Npm

npm init nuxt-app nuxttailwind

After you have run the command, it will prompt you to confirm the project and select your preferred selects.

It will then lead you to the UI framework where you will select TailwindCSS. Check as shown from the figure above.

Tailwind Css UI Select

After selecting what best fits your development, you can press enter and allow the application to install Nuxt with Tailwind altogether.

If you aren’t familiar with things up, you can check the configuration that I mostly use.