[Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS

In this posting, we will learn how to start with Vue3 + TypeScript + TailwindCSS.

Prerequisite

I will use the Vue CLI, so let's install it first.

$ yarn global add @vue/cli

Create a Project

Once installed, let's create the project.

$ vue create <project_name>

If you want to start with the default setting, just choose it.

But, I will start with manual configuration for using TypeScript at this time.

Select a TypeScript.

Select a Vue version.

And configure the other settings as you wish.

Now, let's move into the project and run our project.

$ cd <project_name>
$ yarn serve

At last, let's connect with a web browser.

Yay~!! We nailed it!!

Using TailwindCSS

In the previous, we needed to use a more complicated way to use TailwindCSS.

But now, we can easily use it.

$ vue add tailwind

Select TailwindCSS configuration.

That's it. We are done.

Make Our WebPage

Kill the server and let's add our own code to test this project.

 

App.vue

<template>
  <div class="flex justify-center">
    <img alt="Vue logo" src="./assets/logo.png" />
  </div>
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  <div class="m-4 p-4 text-2xl bg-green-500 font-medium text-white">
    Hello Vue3 + TypeScript + TailwindCSS
  </div>
</template>

 

I modified the code.

Now, let's start it again.

$ yarn serve

It's time to access this.

Conclusion

I wish you felt how easy to build a web application with Vue.

Now, go make your own web application.