Feature Request: Enhanced Responsive Classnames Support
guinnod opened ·
### 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: ```jsx 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: ```jsx 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 ```jsx 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
- MU
That is beyond the responsibility of the library
- AI
So maybe this plugin can serve ~90% your needs: https://github.com/Noriller/easy-tailwind
I currently use it like this:
```tsx 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:
```html 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:
```tsx 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.
- GU
> So maybe this plugin can serve ~90% your needs: https://github.com/Noriller/easy-tailwind > > I currently use it like this: > > ```tsx > 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: > > ```tsx > 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](https://github.com/Noriller/easy-tailwind/issues/4) issue.
thank you!