Can we implement CSS functions as a css utility class?

[adamgen]

CSS introduces new functions that can significantly reduce the effort invested into making things responsive.

To get a better feeling of its power let's look at this near prefect responsiveness that's created with a single CSS prop width: min(50vw, 400px);:

min-demo.mp4

* The video is taken from web.dev and so is the codepen

Trying to implement a tailwind solution for it, let's examine a real-life scenario where functions are near crucial for good responsiveness - font sizes.

Our UI goal is that:

• We want to give a font-size property that has a fallback to pixels.
• The pixels enforce either minimum or maximum font size
• The screen sets the font size to be smaller or larger based on its size and the functions we use.

The original css when hand written:

.responsive-font-size {
   width: min(60px, 6vw);
}

A utility first approach:

/* text min */
.text-fn-min-60px { --text-fn-min-60px: 60px }
.text-fn-min-12vw { --text-fn-min-12vw: 12vw }

.text-fn-min-60px.text-fn-min-12vw { --text-fn-min: min(var(--text-fn-min-60px), var(--text-fn-min-12vw)) }

.text-fn-min { font-size: var(--text-fn-min) }

/* text max */
.text-fn-max-60px { --text-fn-max-60px: 60px }
.text-fn-max-12vw { --text-fn-max-12vw: 12vw }

.text-fn-max-60px.text-fn-max-12vw { --text-fn-max: max(var(--text-fn-max-60px), var(--text-fn-max-12vw)) }

.text-fn-max { font-size: var(--text-fn-max) }

  <p class="text-fn-min text-fn-min-60px text-fn-min-12vw">
    min(60px, 12vw)
  </p>
  <p class="text-fn-max text-fn-max-60px text-fn-max-12vw">
    max(60px, 12vw)
  </p>

Check it out on the codepen playground

The cost is that the variability is huge, similarly to gradients, the benefits are huge.

We can of course go further with this example by giving another restriction where the font size is set to default, but changes when the screen is too large or small. It can be done with something like font-size: max(min(var(--min1), var(--min2)), var(--max)) and finding the right min1/2 max size variants.