TailwindCSS v4自定义断点添加与使用：部分样式不生效

你的自定义断点定义是正确的，xxl:flex-row样式实际上已经生效——之所以看起来没效果，是因为容器内只有一个子元素<h1>，flex布局下单个子元素在flex-col和flex-row中的视觉表现几乎一致（子元素都会占满容器宽度），导致你误以为样式未生效。

验证方法 #

添加多个子元素就能看到明显区别，比如修改你的HTML结构：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";

@theme {
  /* Define breakpoints for responsive design */
  --breakpoint-xxl: 1380px;
}
</style>

<div class="flex flex-col justify-center xxl:flex-row xxl:justify-start xxl:bg-red-900 gap-3 p-4">
  <h1>Hello World</h1>
  <h1>Another Item</h1>
</div>

当屏幕宽度超过1380px时，两个<h1>会从垂直排列（flex-col）切换为水平排列（flex-row），同时背景色变为红色，这样就能直观验证flex-row的响应式效果。

补充说明 #

在Tailwind CSS v4中，通过@theme自定义断点的写法是完全合规的，所有响应式工具类都会自动适配你定义的新断点。如果后续遇到类似“部分样式生效部分不生效”的情况，可以先检查：

• 屏幕宽度是否确实达到了断点阈值
• 样式是否因为视觉表现不明显而被误判未生效
• 工具类的语法是否正确（比如是否拼写错误）

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