tailwind 的 @screen 仅在 tailwind.config.js 中生效，css 文件中需用原生 @media；自定义断点应通过 extend.screens 配置或插件 addutilities 实现，且须手动处理变体与转义。
不能在 CSS 文件里直接写 @screen，它根本不会编译成任何样式——Tailwind 的 @screen 只在 tailwind.config.js 里起作用，是构建时的配置指令，不是 CSS 规则。
直接用原生 @media 最可靠
如果你只是想加一段自定义断点逻辑（比如针对打印、或某个特定宽度区间），最简单的方式就是跳过 Tailwind，直接写原生媒体查询：
- 放在
@layer utilities或@layer components里都行，只要不嵌套在其他规则中 - 断点值建议用变量或硬编码像素值，别依赖
theme('screens')—— 那个只在 JS 插件里可用 - 注意：这类 CSS 不会自动获得响应式前缀（如
md:），也不参与 Tailwind 的类名生成流程
@layer utilities {
@media (min-width: 992px) and (max-width: 1199px) {
.tablet-only:bg-red-50 {
background-color: #fef2f2;
}
}
}
在 tailwind.config.js 中扩展 screens 并使用前缀类
想让自定义断点像 md:text-center 那样用，必须走配置路线。但要注意：配置错位置或格式，对应类名压根不会生成。
- 必须写在
theme.extend.screens下，而不是theme.screens—— 后者会覆盖默认断点，导致sm:、lg:全部失效 - 键名要合法（推荐用字符串，如
'tablet'），值必须是像素值字符串（'992px'）或对象（{ min: '992px', max: '1199px' }） - 配置后，类名前缀就是你定义的键名，比如
tablet:bg-red-50，冒号要转义为tablet:bg-red-50才能在addUtilities中安全使用
module.exports = {
theme: {
extend: {
screens: {
'tablet': { min: '992px', max: '1199px' }
}
}
}
}
用插件 + addUtilities 手动注册带媒体查询的类
需要动态生成多个响应式变体（比如为每个自定义断点都加一套 .text-gradient 类），就得靠插件。但这里极易出错：
-
addUtilities参数必须是扁平对象，不能把'@media (min-width: 992px)'当 key 直接塞进去——Tailwind 会忽略整条 - 正确做法是手动拼出带前缀的类名，比如
'tablet\:text-gradient'（双反斜杠转义冒号），再把它作为 key - 媒体查询逻辑得自己写进 value 里：
{ '@media (min-width: 992px)': { ... } } - 主题色等值必须用
theme()函数取，不能写$blue-500或硬编码
const plugin = require('tailwindcss/plugin')
module.exports = plugin(function({ addUtilities, theme }) {
addUtilities({
'.text-gradient': {
background: `linear-gradient(to right, ${theme('colors.blue.500')}, ${theme('colors.purple.500')})`,
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent'
},
'tablet\:text-gradient': {
'@media (min-width: 992px)': {
background: `linear-gradient(to right, ${theme('colors.green.500')}, ${theme('colors.teal.500')})`,
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent'
}
}
})
})
真正容易被忽略的是：所有自定义媒体查询类，无论用哪种方式加，都不会自动继承 hover、focus 或 dark 变体——这些必须手动展开写，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
