Tailwind CSS 在微信开发者工具中不生效问题

现象

前端使用了Tailwind4开发网页应用H5，在原生浏览器和手机浏览器都生效，但是在微信开发者工具中，Tailwind的样式都不生效。

原因

Tailwind CSS默认使用了CSS的@layer功能，而微信开发者工具不支持@layer。

测试

在微信开发者工具中发现字体确实不是红色的。

<style>
    @layer test {
        .test-color {
            color: red;
        }
    }
</style>

<div class="test-color">测试文字</div>

解决

在全局导入Tailwind CSS时不使用@layer。

原始配置

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

修改后配置

不指定layer。

@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";

查看打包后结果

不使用 layer 的最终 CSS

/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-font-weight: initial
        }
    }
}

:root, :host {
    --spacing: .25rem;
    --font-weight-bold: 700
}

.visible {
    visibility: visible
}

.mt-2 {
    margin-top: calc(var(--spacing) * 2)
}

.flex {
    display: flex
}

.flex-1 {
    flex: 1
}

使用 layer 的最终 CSS

/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-font-weight: initial
        }
    }
}
@layer theme {
    :root, :host {
        --spacing: .25rem;
        --font-weight-bold: 700
    }
}
@layer base, components;
@layer utilities {
    .visible {
        visibility: visible
    }

    .mt-2 {
        margin-top: calc(var(--spacing) * 2)
    }
    
    .flex {
        display: flex
    }

    .flex-1 {
        flex: 1
    }
}