Tailwindcss: [Feature proposal] changing textSizes to fontSizes

[arosemena]

Hi, I would like to propose a change to the config, the property textSizes would be better named fontSizes to match the underlying css property it represents, as it's still in beta breaking changes shouldn't be much of an issue.

Another suggestion would be to add em units to text by default, right now 2xl represents 1.5rem, I was thinking something like 2x for 2em or so, this helps when building relative sizing from one element to another.

[benface]

Agreed. It reminds me that there are inconsistencies in singular/plural form in the config properties.

Some are plural:

• colors
• screens
• fonts
• textSizes
• fontWeights
• textColors
• backgroundColors
• borderWidths
• borderColors
• shadows

And some are singular:

• leading
• tracking
• backgroundSize
• borderRadius
• width
• height
• minWidth
• minHeight
• maxWidth
• maxHeight
• padding
• margin
• negativeMargin

I feel like they should all be plural.

[adamwathan]

Planning to make all of this consistent in the near future with backwards compatibility until 1.0.

I personally think standardizing on singular makes most sense; plural felt wrong after we added the "modules" section to the config. "Background size module" sounds more right to me than "background sizes module".

The default font scale will remain in rem though; you are free to change it to em in your own config of course but using em means you don't actually have a fixed type scale anymore. It's really easy to end up with fonts of every size imaginable if you're not careful since em will always multiply the font size of the parent.

[yordis]

@adamwathan I think em has a better advantage over rem because of the relativity.

If we design the components based on relativity rather than sizes it will be easier from design spec and implementation to meet the requirements.

This would be really handy if we want to use the same design in devises like TVs and so on where the proportion is really big, just increase the font-size and everything is relative to it container so.

Now, issues related to messing up the sizes we could always reset the font-size to be based on the font size base.

For example (any other good name is welcome)

.reset-font {  font-size: 1rem; }

[florianbouvot]

@adamwathan Do you plan to use .font- instead of .text- for font size classes?

[jan-dh]

@florianbouvot .font- is already being used for the font-weight. This will cause conflicts.

[adamwathan]

This has been renamed in 1.0 👍

[gavinhewitt]

Actually I'd prefer to have anything text or font related to have the same prefix (I prefer text-). Font-style and text-transform always trips me up.