tailwindcss的安装和使用-按照官网安装不生效的问题

在使用 tailwindcss 的时候，按照官网的教程按照依赖和配置是不是会遇到不生效的情况？ 正确的流程是：

1、按照所需依赖 tailwindcss postcss aotoprefixer

npm install -D tailwindcss postcss autoprefixer

2、执行命令生产依赖文件： 官网提供的是没有 -p

npx tailwindcss init -p

执行完后会在项目根目录下生成 tailwind.config.js 和 postcss.config.js 俩个文件；

tailwind.config.js

'content: ['./src/**/*.{vue,js}'], 配置项目中受作用的文件类型

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

3、在你的项目中创建公共的 css文件，copy如下引入到文件中；

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

4、重启项目，随便创建一个元素测试一下；

  <template>
  <div class=" w-[100px] h-[100px] bg-black">
    <span class=" text-cyan-50">欢迎使用 tailwindcss</span>
  </div>
</template>

5、现在可以愉快的使用了