如何自定义Tailwind CSS实现grid-template-columns:25% 75%？

有几种直接可行的实现方式：

1. 使用任意值语法（推荐，Tailwind v3+） #

直接通过方括号语法定义自定义列宽，方括号内的内容会直接编译为grid-template-columns的属性值，空格用下划线_替代：

<div class="grid grid-cols-[25%_75%]">
  <div>左侧25%宽度区块</div>
  <div>右侧75%宽度区块</div>
</div>

2. 自定义可复用工具类 #

如果这个布局需要重复使用，可在tailwind.config.js中扩展主题配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      gridTemplateColumns: {
        '25-75': '25% 75%',
      },
    },
  },
  plugins: [],
}

配置完成后，即可直接使用自定义类名：

<div class="grid grid-cols-25-75">
  <div>左侧25%宽度区块</div>
  <div>右侧75%宽度区块</div>
</div>

3. 内联样式（临时场景） #

若只是临时使用该布局，也可以直接添加内联样式：

<div class="grid" style="grid-template-columns: 25% 75%;">
  <div>左侧25%宽度区块</div>
  <div>右侧75%宽度区块</div>
</div>

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