Why tailwind ui not rendered correctly in vue? - vue.js

Question

I have installed tailwind according to the documentation in tailwindcss.com with vue in laravel. But its rendered like this below -
Why ?
Configuration:
Installed tailwindcss using commands
npm install -D tailwindcss
npx tailwindcss init
2)In tailwind.config.js added
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
3)In input.css added
#tailwind base;
#tailwind components;
#tailwind utilities;
For extra plugins ran this command
npm install #headlessui/vue #heroicons/vue
In main.js:
import { createApp } from 'vue'
import store from './store'
import App from './App.vue'
import './input.css'
createApp(App)
.use(store)
.mount('#app')

Answer 1

Try using PostCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
https://tailwindcss.com/docs/installation/using-postcss

Answer 2

on tailwind.config.js:
module.exports = {
purge:
"./src/**/*.html",
"./src/**/*.vue",
"./src/**/*.jsx",
],
//
};
it's simply adding the ones in the purge, after that, the vue is rendered properly, I think that the problem is that we haven't included vue on the tailwind configuration.

Answer 3

There are two tailwind.config.js files, one at the project level and the other at the vue directory. Copy and paste the following at the vue directory level
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{html,js,vue,js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [
require('#tailwindcss/forms')
],
}