Use Fluid-responsive property calculator for the calculations because it doesn’t use .clamp, so it doesn’t interfere with accessibility. It does mean that we have to use media queries though.
REMEMBER Tailwind does not need spaces, so remove spaces from the calc that comes from the any calculator that you use
Each heading class will need something like this:
H1
text-[2.5rem] font-semibold leading-tight md:text-[calc(2.5rem+((1vw-0.48px)*4.0134))]
xl:text-[4rem]
So on mobile up to tablet (768px), we have a 2.5rem H1 (with semibold and line height of 1.25rem).
From tablet (768px) to laptop (1366px) we have a variable calc rem.
Above 1367px we have 4rem.
Play with this a little to add another fluid calc for laptop to large desktop.
Don't use .clamp in your calc, as this will prevent user preferences for browser font size