Responsive font sizes - plugin - tailwind-css

Question

I have one question for u guyz (and gals ;) )
does anybody know any existing plugin for Tailwind CSS which make font sizes responsive (except for lower and upper screen size where font size is fixed) aka. like that:
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; }}
lower screen width - fixed font size
screen sizes in between - responsive font size from 16px to 26px
wider screen width - fixed font size

Answer 1

1- Define font sizes for each breakpoint on tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'body-lg': '1rem',
'body': '.875rem',
}
}
}
}
2- Create classes on global.css by importing definitions from config file.
#layer base {
body {
#apply text-body;
}
#screen lg { // applying font size for lg breakpoint
body {
#apply text-body-lg;
}
}
}

Answer 2

Just put some rule like the following e.g.:
<project/path/to>/tailwind.css
html {
font-size: 16px;
#screen md {
font-size: 17px;
}
#screen lg {
font-size: 26px;
}
}
No need for a plugin.

Answer 3

Here's my setup for React with styled-components and twin.macro, it uses hardcoded breakpoints as I couldn't find a way to interpolate breakpoints within 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;
Sources
Adding utilities to Tailwind docs
createGlobalStyles with styled-components
Typographic scales (default and md) generated with Type Scale