How To Add Tailwind CSS In Vue.js

In this article, we will learn how to add Tailwind CSS in Vue.js

Prerequisites of React

• Familiarity with the HTML, JavaScript and Bootstrap 
• node.js installed

Create Vue.js Project

To create a Vue.js app, use the following command in the terminal

vue create tailwindcss

Install Tailwind CSS

Install tailwind using below command.

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

Generate the Tailwind and post CSS configuration files.

npx tailwindcss init -p

This command creates two files named: tailwind.config.js and postcss.config.js, add the following code in tailwind.config.js file

module.exports = {
    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Add the Tailwind directives to your CSS

Create index.css file and add the folloiwng reference.

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

now import the index.css file in main.js file.

import Vue from 'vue'
import App from './App.vue'
import './index.css'
Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

Now open Helloworld.vue component and add the Tailwind’s classes.

<template>
  <div class="justify-center flex bg-blue-300 items-center h-screen">
    <div class="text-4xl">
      Hello Welcome to Tailwind Css
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Now run the project using

npm run serve

Summary

 In this article, we learned how to add Tailwind CSS in Vue.js.