响应式字体大小 - 插件

Question

我有一个问题要问你 guyz（和 gals ;)）

有没有人知道任何现有的 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; }}

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

Answer 1

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

module.exports = {
    theme: {
      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;
    }
  }
}