How to setup Tailwind CSS in Vue 3 - TechvBlogs

How to setup Tailwind CSS in Vue 3

This is a quick tutorial to show how tailwind can be configured in a fresh Vue 3 application.


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
 

1 month ago

Tailwind CSS is one of the newest and coolest utility libraries on the block, and it lets you build UI components with ease. Here’s a quick guide on how to set up Tailwind in your Vue 3 project.

Tailwind CSS isn't the first utility-first CSS library, but at the moment it is safe to say it's becoming the most popular among developers.

Installing Tailwind varies depending on your project's framework (React, Nuxt.js, Vue.js, Next.js, Gatsby, Laravel) making it available over a pretty wide range of frameworks which I think even makes it cooler!.

This is a quick tutorial to show how tailwind can be configured in a fresh Vue 3 application.

Create a new Vue app

Assuming npm is installed, make sure you have the vue cli installed too:

npm install -g @vue/cli

Next, create a new Vue project using the vue cli command:

vue create vue3-tailwind

Navigate to the project directory:

vue3-tailwind

Setup Tailwind CSS in Vue 3

Next, we’d need to install tailwind and its dependencies (PostCSS & auto-prefixer).

npm install -D [email protected] [email protected] [email protected]

Or using yarn:

yarn add --dev [email protected] [email protected] [email protected]

Note: if you’re faced with this error:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

You would need to install a different build of tailwind that supports PostCSS 7.

npm uninstall tailwindcss postcss autoprefixer
npm install -D [email protected]:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

Generate the Tailwind and post CSS configuration files.

npx tailwindcss init -p

Read Also: How To Install Vue 3 in Laravel 8 From Scratch

This will create two files in your root directory: tailwind.config.js and postcss.config.js. The Tailwind config file is where you add in customization and theming for your app. It is also where you tell Tailwind what paths to search for your pages and components. It looks something like this:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

We won’t go into explaining each of those properties; however, we need to update the "purge" property to include the path to our components and pages.

// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, create a folder called "styles", and within that folder, create an entry CSS file (app.css):

mkdir src/styles && touch src/styles/app.css

We’ll import Tailwind’s styles using the @tailwinddirective within our entry CSS file:

/* ./src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, import your entry CSS file into your entry Javascript file (main.js):

import { createApp } from 'vue';
import App from './App.vue';
import './styles/app.css'; // Here

createApp(App).mount('#app');

Spin up your server and start using Tailwind’s goodness in your Vue 3 application. Try updating the App.vue component like so:

<template>
  <div class="justify-center flex bg-yellow-300 items-center h-screen">
    <div class="text-4xl">
      Hello Vue 3 + Tailwind CSS
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

In the Last Step, Run Following Command to Start Application:

npm run serve

You can find all of Tailwind’s classes and options in the official documentation.

Thank you for reading this article.

Read Also: How To Optimize Laravel for Performance

If you want to manage your VPS / VM Server without touching the command line go and  Checkout this linkServerAvatar allows you to quickly set up WordPress or Custom PHP websites on VPS / VM in a  matter of minutes.  You can host multiple websites on a single VPS / VM, configure SSL certificates, and monitor the health of your server without ever touching the command line interface.

If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.

Comments (0)

ServerAvatar
Multiple sites on a single VPS/VM/Server Deploy PHP sites on cloud in minutes, simple as that!
ServerAvatar
Generate Free SSL Certificate - SSLForWeb

Generate Free SSL Certificate

  • 90-Day Certificates
  • SSL Monitoring
  • Wildcard Certificates
  • Multiple Domains
  • Certificate Management
  • Expiration Reminders

Comment


Note: All Input Fields are required.