自动生成 Tailwind 类并将它们用作变量

Question

Tailwind 的新手，正在寻找一种自动生成 mat-table 列 sice 的方法。现在我正在使用这样的东西：

$mat-table-col-width: 8;

mat-table {
        mat-header-cell.colTiny,
        mat-footer-cell.colTiny,
        mat-cell.colTiny {
            flex: 0 0 #{$mat-table-col-tiny-width}rem;
        }
}

现在我宁愿生成不同的尺寸，例如col-w-1, col-w-2, col-w-3 等等 pp.. 如何使用 tailwind.config.js 做到这一点？使用自定义模板，我从不需要修改任何东西。

尺寸也可以作为变量导出吗？因为我需要计算实际的最小宽度：

min-width: #{($mat-table-col-tiny-width * 3) + ($mat-table-col-width * 5)}rem;

谢谢！

Answer 1

expose their values as scss

如果您正在与混合使用 Tailwind 和 Sass 的团队合作，请四处询问首选方法。否则，请考虑将范式转变为在 Tailwind / JS 中完成所有这些工作。详情如下。

generate automatically [flex and min-width] sices

(A) 最简单的是在 Tailwind 配置中定义 flex classes 和 min-width classes:

flex: {
  tiny: '0 0 1rem',
  sm: '0 0 2rem',
  md: '0 0 3rem',
  lg: '0 0 4rem',
},
minWidth: {
  tiny: '1rem',
  sm: '2rem',
  md: '3rem',
  lg: '4rem',
},

Fiddle: https://play.tailwindcss.com/K9lWFOj3xU?file=config

这给了你

.flex-tiny {
  flex: 0 0 1rem
}

.flex-1 {
  flex: 0 0 2rem
}

.flex-2 {
  flex: 0 0 3rem
}

.flex-3 {
  flex: 0 0 4rem
}

.min-w-tiny {
  min-width: 1rem
}

.min-w-1 {
  min-width: 2rem
}

.min-w-2 {
  min-width: 3rem
}

.min-w-3 {
  min-width: 4rem
}

(B) 您可以重构它以重用值，起点类似于

const sizes = {
  tiny: '1rem',
  sm: '2rem',
  md: '3rem',
  lg: '4rem',
}

module.exports = {
  theme: {
    extend: {
      flex: /* …manipulate `sizes` to give the desired object… */,
      minWidth: sizes,
    },
  },
}

具有相同的 CSS 结果。

generate a range of own custom classes

(C) 如果您必须有 class 不属于 Tailwind 的名称（col-w-… 而不是 flex-… for flex classes) 你必须写一个插件。如果您的插件引用配置（文档：https://tailwindcss.com/docs/plugins#referencing-the-user-s-config），您最终可能会得到类似

的设置

module.exports = {
  theme: {
    extend: {
      mySizes: {
        tiny: 1,
        sm: 2,
        md: 3,
        lg: 4,
      },
    },
  },
  plugins: [
    // a plugin that generates
    // `.col-w-<name> { flex: 0 0 <val>rem }`
    // and `.minwidth-<name> { min-width: <val>rem }`
    // rules from the `mySizes` config
  ],
}

pretty new to Tailwind

我建议尝试提交 A 或 B 以启动并根据需要更新您的标记，以了解使用由核心插件生成的 classes 的 Tailwind 习惯用法。

自动生成 Tailwind 类并将它们用作变量

Automatically generating Tailwind classes and use them as variables

tailwind-css

自动生成 Tailwind 类 并将它们用作变量

Automatically generating Tailwind classes and use them as variables

tailwind-css

自动生成 Tailwind 类并将它们用作变量