Tailwind Fluid Type Calculator

This will give you preview of entire Fluid Typography. Create it as shortcode and paste it one one dedicated page for preview.

Once you preview the page it will give you:

• Preview text in real size
• Calculated font size in pixels (regardless what font value you used px, rem, em)
• Font size will be recalculated on resize as well
• Class name so you can easily copy and use it. No need to remember them.

Code bellow is for the Winden Configuration

const FluidType = require('tailwindcss-fluid-type')

module.exports = {
  theme: {

    extend: {      

    }, // End of Extend

    fluidTypeSettings: {},
 
    fluidType: {
      
      settings: {
        fontSizeMin: 14, //Base Font on Minimum screen size
        fontSizeMax: 18, //Base Font on Maximum screen size
        ratioMin: 1.1, 
        ratioMax: 1.19,
        screenMin: 400,
        screenMax: 1600,
        unit: 'px',
        prefix: 'fluid-'
      }, // End of fluidType

      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],
      }, // End of Values

    },

  }, // End of Theme

  variants: {},
  corePlugins: {},
  plugins: [FluidType],

} // End of Module Exports

Code bellow is for the Scripts Organizer

<div class="wrapper">

  <div class="line-wrap">
    <div class="get-font-size fluid-text-9xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-9xl
    </span>
  </div>

  <div class="line-wrap">
    <div class="get-font-size fluid-text-8xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-8xl
    </span>
  </div>

  <div class="line-wrap">
    <div class="get-font-size fluid-text-7xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-7xl
    </span>
  </div>

  <div class="line-wrap">
    <div class="get-font-size fluid-text-6xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-6xl
    </span>
  </div>

  <div class="line-wrap">
    <div class="get-font-size fluid-text-5xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-5xl
    </span>
  </div>

  <div class="line-wrap">
    <div class="get-font-size fluid-text-4xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-4xl
    </span>
  </div>

  <div class="line-wrap">
    <div class="get-font-size fluid-text-3xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-3xl
    </span>
  </div>
  
  <div class="line-wrap">
    <div class="get-font-size fluid-text-2xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-2xl
    </span>
  </div>
  
  <div class="line-wrap">
    <div class="get-font-size fluid-text-xl">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-xlf
    </span>
  </div>
  
  <div class="line-wrap">
    <div class="get-font-size fluid-text-lg">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-lg 
    </span>
  </div>
  
  <div class="line-wrap">
    <div class="get-font-size fluid-text-base">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-base
    </span>
  </div>
  
  <div class="line-wrap">
    <div class="get-font-size fluid-text-sm">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-sm
    </span>
  </div>
  
  <div class="line-wrap">
    <div class="get-font-size fluid-text-xs">The quick brown fox jumps over the lazy dogs</div>
    <span class="fsz-value"></span>
    <span class="legend">
      <strong>class: </strong>fluid-text-xs
    </span>
  </div>

</div>

(function($){

    setTimeout(() => {
        getFontSize()
    }, 2000)

    $(window).resize(() => {
        getFontSize()
    })    
   
   function getFontSize(){
      
        $('.get-font-size').each(function(){
            
            var fsz = $(this).css("font-size");
            $(this).next().text(fsz).prepend("<strong>size: </strong>");

        });
   };

})(jQuery);

.wrapper{
    margin-left: auto;
    margin-right: auto;
    background-color: #f5f5f5;
    padding: 50px 0;
    display: grid;
    gap: 20px;
}

.line-wrap{
    padding: 20px;
    border-bottom: 4px solid rgb(231, 231, 231);
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.get-font-size{
    width: 100%;
}