How to Integrate Tailwindcss with your Vue/Vite Project

#vue #css #tutorial

In this post I'll show you how to integrate and configure Tailwindcss in a Vue project! I'll also be using Vite instead of vue-cli!

Why Tailwind?

Css frameworks have been around for quite a while now and are widly used around the internet. You may have heard or even used frameworks such as Bootstrap or Foundation, which are quite useful if you want to build a fast and somehow good looking application.

The problem with these types of css frameworks is that they are considered to be high-level, meaning that they are meant to style components according to their specifications. This is somehow of a problem because if you want to customize your front-end you might have to create a new css file and overwritte most of the classes that the framework provides, which is tiresome and annoying at best!

To tackle this, Tailwindcss was created which in their words is "a highly customizable, low-level CSS framework" making it possible to add personal styling without the need to override any type of component.

Setting up a Vite Project

A Vite project can easily be started by just typing in your terminal or command line npm init vite-app . Just by doing this you can see how fast and powerful Vite is!

After the setup just follow the next few commands to install all the dependencies and run your project for the first time. And that's it! You now have a brand new Vite project! Open it now in your favorite IDE and let's start!

Setting up Taildwind CSS

It's now time for the main event! To install tailwind simply run the command npm i tailwindcss. After the instalation a few configurations are needed in order to start using it in your project!

First create a new css file. This can be placed and named anything so to simplify I'll name mine tailwind.css and store it in the project src directory. After creating, write the following inside the file:

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

This will load on build time all the tailwindcss classes into your css file!

Next we need to create a config file for tailwind and postcss (since tailwindcss uses postcss) to customize as much as we want if necessary! To do so simply run npx tailwindcss init -p. As you might notice, two new files, tailwind.config.js and postcss.config.js were created in your project root folder.

Finally just change the postcss.config.js file like so:

module.exports = {
  plugins: [
    require("tailwindcss"), 
    require("autoprefixer")
  ],
};

This will load tailwindcss and autoprefixer into postcss. Vite also has a cool feature that automatically loads my postcss config into all my styles in *.vue and imported plain .css files!

Finally, let's import tailwind.css file into our main.js by adding import "./tailwind.css" into the file and let's check out if everything is working accordingly!

To check if tailwindcss is up and running in our application let's add some classes into our HelloWorld.vue file.

<template>
  <h1 class="text-red-500 bg-blue-500">{{ msg }}</h1>
  <button @click="count++" class="p-4 bg-green-600 rounded-full">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

The text-red-500 will set the h1 color to a light red and bg-blue-500 will simply add a blue background color to the h1.
I've also added some classes in the button. The p-4 class adds padding in all directions to the button and bg-green-600 gives a nice green background. Finally the rounded-full class will fully round the button!

Awesome! Everything is working and now we can start using the amazing functionalities that tailwindcss provides! Have fun exploring Tailwind! If you want to take a look at all the possible classes check out their documentation!