Feature Request: Enhanced Responsive Classnames Support

guinnod commented 3 months ago

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 commented 3 months ago

That is beyond the responsibility of the library

hoangnhan2ka3 commented 3 months ago

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 https://github.com/Noriller/easy-tailwind/issues/4 issue.

guinnod commented 3 months ago

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!

lukeed / clsx