响应式字体大小 - 插件

Question

我有一个问题要问你们（和姑娘们；））

有谁知道 Tailwind CSS 的现有插件可以使字体大小响应（除了字体大小固定的下屏幕和​​上屏幕大小）。像那样：

body { font-size: calc(16px + (26 - 16) * ((100vw - 768px) / (1280 - 768))); }
@media screen and (max-width: 768px) { body { font-size: 16px; }}
@media screen and (min-width: 1280px) { body { font-size: 26px; }}

• 较低的屏幕宽度- 固定字体大小
• 屏幕尺寸介于两者之间- 响应式字体大小从16 像素到26 像素
• 更宽的屏幕宽度- 固定字体大小

Answer 1

1- 定义每个断点的字体大小tailwind.config.js

module.exports = {
    theme: {
      extend: {
        fontSize: {
          'body-lg': '1rem',
          'body': '.875rem',
        }
      }
    }
  }

2-通过从配置文件导入定义来创建类global.css。

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

  @screen lg { // applying font size for lg breakpoint
    body {
      @apply text-body-lg;
    }
  }
}

Answer 2

只需添加一些如下规则，例如：

<project/path/to>/tailwind.css

html {
  font-size: 16px;
  @screen md {
    font-size: 17px;
  }
  @screen lg {
    font-size: 26px;
  }
}

不需要插件。