小编irf*_*fan的帖子

我需要使用 tailwind css 根据屏幕大小更改 fonsize。有没有办法根据 tailwind.config 中的屏幕定义字体大小并将其应用于所有文本？通常我可以创建自定义字体大小并应用于文本元素。

在 tailwind.config 中定义自定义字体大小：

module.exports = {
 content: ["./src/**/*.{js,jsx,ts,tsx}"],
 theme: {
    fontSize: {
      xs: "10px",
      s: "15px",
      sm: "17px",
      "2sm": "20px",
      m: "22px",
      md: "25px",
      l: "30px",
      xl: "35px",
      "2xl": "40px",
      "3xl": "45px",
      "4xl": "50px",
      "5xl": "55px",
      "6xl": "60px",
      "7xl": "65px",
      "8xl": "70px",
    },
 }
}

在文本元素中使用它：

<div className="text-s md:text-m  xl:text-xl">Text</div>

为了避免对每个文本元素应用响应文本大小，我需要它自动更改字体大小值。也许在 tailwind.config 中它看起来像这样：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontSize: {
      screen: {
        lg: {
          xs: "10px",
          s: "15px",
          sm: "17px",
          "2sm": …