响应式字体大小-插件

Question

我有一个关于uguyz(和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: {
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

这是我为React设置的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;

来源

• 向Tailwind文档添加实用程序
• createGlobalStyles与styled-components
• 使用Type Scale生成的排版比例尺(默认值和md(