Applying TailwindCSS On Vue 2 Project: Covid-19 Update

Good day friends!😊

Can’t be denied, Appearance is one of the important points for apps or system development. That’s why today we will explore one of the most famous CSS frameworks for Vue (and other programming languages) called TailwindCSS. It’s an easy-to-use and modular yet beautiful framework for apps or system development.

What is TailwindCSS

Quoted from GeeksforGeeks,

TailwindCSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

The beauty of this thing called tailwind is it doesn’t impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file, processes this CSS file over a configuration file, and produces an output.

The first impression when I use TailwindCSS is its class name selection is really straightforward, like if you want to change anything about text, use class prefix ‘text-’ (text size, color, align, opacity, etc.). Want to change the background thing? use the class prefix ‘bg-’. Change the padding or margin? use class prefix ‘p-’ or ‘m-’ and if you just want to change one section of padding or margin? Just add ‘t’ (for top), ‘b’ (for bottom), ‘l’ (for left), and ‘r’ for right — so: ‘pt’ for padding-top, ‘mt’ for margin-top, ‘pb’ for padding-bottom, etc.

Our Case

We will use TailwindCSS for our last project

1. API using Laravel Lumen — https://medium.com/remote-worker-indonesia/create-api-covid-19-data-using-laravel-lumen-and-swagger-as-documentation-24edd56ea0d0
2. Frontend apps using Vue — https://medium.com/remote-worker-indonesia/create-covid-19-website-using-vue-axios-to-consume-laravel-lumen-api-b91c82434d31

And the github project:

GitHub - haniefhan/covid_19_api: API COVID-19 data using Laravel Lumen and Swagger as documentation

GitHub - haniefhan/covid_19_vue: Create a website that will show COVID-19 data from the…

For this case, I will create a new branch in the Frontend Github project so that we still have the original project without TailwindCSS.

Preparation

Okay, we will start by cloning the project using GIT command:

git clone https://github.com/haniefhan/covid_19_api
git clone https://github.com/haniefhan/covid_19_vue

After all git projects have been cloned, Start the API service using this command:

php -S localhost:8000 public/index.php

Let’s start the service for the Frontend project using this command:

npm run serve -- --port=3000

Check in the browser, if the project run correctly this will show in the browser.

http://localhost:3000

Alright, all preparations set! Let’s move to the next step

Create a new Branch in GIT

Because I still want to keep the original code, We will use one of GIT features called branch. We will create a new branch called Tailwindcss, So this is the command we use in CLI:

git branch tailwind
git checkout tailwind
Switched to branch 'tailwind'

Installing and Setting TailwindCSS

Before we install TailwindCSS in our Vue (Frontend) project, we must know which version our Vue is. To check it, open the package.json file and then find dependencies then find vue value.

...
"dependencies": {
  ...
  "vue": "^2.6.11",
  ...
},
...

In this case, the Vue version in our project is version 2.6.11.

Let’s install TailwindCSS to our project using this command:

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

Interlude

We can’t really use the command that stated in TailwindCSS Official Guide for Vue version 2:

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

Because it’s for the latest version called Vite or Vue version 3.

After we add the TailwindCSS to our project, we need to create its config file manually or we can use npx command. We will use npx command, execute the following command in your CLI:

npx tailwindcss init -p

It will generate 2 files:

1. postcss.config.js
2. tailwind.config.js

We need the files, especially tailwind.config.js when we need to change some default configuration in TailwindCSS or adding a new configuration (like: new color). The configuration file is also one of the keys to purge or compile the style file so the style file just contains the class we used, and of course, the style file size is far smaller than the complete version.

Next, we need to create a new file for TailwindCSS code and add it to our project.

Create a new file named taildwind.css in folder src/assets with the following code as content:

/* file: src/assets/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Next, open file main.js in folder src and add this line:

/* file: src/main.js */
...
import './assets/tailwind.css'
...

Applying TailwindCSS in menu Latest Covid Cases

So, here is the plan, we want to change the original appearance of the menu Latest Covid Cases (left side) into a new appearance (right side)

Let’s start with the application menu appearance.

Open file /src/App.vue and change the content into this:

Ok, I think it’s done for the menu. Let’s move to the Latest Covid Cases content.

Open file LatestCovidCases.vue in folder src/views , change the content inside <template> tag to this code:

Remove the style lines at the bottom of the code first!

Let’s check again in our browser.

http://localhost:3000

Alright, it looks more beautiful than before. Let’s move to menu Top Ten Covid Cases

Applying TailwindCSS in menu Top Ten Covid Cases

Here is the plan, we want to change the original appearance of the menu Top Ten Covid Cases (left side) into a new appearance (right side).

Open file TopTenCovidCases.vue in folder src/views , change the content inside <template> tag to this code:

Remove the style lines at the bottom of the code first!

Let’s check again in our browser.

http://localhost:3000/toptencases

Alright, TailwindCSS has been applied to our project. 😁

Conclusion

We have applied TailwindCSS in our project for the application menu, menu Latest Covid Cases, and menu Top Ten Covid Cases. Here is the list of the files we change in this article:

/covid_19_vue
|-- public 
    ...
    |-- index.html
|-- src
    |-- assets
        ...
        |-- tailwind.css
        ...
    ...
    |-- views
       |-- LatestCovidCases.vue
       |-- TopTenCovidCases.vue
    |-- App.vue
    |-- main.js
...
tailwind.config.css

You can see and clone code in this article in my Github:

GitHub - haniefhan/covid_19_vue at tailwind

Thank you for your time to read. Let’s join us again next time as we explore another interesting case! 😉