如何在Tailwind CSS中实现超过6的行跨度（row-span）？

问题背景 #

在使用Tailwind创建网格布局时，需要让元素的行跨度（row-span）大于默认最大的6，但直接使用row-span-8这类类名不生效，且现有配置未解决问题。你的网格容器为grid grid-cols-12 grid-rows-10 gap-4 h-screen，目标元素需要row-span-8。

核心问题 #

你当前的tailwind.config.js错误扩展了gridRow属性，但Tailwind的row-span-*类对应的是**gridRowSpan**属性，所以配置未生效。

解决方案 #

1. 正确扩展gridRowSpan（推荐） #

修改tailwind.config.js，在theme.extend中添加gridRowSpan扩展，按需添加需要的行跨度值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'image' : "url('/img/BackgroundImage.png')",
      },
      gridRowSpan: {
        7: '7',
        8: '8',
        9: '9',
        10: '10', // 对应你的grid-rows-10最大跨度
      }
    },
  },
  plugins: [],
}

修改后重启Tailwind开发服务，即可直接使用row-span-8类名。

2. 使用任意值语法快速实现 #

无需修改配置，直接通过方括号语法指定任意跨度值：

<div className="col-span-6 row-span-[8] text-white col-start-4 row-start-2 bg-black" >10</div>

适合临时或特殊场景的需求。

3. 手动控制row-start和row-end #

利用网格的起始和结束线来控制跨度，你的网格是10行，要从第2行跨到第10行（共8行）：

<div className="col-span-6 row-start-2 row-end-10 text-white col-start-4 bg-black" >10</div>

row-end-10表示元素结束于第10条网格线，刚好覆盖8行区域。

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