1、tailwind.config.js 配置参考

module.exports = {mode: "jit", // 3.0以上可不用配置，默认该模式，无法关闭// important: true, // 所有的样式加上important, 这个不建议，因为有时候外部修改内部样式时，应按照外部样式优先，使用 !, 如果加了这个，优先级就按照tailwind文档定义顺序来content: ["./src/**/*.tsx", // src 下面所有的tsx文件，下面component的不生效是写错路径了， /**/ 表示子所有后代// './src/pages/**/*.tsx',// './src/components/**/*.tsx',// './src/layouts/**/*.tsx',],theme: {extend: {// 这里定义的顺序不代表最后css文件class的顺序，看实际情况是按字母排序的，即 c1会在blue之后，同时存在的话会以c1为准colors: {c1: "#333333",c2: "#555555",c3: "#999999",blue: "#4078F6","blue-hover": "#75A5F2","blue-c1": "#75A5F2","blue-c2": "#DDE9FD","blue-c3": "#F1F4FC",red: "#F56E6E",green: "#08C6B9",gray: "#dddddd",green: "#08C6B9",yellow: "#FCA74B",},/*** 批量生成配置， 使用示例： w-card-auto3 、 !w-card-auto3*/width: [3, 4].reduce((obj, current) => {const calcStr = `calc((100% - ${16 * (current - 1)}px) / ${current})`;obj[`card-auto${current}`] = calcStr;return obj;}, {}),},},/* 解决tailwindcss与antd冲突，Button按钮透明 */corePlugins: {preflight: false,},
};

JIT：3.0可不用配置，默认就是该模式，无法关闭。 按需加载样式，定义在extend中的样式也一样，没被用到，不会加载。另外，如果在一个页面中，有动态计算的样式，会因为在编译阶段没有该样式导致不生效;

2、tailwind.css 配置

@tailwind base;
@tailwind components;
@tailwind utilities; /* 或者
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
*/

3、动态生成css类名

这里的需求是：显示卡片个数根据页面宽度自适应，1600及以上显示4个，以下显示3个。
解决方法：

1、less 动态计算: each 或者 for 函数 —— （推荐方式）

/** each 示例： 均分卡片，局限： 每次多个一行显示数量就要新增range */
@range: 3,4;
each(@range,{.card-auto@{value}{width: calc(~'(100% - 16px * (@{value} - 1)) / @{value}') !important;/***用上面的转义形式，下面这种写法，偶尔100%取值有问题，取的不是父级宽度，导致整个页面被拉的很宽，但有时又是好的，没找到原因？？width: calc((100% - 16px * (@value - 1)) / @value) !important; */}
});/** for 示例，生成4个，默认从3开始 */
.gen-range(4);
.gen-range(@n, @i: 3) when (@i =< @n) {.card-auto@{i}{width: calc(~'(100% - 16px * (@{i} - 1)) / @{i}') !important;}.gen-range(@n, (@i+1));
}

const cfgArr = [{ minWidth: 1920, num: 4 },{ minWidth: 1660, num: 3 },
],// 根据当前页面宽度，和上面的配置信息，生成当前卡片显示数量
const getShowCardNum = () => {const width = document.body.clientWidth;let num = 4;for (let i = 0; i < slideCfgArr.length; i++) {const item = slideCfgArr[i];if (width >= item.minWidth) {num = item.num;break;}// 最后一个没有匹配上就按最后一个来if (i === slideCfgArr.length - 1 && width < item.minWidth) {num = item.num;}}return num
}
// 卡片样式，均分宽度： 动态css，num 为显示数量，取值 3或者4
// 通过css module方式，不会造成全局污染，且num可任意变化，只要@range中有这个值
const cardClassName = styles[`card-auto${num}`];

2、媒体查询 @media， 通过css来计算宽度；

缺点：后续如果有新增，需要增加新的media规则。该实现样式，导致组件在哪里使用都是一样的规则，无法定制。

3、js动态计算css className，通过tailwindcss批量生成配置，从而获得对应css样式
。这个最大问题在于只能是非JIT模式， 在JIT模式下动态定义的样式不会解析出来。

在JIT模式下，如果样式可预见，可以在某个页面处固定写死那些动态生成的classname， 触使它解析。

// cardClassName 添加 important 覆盖之前的定义
const cardClassName = `!calc((100%-16px*${num-1}/${num-1})`;
<div className={`w-[calc((100%-32px)/3)] w-[calc((100%-32px)/3)] ${cardClassName}`}></div>

4、配置了qiankun后，@layer不解析了

??