如何在tailwind.config.js中生成mat-table列宽类并导出为可用变量

1. 配置tailwind.config.js #

直接通过Tailwind插件能力生成动态col-w-*类，同时导出全局变量用于宽度计算：

const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
// 列宽基础配置，可按需调整数值
const COL_WIDTH_UNIT = 0.5; // 1单位对应0.5rem=8px，适配你原有的8px基础单位设定
const COL_TINY_WIDTH = 2; // 对应原colTiny类的宽度，2*0.5rem=16px，可自行调整

module.exports = {
  // 保留你原有的content扫描规则
  content: ["./src/**/*.{html,ts,scss}"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function({ matchUtilities, addBase }) {
      // 动态生成col-w-1到col-w-20的工具类
      matchUtilities(
        {
          'col-w': (value) => ({
            flex: `0 0 ${value}rem`,
            minWidth: `${value}rem`,
            maxWidth: `${value}rem`,
          })
        },
        {
          values: Array.from({length: 20}, (_, i) => i + 1).reduce((res, num) => {
            res[num] = num * COL_WIDTH_UNIT;
            return res;
          }, {})
        }
      )

      // 兼容原有colTiny类，同时新增col-tiny语义化类
      addBase({
        '.colTiny, .col-tiny': {
          flex: `0 0 ${COL_TINY_WIDTH * COL_WIDTH_UNIT}rem`,
          minWidth: `${COL_TINY_WIDTH * COL_WIDTH_UNIT}rem`,
          maxWidth: `${COL_TINY_WIDTH * COL_WIDTH_UNIT}rem`,
        },
        // 导出全局CSS变量，方便样式文件中计算
        ':root': {
          '--col-width-unit': `${COL_WIDTH_UNIT}rem`,
          '--col-tiny-width': `${COL_TINY_WIDTH * COL_WIDTH_UNIT}rem`,
        }
      })
    })
  ]
}

提示：如果需要更多尺寸，可修改Array.from({length: 20}中的数值调整生成范围。

2. 变量使用方式 #

模板中直接使用类 #

<mat-header-cell class="col-tiny">序号</mat-header-cell>
<mat-header-cell class="col-w-2">姓名</mat-header-cell>
<mat-header-cell class="col-w-5">详情</mat-header-cell>

宽度计算 #

CSS/SCSS中计算

直接用全局CSS变量即可：

mat-table {
  // 对应你示例的3个tiny列+5个常规列的最小宽度计算
  min-width: calc(var(--col-tiny-width) * 3 + var(--col-width-unit) * 5);
}

JS/TS中计算

直接从配置文件导出常量使用：

import { COL_WIDTH_UNIT, COL_TINY_WIDTH } from '../tailwind.config';

const tableMinWidth = `${(COL_TINY_WIDTH * 3 + 5) * COL_WIDTH_UNIT}rem`;

内容的提问来源于stack exchange，提问作者tris