install tailwindcss

Estimated reading: 1 minute 126 views

				
					npm install -D tailwindcss postcss autoprefixer

tailwind.cofig.js

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

postcss.config.js

				
					module.exports = {
    plugins: {
      tailwindcss: {
        config: './tailwind.config.js'
      }
    }
  }

style.css

				
					@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

main.js

				
					import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

package.json

				
					{

 <!--some depencesies hire ,--> ,

  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "autoprefixer": {}
    }
  }
  }

Finally

				
					<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

install tailwindcss

tailwind.cofig.js

postcss.config.js

style.css

main.js

package.json

Finally

Tailwind Css Setup

Tailwind Css FlexBox