[Vuejs]-Why tailwind ui not rendered correctly in vue?

Try using PostCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

https://tailwindcss.com/docs/installation/using-postcss

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.

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')
  ],


}