Set up Tailwind CSS for your Vue.js app

This article guides you to config your vue.js application to start using tailwind classes in your components.

• Tailwind is a CSS framework that has lots of predefined styles for us to design faster.
• Vue.js is a very popular front-end framework written in javascript.

If you don't have Vue CLI installed in your system, install it using npm. (Visit this website to download npm and node)

$ npm install -g @vue/cli

vue installed

Now, let’s create a new vue.js app using vue create <app-name>

$ vue create vuejs-tailwind-app

You will be prompted with the following, select vue2 or vue3 whichever version you are comfortable with, and press Enter.

After your app is successfully created, go to the folder and run the app using npm run serve

$ cd vuejs-tailwind
$ npm run serve

By default, Vue app runs on localhost in port 8080

Click on the link http://localhost:8080/ to view our app.

Now, let's install the dependencies required to work with Tailwind.

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Then, to generate config files, type the following command

$ npx tailwindcss init -p

Open your app in your favorite editor to edit.

• In the tailwind.config.js file,
  - replace purge: []
  - with purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']

tailwind.config.js

• Under the src folder create index.css and add the following.

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

• In the main.js file (in src folder), import index.css

Let’s test its functioning by adding a Tailwind-CSS class to an element.

I am going to try adding the class text-pink-400 (changes the color of the text to pink) to the <p> element in the HelloWorld.vue file in the components folder.

Let’s run the app and make sure everything is working.

npm run serve

Note:

When you start the app, you might get compatibility errors like the one shown below.

Error

To solve this issue, we have to install specific versions of packages that are compatible with each other.

First, uninstall the already installed packages by running this command,

npm uninstall tailwindcss postcss autoprefixer

Next, run the below command to install compatible versions of the packages.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Visit this link to know more 👉 https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Run the app and check whether the colour of the text is changed.

Congratulations! You can now start applying tailwind styles in your Vue.js app.

Note: If you want to use styled form fields in your app, you have to install the module separately.

$ npm install @tailwindcss/forms

Then, in tailwind.config.js, add require('@tailwindcss/forms') for plugins.

A simple Vue project

Now we shall try creating a simple login page, with three components: navbar, login container, and a footer.

Components

Now that we have all the components ready, let’s import these into our App.vue

Run the app and go to http://localhost:8080 on your browser.

Final product

Now it’s your time to put your own twist on your app with easily usable tailwind classes.

Github link — https://github.com/SharmilaS22/medium-vuejs-tailwind-setup

If you liked my article and would like to support me, you can buy me a coffee. I’d appreciate your support!

Happy Learning! Follow for more!