Tailwind响应式宽度规则未生效问题排查求助

我有一个带多档响应式宽度设置的div：

<div class="flex flex-row sm:w-full lg:w-1024 xl:w-1400">

无论屏幕宽度如何，始终只有sm:w-full生效。查看Tailwind生成的CSS，发现：

@media (min-width: 640px) {
  .sm\:w-full {
    width: 100%;
  }
}

但lg或xl对应的媒体查询块里没有对应的宽度规则，比如lg块只有：

@media (min-width: 1024px) {
  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

其他响应式规则（比如网格组件）正常工作：

div("grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-screen")

对应的md和xl网格列规则在生成的CSS中存在。附上我的Tailwind配置：

module.exports = {
    darkMode: "class",
    content: [
        "./src/**/*.kt",
        "./build/js/node_modules/flowbite/**/*.js"],
    theme: {
        extend: {
            colors: {
                primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a" }
            },
            fontFamily: {
                'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
                'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
                'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
            },
            minWidth: {
                'kanban': '19rem'
            },
            textDecoration: ['active'],
            transitionProperty: {
                'width': 'width'
            },
        }
    },
    plugins: [
        require('./build/js/node_modules/flowbite/plugin')
    ]
}

问题出在lg:w-1024和xl:w-1400这两个类上：Tailwind的默认width主题里并不包含1024和1400这两个数值，且你也没有在配置文件的theme.extend.width中扩展这两个宽度值。Tailwind的JIT模式只会生成配置中存在、且在指定content文件里出现过的类，所以这两个宽度类不会被编译到最终CSS里。

而网格组件能正常生成响应式规则，是因为grid-cols-1、grid-cols-2这些是Tailwind默认支持的网格列数值，JIT模式会正常生成对应的类。

方法一：扩展Tailwind宽度主题 #

在Tailwind配置的theme.extend中添加width属性，把需要的1024、1400宽度值加进去（注意带上单位，比如px）：

module.exports = {
    darkMode: "class",
    content: [
        "./src/**/*.kt",
        "./build/js/node_modules/flowbite/**/*.js"],
    theme: {
        extend: {
            // 新增width扩展
            width: {
                '1024': '1024px',
                '1400': '1400px'
            },
            colors: {
                primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a" }
            },
            fontFamily: {
                'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
                'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
                'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
            },
            minWidth: {
                'kanban': '19rem'
            },
            textDecoration: ['active'],
            transitionProperty: {
                'width': 'width'
            },
        }
    },
    plugins: [
        require('./build/js/node_modules/flowbite/plugin')
    ]
}

修改后重新编译Tailwind，lg:w-1024和xl:w-1400对应的媒体查询规则就会正常生成。

方法二：使用任意值语法 #

如果只是临时需要这两个宽度值，也可以直接用Tailwind的任意值语法，不需要修改配置文件：

<div class="flex flex-row sm:w-full lg:w-[1024px] xl:w-[1400px]">

JIT模式会直接生成对应的宽度类。

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