在启用Tailwind的Next.js全局CSS中如何使用媒体查询？

• 问题根源：你的媒体查询存在语法错误，max-width: 500缺少长度单位，浏览器无法识别无单位的数值，直接导致该媒体查询规则完全不生效。

修正后的globals.css代码 #

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background-color: white;
    margin: 50px 0;
    overflow-x: hidden;
}

/* 补充px单位，修复媒体查询 */
@media screen and (max-width: 500px) {
    body {
        background-color: black;
        margin: 50px 0;
        overflow-x: hidden;
    }
}

针对Markdown标签的响应式样式处理 #

如果要给渲染后的Markdown专属标签（如<p>、<h1>、<pre>等）添加响应式样式，直接在globals.css中写对应选择器+媒体查询即可，示例：

/* 假设Markdown内容包裹在class为markdown-container的容器中 */
@media screen and (max-width: 768px) {
    .markdown-container h2 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    .markdown-container code {
        padding: 0.125rem 0.25rem;
        font-size: 0.875rem;
    }
}

额外注意事项 #

• 确保自定义CSS代码写在@tailwind base/components/utilities指令之后，这样自定义样式的优先级才会高于Tailwind的基础样式。
• 如果遇到Tailwind内联样式覆盖自定义CSS的情况，可通过给自定义选择器增加权重（比如添加父级类名）解决，尽量避免使用!important。

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