How To Use Tailwind CSS With Vue And Vite

You will be guided by this tutorial as you set up Tailwind CSS in a Vue 3 and Vite project.

By selecting from the framework's pre-made CSS classes, Tailwind CSS, a utility-first CSS framework, makes it very simple to apply fantastic styling to your Vue 3 online application. Because of its simple design, Tailwind CSS is one of the most widely used CSS frameworks available today. It also substantially speeds up the styling and development processes. If you're unfamiliar with Tailwind CSS, the project's main page at https://tailwindcss.com/ might serve as a decent starting point.

It only takes a few straightforward steps to set up your Vue 3 project with Vite so that you can use Tailwind CSS. You may learn how to install Tailwind CSS into your Vue project and begin using its CSS classes for styling in the tutorial that follows.

Step 1: Create the Vite project in step one.

Setting up a new Vue project using vite-create is the first step. Put in the following command:

npm create vite my-project

This creates a new project in the folder my-project:

You must specify which framework and variant to use when running the vite-create process. Choose option vue in both situations.

To ensure that the project folder's default dependencies are installed, you must next go to the newly created project folder and run npm install:

Install the Tailwind CSS requirements in step two.

As soon as the project is finished, we can use the Node Package Manager (NPM) to continue installing the dependencies required by Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer

Additionally, commands must be used to build the Tailwind CSS configuration files in the projects.

npx tailwindcss init -p

Step 3: In Tailwind's configuration files, specify the template path.

As you can see in the accompanying screenshot, we need to enter the URLs to our template file in the content array of the freshly formed Tailwind configuration file tailwind.config.cjs.

Step 4: Add Tailwind directives to CSS

Remove the default CSS code from the file ./src/style.css and add the three lines of code that contain the Tailwind directives below:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Use Tailwind’s CSS classes in your project

We can now use Tailwind's CSS classes in our project, as seen in the following example in the template section of file ./src/App.js:

<template>
   <div class="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
     <p class="text-3xl text-gray-700 font-bold mb-5">
       Welcome!
     </p>
     <p class="text-gray-500 text-lg">
       Vue and Tailwind CSS in action
     </p>
  </div>
</template>

You must first launch the development web server using the npm run dev command in order to check the outcome in the browser:

The output of the application is then accessible through a browser. The following output should be visible when the Tailwind CSS classes have been correctly applied: