Tailwind and Vue 3 – The Complete Guide

If you have been following me for a while, you know that I hate nothing more than incomplete guides. Unfortunately, when it comes to Vue (specifically Vue 3), there are a lot of incomplete guides out there. I had to read several articles to get Tailwind and Vue 3 to work, so I decided to share what I have learned.

Gladly, there is a very easy way on how to install Tailwind CSS in a Vue 3 project.

I have just recently started to learn Vue after a longer endeavor with React. Since I do not care about getting a job, I decided to give Vue a try. I am still at the beginning of my journey, but I can already tell that it is, in my opinion, easier to understand than React – And so far, I really enjoy it.

Since I am going to use Tailwind and Vue 3 as my flavor of choice when it comes to quick development, I am going to keep this article up-to-date and will add content as we go.

In this first draft, I’ll show you how to install Tailwind and Vue 3 with the help of Vue CLI. I take you through it step-by-step and show you how to use Tailwind CSS classes in a very basic app.

Bookmark this page should you decide to use Tailwind and Vue 3 as well and make sure to check back regularly for updates.

Since this is no “How to install Vue 3” guide (let me know if you want one), I assume you have Vue 3 already installed and ready to go. Let’s dive in.

Table of Contents

The Setup

For this guide, I will use the following setup.

  • Windows 10
  • WSL 2 (or Ubuntu for that matter)
  • Visual Studio Code
  • NPM (8.1.0 or higher)
  • Node.js (v14.18.0 or higher)
  • Vue 3
  • Vue CLI (v4.5.14 or higher)
  • Coffee (The delicious brown liquid)

Step 1 – Installing Requirements

It is crucial for this to work that your system is up-to-date. The same goes for npm, our package manager. Now, unfortunately, if you use apt to install npm, you’ll end up with an utterly outdated version (3.x.x). The latest LTS version of npm however, is version 8.1.0.

To circumvent this, I came up with a surefire way to make sure we are on the same page. If you develop on Linux, you should be using NVM(Node Version Manager) anyway. This allows us to run the latest versions of npm and Node.js.

Updating the System

First, updating.

sudo apt update -y && sudo apt upgrade -y
Code language: Bash (bash)

Installing NVM

Now we install NVM from its original source and activate it.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash source ~/.bashrc
Code language: Bash (bash)

Tip: If you use zsh instead of bash, use the following syntax:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | zsh source ~/.zshrc
Code language: Bash (bash)

Installing [email protected] and [email protected]

Now we can install both, the LTS version of npm as well as nodejs. To make sure we are on the same page, we are going to upgrade npm to the latest version afterward.

nvm install --lts nvm install-latest-npm
Code language: Bash (bash)

Now you are set to follow along with this tutorial.

Step 2 – Installing Vue 3 and Vue CLI

Even I said this is no “how to install Vue 3 guide”, I want to make sure we are on the same page. If you got Vue 3 and Vue CLI ready, skip ahead.

First up, we install Vue CLI using npm.

npm install -g @vue/cli
Code language: Bash (bash)

Step 3 – Create a new Vue 3 Project

We will do a simple example project. Simply choose Default (Vue 3) and hit Enter.

vue create my-project
Code language: Bash (bash)

Navigate into the project directory.

cd my-project
Code language: Bash (bash)

Step 4 – Install Tailwind CSS on Vue 3

Now, to use Tailwind and Vue 3, we install it using Vue CLI. Select y if there is a warning about uncommitted changes.

vue add tailwind
Code language: Bash (bash)

If you get asked which tailwind.config.js file you want to create, go for minimal (or full if you know what you’re doing).

Tailwind and Vue 3

Step 5 – Visual Studio Code Extensions

We are almost done. Open up your project with Visual Studio Code.

code .
Code language: Bash (bash)

Or manually the way you are used to it.

Head to Extensions and install the Tailwind CSS IntelliSense Extension by Brad Cornes. This is essential if you want to use Tailwind CSS with Vue 3.

Tailwind and Vue 3

Step 6 – Testing Tailwind and Vue 3

Alright, now that we are all up and running, let’s see if it works. Open your project root directory in VSCode.

Verifying Tailwind and Vue 3 Configuration

One indication that you did everything right is the tailwind.config.js file that you’ll find at the bottom of your root folder. This is the place where you do all your custom settings for Tailwind CSS, for now, you don’t need to touch it.

Vue 3 Tailwind CSS Config File

Running the Development Server

Start the Development Server to fire up the default Vue 3 App.

npm run serve

Open your Web Browser and navigate to HTTP://localhost:8080/, or for the lazy, click here.

You will already see that Tailwind did something since the Vue Logo is not centered anymore. This is a sign that Tailwind and Vue 3 are in fact working together already!

To try if it is really working, open up the HelloWorld.vue file inside of the components folder click right at the end of <div class=”hello (right here)“> and make one space and start typing a Tailwind class name like bg-gray-. This should already fire up the Tailwind IntelliSense Extension we have installed earlier and presented you with a couple of choices.

Testing Tailwind with Vue 3

And if you do set it to something like bg-gray-800, you’ll see the effects applied to your app, hence, Tailwind and Vue 3 are working!

Testing Vue 3 and Tailwind CSS

And this is that.

TL; DR

For the lazy, as always, I know you people already ?.

sudo apt update -y && sudo apt upgrade -y curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash source ~/.bashrc nvm install --lts nvm install-latest-npm npm install -g @vue/cli vue create my-project cd my-project vue add tailwind
Code language: Bash (bash)

Open Visual Studio Code -> Install Tailwind CSS IntelliSense Extension by Brad Cornes.

npm run serve
Code language: Bash (bash)

Open the browser and start using Tailwind CSS with Vue 3.

Conclusion

This is how simple it is to set up Tailwind and Vue 3. As I have said, Tailwind CSS is one of the most popular CSS frameworks out there, and if you combine it with something like Vue, you really harness all of the power of quick prototyping apps.

I have another great article coming up where I will talk about a Tailwind CSS component library in combination with Vue 3, so make sure to bookmark this blog (or sign up for the newsletter in the sidebar) to stay on top of that.

Leave a comment below and let me know if that has worked for you!

Tell us what you think!

This site uses Akismet to reduce spam. Learn how your comment data is processed.