Best practices to add the fluid-type settings to “prose” sections of a page (official Tailwind CSS Typography plugin)?

[MichaelvanLaar]

This is a question from a Tailwind CSS noob and fluid type noob. So, sorry if it’s stupid.

I love the tailwindcss-fluid-type plugin since it makes using a fluid scales for font sizes a no-brainer in Tailwind CSS. But for certain parts of pages I need the Typography plugin, whenever I have to include “unstyled” content from a typical CMS WYSIWYG editor field. A container element with the prose class usually works fine.

I have to adapt the default styling of the Typography plugin to the rest of the site anyway. So this is not the point.

But to include fluid type settings, I would copy the final font-size definitions from the rendered CSS file and paste them into the settings of the Typography plugin. For example, I would copy the clamp function of a .text-base selector and include it as font-size for prose-base in my configuration, like so:

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'font-size':
              'clamp(1.125rem, calc(1.125rem + ((1.25 - 1.125) * ((100vw - 20rem) / (96 - 20)))), 1.25rem)',
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('tailwindcss-fluid-type'),
  ],
}

And then the same for the prose-sm, prose-lg, prose-xl and prose-2xl.

It works. And since the Typography plugin uses relative font-sizes, it also works nicely out of the box for all elements like headlines, etc.

But it is neither an elegant nor a flexible solution – especially not, if I change the settings of the fluid-type plugin later on, and then will have to manually adapt all the typography plugin settings to the new clamp outputs.

Is there a better way? Or any best practices?

[davidhellmann]

Hey @MichaelvanLaar That's an excellent question. :) I didn't use the Typography plugin at all.

This works without the plugin:

  theme: {
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            'font-size':theme('fontSize[5xl]'),
          },
        },
      }),
    },
  },

But that didn't work (as expected): https://play.tailwindcss.com/v0VNMNqI35?file=config

Another way would be to declare the Fluid config and Prose font setting outside the config and use it: https://play.tailwindcss.com/By1clQ0XFB?file=config

const fluidTypeConfig = {
  fontSizeMin: 1.125,
  fontSizeMax: 1.25,
  ratioMin: 1.125, 
  ratioMax: 1.2, 
  screenMin: 20, 
  screenMax: 96, 
  unit: 'rem', 
  prefix: ''
}

const proseFontSetting = `clamp(${fluidTypeConfig.fontSizeMin}${fluidTypeConfig.unit}, calc(${fluidTypeConfig.fontSizeMin}${fluidTypeConfig.unit} + ((${fluidTypeConfig.fontSizeMax} - ${fluidTypeConfig.fontSizeMin}) * ((100vw - ${fluidTypeConfig.screenMin}${fluidTypeConfig.unit}) / (${fluidTypeConfig.screenMax} - ${fluidTypeConfig.screenMin})))), ${fluidTypeConfig.fontSizeMax}${fluidTypeConfig.unit})`

module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            'font-size': proseFontSetting,
          },
        },
      }),
    },
  },
  plugins: [
    require('tailwindcss-fluid-type')({
        settings: fluidTypeConfig,
        values: {
            'xs': [-2, 1.6],
            'sm': [-1, 1.6],
            'base': [0, 1.6],
            'lg': [1, 1.6],
            'xl': [2, 1.2],
            '2xl': [3, 1.2],
            '3xl': [4, 1.2],
            '4xl': [5, 1.1],
            '5xl': [6, 1.1],
            '6xl': [7, 1.1],
            '7xl': [8, 1],
            '8xl': [9, 1],
            '9xl': [10, 1],
        },
    }),
    require('@tailwindcss/typography')
  ],
}

So you can change it later, and you have a single source to do that.

What do you think? Cheers

[MichaelvanLaar]

Thanks a lot! I will try that.

Another idea I had was a bit similar: In some former projects I used to scale the whole layout from a certain breakpoint on by simply adjusting the base font size of the html element and use only rem rem sizes everywhere. This had the nice effect that the whole layout zoomed within certain boundaries, so I could fill bigg screens a bit better without having super long and thus hard to read line lengths. Of course, this is not a solution for every kind of website. But for rather classic text/image presentation (blogs, etc.) it can be a nice solution.

And nowadays, it is much easier to implement using clamp (in contrast to using multiple media queries like I used to do back then). And in Tailwind CSS this would mean that not only “regular” font sizes and spacing would be affected but also all prose styles would behave the same way, since they use rem and em for font sizes.

[MichaelvanLaar]

“Solved” this in my current project with the above mentioned fluid type / zoom feature:

• Uninstalled the tailwindcss-fluid-type plugin.
• Added a proper font-size definition for the HTML element.

@layer base {
  html {
    /* Implement a fluid font size based on viewport width with a minimum size
       of 16px and a maximum of 22px. This also affects all relative size
       specifications which are directly or indirectly based on the base font
       size. The result is a zoom effect of the whole layout. */
    font-size: clamp(1.00rem, calc(0.86rem + 0.55vw), 1.38rem);
  }
}

Yes, this does not only affect the font sizes, but all relative size specifications. This is intended. Text, the prose styles, margins, paddings, row gaps, etc. will grow automatically – within limits.

[davidhellmann]

Thanks @MichaelvanLaar for sharing. Did something in the past with SCSS, but the problem was that no one understood this approach, especially the designers I worked with. But can understand why you do it : )