Tailwind CSS in Vue

Hello hivers !!!

For vue developers i would like to showcase another Vue UI Framework to use in your projects :D.

Tailwind CSS is one of the newest, and coolest kids on the block. As a Utility library, Tailwind lets you build UI components with ease. Here’s a quick guide on setting up tailwind in your Vue 3 project.

First, generate a Vue 3 project using the vue-cli:

vue create my-awesome-app

Navigate to the project directory:

cd my-awesome-app

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

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

Generate the Tailwind and post CSS configuration files.

npx tailwindcss init -p

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: ['./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 tailwind directive within our entry CSS file.

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

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

import { createApp } from 'vue';
import App from './App.vue';
import './styles/index.css'; 
createApp(App).mount('#app');

Turn your server and 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 im using tailwind and its css class :D  </div>  </div></template>export default {  name: 'App',};</script>

Thanks for reading and hopefully you find my posts useful to find good ui frameworks for vue to use :D

Tailwind CSS in Vue | Ecency