Winden 2.0

Fluid Tailwind

Visit Fluid Tailwind Website →

// Importing the necessary plugins from esm.sh
import { fluidExtractor, fluidCorePlugins, defaultThemeScreensInRems, defaultThemeFontSizeInRems } from 'https://esm.sh/fluid-tailwind@0.1.6?bundle-deps';

// Exporting the configuration
export default {
    theme: {

        // Use Default Font sizes
        fontSize: defaultThemeFontSizeInRems,
        
        fluid: {
            defaultScreens: ['26rem', '64rem'],
        },

        extend: {
            // Additional customizations
        },

    },

    plugins: [
        fluidCorePlugins,
    ],

    content: {
        files: [],
        extract: fluidExtractor,
    },

    corePlugins: {
        preflight: false, // Disabling Tailwind's reset/base styles
    }
}

Warning

You need to use v0.1.6 as 0.1.7 have esm conflict.
Read more: https://github.com/barvian/fluid-tailwind/issues/13

You can also create your own font sizes:

fontSize: {

  'sm': '2rem',
  'md': '5rem',
  'xl': '10rem'
  
},

Info

Do not use more then 2 sizes in between. sm/lg, xl/3xl otherwise size will fail.

Size fail is connected with the accessibility violation. And at this point you can not bypass that.

Issue regarding this matter is already open.
You can read more about that on their github issues: https://github.com/barvian/fluid-tailwind/issues/11