🥳
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale 🎁 Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off 🎉
postImage

How to Install Tailwind CSS in Vuejs

blogImage

By Emmanuel Chinonso

Technical Writer

Tailwind CSS is not really the first utility-first CSS framework, but it’s safe to say it’s the most popular among developers. Using this framework is not limited to only your HTML files. You can use them together with another programming framework.

In this tailwind tutorial, we are going to look at using Tailwind CSS in Vue. Vue.js is a popular front-end JavaScript framework. Developers can use this framework to create stunning web designs for their projects.

Table of Content

  • Prerequisite
  • Creating vue.js project
  • Tailwind CSS install
  • Configuring your tailwind file
  • Including Tailwind in your CSS
  • Building the project
  • Conclusion

Prerequisite

For you to follow along, you need to have the following requirement.

  • Knowledge of Vue
  • Knowledge of npm
  • Basic CSS knowledge
  • Basic JavaScript knowledge

At the end of this tailwind CSS tutorial, you will be able to install Tailwind CSS in VUE and create a simple modal. The tailwind CSS VUE modal will look like the image below.

Tailwind CSS in VueJS

Creating Vue.js project

Creating a Vue.js project is easy. If you have not created your project yet. you can do that by opening your terminal and writing the following command.

Code:

1npm init vite my-project

these commands will start Installing the VITE. You will be prompted to choose which framework to install. You will select VUE among the options presented.

Tailwind CSS in VueJS

Once you have chosen the framework you want to install, You can select the variant you wish to use, just like the image below.

Tailwind CSS in VueJS

After selecting the variant of your choice, the whole framework will install. You will see the image below on the terminal.

Tailwind CSS in VueJS

next step is to install the dependencies using npm

Code:

1npm install.

Tailwind CSS install

At this point, we are going to install Tailwind CSS on our Vue project

Code:

1npm install –D tailwindcss@latest postcss@latest autoprefixer@latest

Configuring your tailwind file

You will now have to configure some files to enable tailwind to work with the Vue project. The first thing is to generate the tailwind.config.js and postcss.config.js files by running the following code in the terminal.

Code:

1npx tailwindcss init –p.

The command above will create two files. The first file,‘tailwind.config.js will look like the code below.

Code:

1module.exports = {
2 purge: [],
3 darkMode: false, // or 'media' or 'class'
4 theme: {
5 extend: {},
6 },
7 variants: {
8 extend: {},
9 },
10 plugins: [],
11}
12 The second file is the postcss.config.js. It will already have the ‘tailwindcss’ and ‘autoprefixer’ configured and look like the code below.
13Code:
14module.exports = {
15 plugins: {
16 tailwindcss: {},
17 autoprefixer: {},
18 },
19}

Including Tailwind in your CSS

At this stage, we are going to include Tailwind CSS in our Vue project CSS file. Inside the src folder, we will create a CSS file and call it index.css. You can call it anything you want. Now, we will write the following code inside.

Code:

1@tailwind base;
2
3@tailwind components;
4@tailwind utilities;.

You can now save the file. Tailwind will swap the directives you have created to generate the styles based on the configuration design system.

You can now go ahead to make sure that the CSS is imported into the ‘src/your main.js’ file.

Code:

1import { createApp } from 'vue'
2
3import App from './App.vue'
4
5import './index.css'

Building the project

At this stage, we are going to now build a tailwind react modal to demonstrate that the Tailwind CSS is working. Below are codes we are going to write on our App.vue file.

Code:

1 <template>
2 <div>
3 <button class="bg-purple-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" v-on:click="toggleModal()">
4 Open regular modal
5 </button>
6 <div v-if="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
7 <div class="relative w-auto my-6 mx-auto max-w-3xl">
8 <!--content-->
9 <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
10 <!--header-->
11 <div class="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
12 <h3 class="text-3xl font-semibold">
13 Modal Title
14 </h3>
15 <button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()">
16 <span class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
17 ×
18 </span>
19 </button>
20 </div>
21 <!--body-->
22 <div class="relative p-6 flex-auto">
23 <p class="my-4 text-blueGray-500 text-lg leading-relaxed">
24 "if you don't have time to do it right , you must have time to do it over
25 </p>
26 </div>
27 <!--footer-->
28 <div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
29 <button class="text-purple-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" v-on:click="toggleModal()">
30 Close
31 </button>
32 <button class="text-purple-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" v-on:click="toggleModal()">
33 Save Changes
34 </button>
35 </div>
36 </div>
37 </div>
38 </div>
39 <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
40 </div>
41</template>
42
43<script>
44export default {
45 name: "regular-modal",
46 data() {
47 return {
48 showModal: false
49 }
50 },
51 methods: {
52 toggleModal: function(){
53 this.showModal = !this.showModal;
54 }
55 }
56}
57</script>

After this, you can now run npm run dev. Then our webpage will look like the image below.

Tailwind CSS in VueJS

Conclusion

We have successfully installed a tailwind CSS in our vue.js project. We also created a modal with Tailwind CSS to demonstrate that the Tailwind CSS Vue is working well.

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...