响应字体大小.插件

Question

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

有没有人知道任何现有的插件的尾风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 in 到26 in
• 宽屏幕宽度-固定字体大小

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

不需要插件。

Answer 3

下面是我使用styled-components和twin.macro进行反应的设置，它使用硬编码的断点，因为我找不到在tailwind.config.js中插入断点的方法

// tailwind.config.js

/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(function ({addUtilities}) {
      addUtilities({
        ".fs-0": {
          fontSize: "2.281rem",
          lineHeight: 1.1,

          "@media (min-width: 768px)": {
            fontSize: "3.583rem",
          },
        },
        ".fs-1": {
          fontSize: "1.802rem",

          "@media (min-width: 768px)": {
            fontSize: "2.488rem",
          },
        },
        ".fs-2": {
          fontSize: "1.424rem",

          "@media (min-width: 768px)": {
            fontSize: "1.728rem",
          },
        },
        ".fs-3": {
          fontSize: "1.266rem",

          "@media (min-width: 768px)": {
            fontSize: "1.44rem",
          },
        },
        ".fs-4": {
          fontSize: "1.125rem",

          "@media (min-width: 768px)": {
            fontSize: "1.2rem",
          },
        },
        ".fs-5": {
          fontSize: "1rem",
        },
      });
    }),
  ],
};

// components/GlobalStyles.tsx

import React from "react";

import {createGlobalStyle} from "styled-components";
import tw, {GlobalStyles as BaseStyles} from "twin.macro";

const CustomStyles = createGlobalStyle`
  h1 { ${tw`fs-1`} }
  h2 { ${tw`fs-2`} }
  h3 { ${tw`fs-3`} }
  h4 { ${tw`fs-4`} }
  h5, h6 { ${tw`fs-5`} }
`;

function GlobalStyles() {
  return (
    <>
      <BaseStyles />
      <CustomStyles />
    </>
  );
}

export default GlobalStyles;

// pages/_app.tsx

import React from "react";

import GlobalStyles from "components/GlobalStyles";

const MyApp = (): JSX.Element => {
  return (
    <>
      <GlobalStyles />
    </>
  );
};

export default MyApp;

资料来源

• 将实用程序添加到尾风文档中
• styled-components
• 使用md生成的打印刻度(默认和类型标度 )