如何在Tailwind CSS+Next.js中为h1设置不同设备的自定义字号？

给你两种直接可行的方案，选你顺手的来：

方案一：直接用全局CSS覆盖（和你之前的写法最接近） #

在项目的全局CSS文件（比如app/globals.css）里，用Tailwind的@layer base指令包裹样式，避免被框架清除机制删掉，同时和Tailwind样式兼容：

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

@layer base {
  /* 桌面端（1440px及以上）的h1字号 */
  h1 {
    font-size: 46px;
  }

  /* 移动端（375px及以下）的h1字号 */
  @media (max-width: 375px) {
    h1 {
      font-size: 30px;
    }
  }
}

写完直接生效，逻辑和你之前用普通CSS实现的完全一致。

方案二：通过Tailwind配置自定义响应式字号（适合样式复用） #

如果之后其他元素也要用到这套响应式字号，可以在tailwind.config.js里自定义断点和字号规则：

1. 配置自定义断点与响应式字号：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      // 自定义断点：xs对应375px及以下，desktop对应1440px及以上
      screens: {
        'xs': '375px',
        'desktop': '1440px',
      },
      fontSize: {
        h1: {
          // 移动端（xs及以下）用30px
          xs: '30px',
          // 桌面端（desktop及以上）用46px
          desktop: '46px',
        },
      },
    },
  },
  plugins: [],
}

2. 让h1默认应用这个样式（可选）：
   在全局CSS里添加一行，让所有h1标签自动使用自定义的text-h1类：

@layer base {
  h1 {
    @apply text-h1;
  }
}

之后其他元素也可以通过添加text-h1类，复用这套响应式字号规则。

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