官网：tailwindcss官网

在使用tailwindcss过程中，安装成功，但是页面不生效，现在问题已解决。整理一下步骤。

1、安装

通过 npm 安装 tailwindcss，然后创建你自己的tailwind.config.js 配置文件

npm install -D tailwindcss
npx tailwindcss init    

2、在 tailwind.config.js 配置文件中添加所有模板文件的路径

tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {preflight: false}// 关闭默认样式}
}

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

3、新建一个tailwind.css如下

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

4、在main.js中引入以上的tailwind.css文件

import "./assets/styles/tailwind.css"

5、vite.config.js

这一步很重要，我没有添加这两个解析，所以页面一直没有生效。
解析：
require(‘tailwindcss’): 引用Tailwind CSS插件，表示PostCSS应该使用Tailwind CSS。Tailwind CSS 是一个功能类优先的 CSS 框架，使得开发者可以通过在HTML元素上应用特定的类来快速构建设计。
require(‘autoprefixer’): 引用Autoprefixer插件，表示PostCSS应该使用Autoprefixer。Autoprefixer 是一个后处理程序，它可以自动添加浏览器厂商前缀到CSS规则里，以确保跨浏览器的兼容性。

原文链接：https://blog.csdn.net/weixin_50572526/article/details/135813705