如何在Tailwind中定义自定义响应式类以适配多屏幕字号？

作为Tailwind新手，我想找一种优雅的方式定义适配不同屏幕尺寸的类，核心需求是通过单个类实现不同屏幕下的不同字号。原本尝试用组件层结合响应式前缀实现，代码如下：

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

@layer components {
    .h1 {
        @apply sm:font-size-[33px] md:font-size-[35px] lg:font-size-[43px];
    }
}

但运行后出现报错：

X [ERROR] The `sm:font-size-[33px]` class does not exist. If `sm:font-size-[33px]` is a custom class, make sure it is defined within a `@layer` directive. [plugin angular-sass]

styles/ci-font-styles.scss:3:3:
  3 │     @apply sm:font-size-[33px] md:font-size-[35px] lg:font...
    ╵    ^

想请教正确的实现方法。

1. 修正工具类名称（最快解决） #

报错的核心原因是用错了Tailwind工具类名：Tailwind中控制字体大小的工具类是text-[size]，而非font-size-[size]。修改代码为：

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

@layer components {
    .h1 {
        @apply sm:text-[33px] md:text-[35px] lg:text-[43px];
    }
}

这样.h1类会自动在sm、md、lg断点应用对应的字号，完全符合“单个类实现多屏幕适配”的需求。

2. 组件层内使用媒体查询语法 #

如果你更习惯直接写CSS媒体查询，可以用Tailwind提供的@screen指令简化断点写法：

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

@layer components {
  .h1 {
    /* 默认（sm断点及以下） */
    font-size: 33px;
    /* md断点及以上 */
    @screen md {
      font-size: 35px;
    }
    /* lg断点及以上 */
    @screen lg {
      font-size: 43px;
    }
  }
}

3. 自定义主题（长期优雅方案） #

如果这类字号需要在项目中多处复用，建议在tailwind.config.js中统一自定义fontSize，方便后续维护：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontSize: {
        h1: {
          DEFAULT: '33px',
          md: '35px',
          lg: '43px',
        },
      },
    },
  },
}

然后在组件类中直接调用：

@layer components {
  .h1 {
    @apply text-h1 md:text-h1 lg:text-h1;
  }
}

注：text-h1默认应用DEFAULT值，md:text-h1会自动匹配md对应的字号

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