Vuejs How to Add TailwindCSS in Your Application

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

npm add -D sass

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

/* Tailwind base */
@tailwind base;
@tailwind components;
@tailwind utilities;

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-bold;
  font-family: "Merriweather", serif;
}

h6 {
  @apply text-xs;
}
h5 {
  @apply text-xs;
}
h4 {
  @apply text-sm;
}
h3 {
  @apply text-base;
}
h2 {
  @apply text-2xl;
}
h1 {
  @apply text-3xl;
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  width: 0px;
  height: 0px;
}

import { createApp } from "vue";
import "./assets/scss/global.scss";
import App from "./App.vue";

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