search

davidhellmann / tailwindcss-fluid-type

A plugin that makes the use of Fluid Type a breeze.
MIT License
345 stars 9 forks source link

How to determine the array 'values'? #20

Closed mdominguez closed 1 year ago

mdominguez commented 1 year ago

Hi David, First of all, thank you for this plugin!

In my default Tailwind 'text-' classes I like to name them after the font-size they represent in px (eg: 'text-20' = 20px = 1.25rem) So I renamed your example values array to: values: { '20' : [2], // 1.25rem } But I would like to do this for other font-sizes too that aren't in your example nor the tailwind defaults (like '32px' for example). So how do you calculate which value needs to be between brackets for '32' like [2] was for '20'?

Not so great at maths so probably not seeing something obvious here 😅 thank you!

davidhellmann commented 1 year ago

Hey!

I'm not sure if I understand you right, but I'll try... :) here are the default config values with base settings:

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

I think you've to do it in this way:

values: {
    ...
    '16': -1,
    '20': 0,
    '25': 1,
    '31': 2,
    ...
},

BUT :) That makes not really sense to me because: 1: If you change your values you have to change all classes too 2: It's hard for other devs to understand 3: The settings are not INT values because it's calculated. It's possible to have floor numbers so: 31.25: 2 would be the exact key.

  1. You have a min and max value for each setting.

But in the end, you have to calc It just with the ratio settings: 201.251.251.251.251.251.25*1.25 etc.

Was that helpful?

davidhellmann commented 1 year ago

I haven't heard back, so I'll close. Let me know if there is something that needs to be clarified.