Is there a way to access the final font-size values for use elsewhere in CSS?

For instance with the core fontSize plugin, I can do this:

:root {
 --foo: theme('fontSize.lg');
}

…but since the fluid type plugin calculates the final values at build time, that doesn’t work.

I realize I could use @apply in a lot of cases, but it would be useful to have direct access to the values.

[drdogbot7]

This looks great, thank you!

[davidhellmann]

You can try it out: npm i tailwindcss-fluid-type@next

And under plugins in your tailwind.config.js:

 plugins: [
    require('tailwindcss-fluid-type')({
      settings: {
        fontSizeMin: 1.125, // 1.125rem === 18px
        fontSizeMax: 1.25, // 1.25rem === 20px
        ratioMin: 1.125, // Multiplicator Min
        ratioMax: 1.2, // Multiplicator Max
        screenMin: 20, // 20rem === 320px
        screenMax: 96, // 96rem === 1536px
        unit: 'rem', // default is rem but it's also possible to use 'px'
        prefix: '', // set a prefix to use it alongside the default font sizes
      },
      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],
      },
    }),
  ],