vue3、react和taro/react（h5和小程序）配置tailwindCSS

难点：不太会

知识点：在vite中配置tailwindCSS，tailwindcss中文文档
1.先说vue3和react的，先安装依赖，我喜欢用pnpm，各位随意

pnpm install -D tailwindcss postcss autoprefixer

2.生成相关文件

npx tailwindcss init -p
// 会生成2个文件
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3.修改tailwind.config.js中的content

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

4.在main.js中引入css，这里可以单独创建一个css去引入(taro中是app.js)

import "tailwindcss/tailwind.css"

5.测试一下，加了一个白底的圆角背景(taro中换成View)

<p class="p-3 mx-auto text-[#3a5fa3] text-center rounded-3xl bg-white my-3 text-2xl">
    孩子档案
</p>

6.有n多玩法，比如给样式增加一个 !important和弄个全局主题色，可以自己琢磨，有好的玩法也可以推荐给大家

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html",'./src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  important: true,
  plugins: [],
  theme: {
    extend: {
      colors: {
        "primary-color": "var(--primary-color)",
        "secondary-color": "var(--secondary-color)"
      },
    },
  },
}

7.说下在taro/react中怎么配置，H5和以上的通用，微信小程序在上面基础上，找到config/index.js文件添加下面配置

由于我项目只有两端，只举例了微信小程序和H5的配置，其他端自行配置

pnpm install -D weapp-tailwindcss

// 微信小程序
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack');

const config = {
  // 你的其他配置...
  mini: {
    // 你的其他配置...
    webpackChain(chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{
              appType: 'taro'
            }]
          }
        }
      });
      chain.performance.hints(false); // 关闭taro中的性能提示
    },
  },
}

8.顺便说说uni接入tailwindCSS一直失败，索性就不用了（**想吐槽几句），换成unocss它不香吗？这个也兼容tailwindCSS的class，有兴趣的可以看我写的其他端接入unocss，大家可以多提提意见

hbx/uni3/vite/微信小程序 接入unocss

react 接入 unocss 

微信原生小程序接入 unocss