tailwind-css - 响应式字体大小 - 插件

Question

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

有没有人知道任何现有的 Tailwind CSS 插件，它可以使字体大小响应(除了字体大小固定的上下屏幕大小)aka。像这样:

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: {
      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;
    }
  }
}