vue3集成tailwind css，配置不生效问题解决记录参照官方文档，集成tailwind css 到vite 创建

本文记录了我在vite 创建的vue3项目中，集成tailwind css遇到的配置不生效并如何解决的过程。供自己复习并为遇到相同问题的同学提供借鉴。

发生了什么？

参照官方文档tailwind css 如何集成到vite 创建的vue3项目中，我在项目中对tailwind css 插件进行了安装与配置。但是测试后发现，为dom 元素添加class 类名后并未如预期生效。对照官方文档，我仔细检查了每一个操作步骤，并没有发现有任何安装配置问题。

怎么解决的？

通过进一步的检查发现，执行文档中如下命令时，会在项目中安装postcss依赖包，并且自动生成一个postcss.config.js 的配置文件，在该配置文件中，包含了对 tailwindcss、autoprefixer两个插件的配置项。

tailwind css 安装命令：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

以下为自动生成的postcss.config.js配置文件内容：

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

进一步检查项目vite.config.js 文件（以下简称配置文件）配置项时发现，之前为了引入postcss-px-to-viewport-8-plugin 插件，已经对配置文件中的css.postcss 的plugins选项进行过配置，猜想两套配置存在冲突才导致的问题。

为了进一步验证猜想，我将配置文件中的css.postcss.plugins选项中的内容合并到postcss.config.js 文件中，并将配置文件中的postcss 配置项全部注释后，发现tailwind css 功能正常了。

查阅vite官方配置文档后，了解到配置文件中如果提供了css.postcss该内联配置，Vite 将不会搜索其他 PostCSS 配置源。也就是说，在我没做改动前，项目构建读取的是配置文件中的配置内容，postcss.config.js文件对tailwind css 、autoprefixer插件的配置并未生效。至此，问题得到了解决。合并后的postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        'postcss-px-to-viewport-8-plugin': {
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 1920, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            exclude: [],
            landscape: false // 是否处理横屏情况
        }
    },
}

拓展补充

使用vite创建的vue项目，内部已经集成了对postcss的支持，并且支持两种配置方式，一种是在vite.config.js 配置文件中对css.postcss进行配置（内联配置），另外一种是在postcss.config.js 中配置。内联的 POSTCSS 配置，它期望接收与 postcss.config.js 一致的格式。但对于 plugins 属性有些特别，只接收使用数组格式。

基于以上结论，我们还可以在vite.config.js文件中进行配置：

{
... ,
css: {
            postcss: {
                plugins: [
                    require("tailwindcss"),
                    require("autoprefixer"),
                    postcsspxtoviewport({
                        unitToConvert: 'px', // 要转化的单位
                        viewportWidth: 1920, // UI设计稿的宽度
                        unitPrecision: 6, // 转换后的精度，即小数点位数
                        propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
                        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
                        selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
                        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                        replace: true, // 是否转换后直接更换属性值
                        // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
                        exclude: [],
                        landscape: false // 是否处理横屏情况
                    })
                ]
            }
        },
}

通过配置试验发现，在vite.config.js 文件中内联配置postcss,不需要单独安装postcss插件,配置也能生效。但是，如果通过postcss.config.js 文件进行配置，则需要单独安装postcss插件才能生效。

为什么呢？为什么呢？为什么呢？

建议遵循tailwind css官方文档推荐配置方式（即：通过postcss.config.js）进行配置。对象格式配置插件，方便后期对插件更细粒度的配置。