Feature Request: Enhanced Responsive Classnames Support

[guinnod]

Feature Request: Enhanced Responsive Classnames Support

Description

I am a developer who heavily utilizes clsx along with Tailwind CSS for my projects. The combination of clsx and Tailwind CSS is incredibly useful for managing dynamic class names. However, I have found that writing responsive Tailwind class names can be cumbersome and less readable.

Current Practice

Currently, I write responsive Tailwind class names like this:

className={clsx(
  "bg-[#2A2A2A] rounded-[16px] py-[24px] px-[16px]",
  "sm:px-[54px] sm:py-[40px] sm:rounded-[16px]",   
  "md:px-[70px] md:py-[40px] md:rounded-[26px]", 
)}

This approach works, but it can become difficult to manage and read as the number of responsive breakpoints increases.

Proposed Feature

I propose adding support for a more readable and isolated approach to responsive class names, similar to the following:

className={clsx(
  "bg-[#2A2A2A] rounded-[16px] py-[24px] px-[16px]",
  {"px-[54px] py-[40px] rounded-[16px]": "sm"},   
  {"px-[70px] py-[40px] rounded-[26px]": "md"}, 
)}

or

className={clsx(
  "bg-[#2A2A2A] rounded-[16px] py-[24px] px-[16px]",
  "sm:{px-[54px] py-[40px] rounded-[16px]}",
  "md:{px-[70px] py-[40px] rounded-[26px]}"
)}

Such formats would allow developers to isolate responsive class names and make the code more readable and maintainable.
I recognize that the maintainers have a deep understanding of the library’s architecture and may know of even more efficient ways to integrate this functionality.

Benefits

• Improved readability and maintainability of responsive class names
• Easier isolation of responsive styles for better debugging and testing
• Enhanced developer experience when working with Tailwind CSS and clsx

Thank you for considering this feature request. I believe it would be a valuable addition to clsx, especially for developers who use Tailwind CSS extensively.

Best regards,
Abzal Slamkozha

[mulfyx]

That is beyond the responsibility of the library

[hoangnhan2ka3]

So maybe this plugin can serve ~90% your needs: https://github.com/Noriller/easy-tailwind

I currently use it like this:

className={cn(
    fonts.Gilroy_Sans.variable,
    fonts.Sf_Mono.variable,
    "relative h-fit !scroll-smooth bg-mega-background",
    e({
        all: "focus:outline-none",
        selection: "bg-zinc-400/40 text-mega-secondary text-shadow-none"
    })
)}

output:

class="__variable_e8f235 __variable_aaef19 relative h-fit !scroll-smooth bg-mega-background all:focus:outline-none selection:bg-zinc-400/40 selection:text-mega-secondary selection:text-shadow-none"

One drawback that u must nested e() inside another fn like clsx, cn if u want to write variables or complex conditions in it, in my case:

fonts.Gilroy_Sans.variable,
fonts.Sf_Mono.variable,

otherwise u just need e(), detail on the plugin's docs.

And if u have time, consider this Noriller/easy-tailwind#4 issue.

[guinnod]

So maybe this plugin can serve ~90% your needs: https://github.com/Noriller/easy-tailwind

I currently use it like this:

className={cn(
    fonts.Gilroy_Sans.variable,
    fonts.Sf_Mono.variable,
    "relative h-fit !scroll-smooth bg-mega-background",
    e({
        all: "focus:outline-none",
        selection: "bg-zinc-400/40 text-mega-secondary text-shadow-none"
    })
)}

output:

class="__variable_e8f235 __variable_aaef19 relative h-fit !scroll-smooth bg-mega-background all:focus:outline-none selection:bg-zinc-400/40 selection:text-mega-secondary selection:text-shadow-none"

One drawback that u must nested e() inside another fn like clsx, cn if u want to write variables or complex conditions in it, in my case:

fonts.Gilroy_Sans.variable,
fonts.Sf_Mono.variable,

otherwise u just need e(), detail on the plugin's docs.

And if u have time, consider this Noriller/easy-tailwind#4 issue.

thank you!