Can we stop using xs, md, xl, 2xl or xxl etc. for sizes already? It's always hard to remember which of these represent what value so as a developer you always have to go and check, especially if you switch between multiple projects. Why not just use numeric values? We can all count (I guess? :D)

For example, I would go with "font-size-1", "font-size-2" etc. where the number represents a multiplier. So if you have a 4px base value, font-size-1 = 4px, font-size-2 = 8px etc. Might be weird to use font-size of 4px for anything on page, but it's just an example. And you can go to font-size-100 this way if you wish and you still know what each value represents. There is less confusion and no need to name these values things like "Gargantuan" or "Galactic" or 9XL.

I've started using this multiplier based approach for consistent spacing (padding/margin) values instead of using xs, md etc. and I'm never looking back. It has been so refreshing to work with those instead of having to always go check what does "xs/sm/md" represent. Haven't been using it for font-sizes since I haven't required it, but I can see it working for this case as well.

P.S. If using JavaScript objects for some of these definitions (styled-components or whatever other setup you might have) if might be weird to specify property name as "1" because then you have to access it like myObject[1] instead of myObject.1. In that case property name can be $1 so it can be accessed like myObject.$1.