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

[drdogbot7]

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.

[davidhellmann]

I think that's not really possible and may be a downside. But I'm not 100% sure what's your use case. Within your CSS I think there is no really needed to specify the TailwindCSS stuff again as CSS Vars. When you need the stuff within JS I think you must calculate it on your own but it’s simple.

But maybe you can tell me more about the use case and it's a bit more clear for me.

[drdogbot7]

The specific use case here is some Wordpress BS. The block editor does some weird stuff with inline styles and variables.

I agree; I can't think of a lot of use cases for this except when need to override something in a code base you don't control.

[davidhellmann]

I'll close that issue. If you have any questions let me know.

[davidhellmann]

@drdogbot7 good news :) I looked into this topic yesterday and pushed a v2 branch. It works but you have to set it up a bit differently. But it's just a copy/paste thing. Maybe I found a bit extra time this evening then I will update the readme and a live example.

[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],
      },
    }),
  ],

[davidhellmann]

Released a Alpha 3 with some bug fixes: https://github.com/davidhellmann/tailwindcss-fluid-type/releases/tag/v2.0.0-alpha.3

Playground also available: https://play.tailwindcss.com/orTcWjNW0h?file=css

[drdogbot7]

This looks great, thank you!

[davidhellmann]

v2 is released with this changes: https://github.com/davidhellmann/tailwindcss-fluid-type/releases/tag/2.0.0