tailwindcss 使用

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不解析了

??