Question: Using fluid-tailwind classes within @tailwindcss/typography config

[abredikis]

Hi,

I'm relatively new to Tailwind and its plugins, and I'm trying to use fluid-tailwind with the @tailwindcss/typography plugin. Specifically, I'd like to overwrite the default font-size of headings and make them responsive without the use of breakpoints.

Is it possible to achieve this when using @tailwindcss/typography? If using @apply isn't possible currently, are there any other ideas you can suggest (besides writing clamp functions)?

I've had no luck making it work with this config tailwind.config.js:

const config: Config = {
  content: {
    files: [
      './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
      './src/components/**/*.{js,ts,jsx,tsx,mdx}',
      './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    extract,
  },
  theme: {
    fontSize,
    screens,
    fluid: (({ theme }) => ({
      defaultScreens: [theme('screens.sm'), theme('screens.xxl')],
    })) satisfies FluidThemeConfig,
    extend: {
      typography: ((theme) => ({
        DEFAULT: {
          css: {
            h1: {
              '@apply ~text-xl/2xl': {},
            },
          },
        },
      })) satisfies ResolvableTo<Record<string, unknown>>,
    },
  },
  plugins: [fluid, typography],
};

Thanks in advance for your help!

[barvian]

Good question! This may be a Tailwind bug/limitation but I'm waiting to hear back on their Discord. I suppose you could use the prose- variants to accomplish this in the meantime, i.e.

<div class="prose prose-h1:~text-xl/2xl">

Tailwind Play example