Efficient way of utilizing breakpoints

[javina89]

Hello,
I was thinking that instead of doing <img class="sm:w-32 md:w-35 lg:w-38 xl:wd-41" src="...">
what if we do <img class="all:w-[32, 35, 38, 41] src="...">

I see this as less clutter. So, brackets would represent [sm, md, lg, xl]. The way to activate it would be to add the all: .

If this isn't a bad idea maybe we can chain on this. Thoughts?

[knowler]

You wouldn't want to include spaces in your proposed class name API since CSS would interpret those as separate classes. Further, I fail to see how this solution would even work with CSS and plain HTML. Can you expand on this?

The idea reminds me of Styled System’s responsive value syntax, but that's for JS(X) where you can use syntax like that.

[javina89]

I was just wondering if there was a way to make something like this work.
Maybe it isn't possible. I figured I would introduce the idea.
If the spaces are an issue maybe it can be written differently like
<img class="all:w-32_35_38_41 src="...">

[knowler]

all:w-32_35_38_41

An issue with class names like this is that Tailwind would have to create them for every permutation, which would be practically infinite. Further, generating so many classes with such specific CSS rule combinations misses a key point of utility CSS: highly reusable class names in order to reduced CSS file size. Keeping responsive class variants separate is realistic for CSS and more technically efficient even though it might seem inefficient to write.

If you are using React and are looking for a solution like Styled System's responsive array props, I made a package called responsive-classnames which allows for syntax like:

<div className={rcx`w-${[32, 35, 38, 41]}`} />

However, it does not work with PurgeCSS since it is concatenating the class names under the hood, so I do not advise it as a solution. (I've experimented with using Babel to derive class names to whitelist from the source code, but that slows the build significantly.)