screen 指令仅在 tailwind.config.js 的 theme.screens 中配置生效，用于构建时生成响应式工具类（如 md:text-center），不能在 css 文件中直接使用 @screen；需用原生 @media 或扩展 screens 配置。
Screen 指令不是 CSS 函数，它只在 Tailwind 的配置和类名中起作用
你不能在自定义 CSS 里写 @screen sm 然后期望它自动编译成媒体查询——Tailwind 的 @screen 是一个仅限于 tailwind.config.js 中的 配置时指令，它本身不输出 CSS，也不支持在 .css 文件里直接使用。常见错误是复制文档里的 @screen md { ... } 到自己的样式表里，结果完全没生效。
真正起作用的是：Tailwind 在构建时读取 theme.screens，然后为每个断点生成带前缀的工具类（比如 md:text-center），这些类内部才包含实际的媒体查询。
如果你需要手写媒体查询，有且只有两种可靠方式：
- 直接用原生
@media (min-width: 768px)（推荐，语义清晰、可控性强） - 在
tailwind.config.js的theme.extend.screens里新增断点，再用对应前缀类（如xl:flex-row）
如何在 tailwind.config.js 中正确配置 screens 并让类名生效
配置错位置或格式会导致类名不生成。必须确保：
-
screens放在theme下，不是extend外层（除非你用extend.screens） - 值必须是对象，键是断点名（如
sm），值是字符串（"640px"）或对象（{ min: "640px" }） - 改完配置后需重启构建进程（
npm run dev或pnpm build）
示例正确配置：
module.exports = {
theme: {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
}
}
}
之后才能用 md:hidden、lg:grid 这类类名——它们不是“调用”@screen，而是构建时静态生成的产物。
想复用 Tailwind 断点数值？别硬记，从配置里导出
你在 JS 或 CSS 中需要 768px 这个值时，不要手动抄写，否则配置一改就脱节。Tailwind 不提供运行时 API，但你可以自己导出：
新建 src/tailwind-screens.js：
const { screens } = require('../tailwind.config.js').theme
module.exports = {
sm: screens.sm,
md: screens.md,
lg: screens.lg,
xl: screens.xl,
}
然后在组件里导入使用：import { md } from './tailwind-screens.js'，再传给 @media (min-width: ${md})（注意：需配合 CSS-in-JS 或构建时替换）。
纯 CSS 场景下，更简单的方式是直接查 tailwind.config.js，复制数值——毕竟断点极少变动，硬编码反而更稳定。
为什么 @layer 和 @screen 一起用会失效
有人试图这样写：
@layer components {
.card {
@screen md {
padding: 1rem;
}
}
}
这不会工作。@screen 只能在 tailwind.config.js 的 screens 配置中声明，它不是 PostCSS 插件支持的通用指令。上面代码会被忽略，或者报错（取决于 PostCSS 版本）。
正确做法是：要么用原生 @media 包裹，要么把样式拆成响应式工具类组合（如 md:p-4），后者才是 Tailwind 的设计意图。
真正容易被忽略的是：Tailwind 的响应式能力本质是「类名映射」，不是「运行时媒体查询注入」。一旦脱离类名体系，就得回归标准 CSS 方案——这点不理解，就会反复踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
