为什么尾风 ui 在 vue 中没有正确呈现？

Question

我已经根据 tailwindcss.com 中的文档在 laravel 中使用 vue 安装了 tailwind。但它呈现如下 -

为什么？

配置：

1. 使用命令安装 tailwindcss

npm install -D tailwindcss
npx tailwindcss init

2)在tailwind.config.js添加

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3)在input.css添加

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 对于额外的插件运行这个命令

npm install @headlessui/vue @heroicons/vue

在 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

尝试使用 PostCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

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

Answer 2

关于tailwind.config.js：

module.exports = {
    purge: 
        "./src/**/*.html",
        "./src/**/*.vue",
        "./src/**/*.jsx",
    ],
    //
};

只是在purge中添加了那些，之后，vue正确渲染，我认为问题是我们没有在顺风配置中包含vue。