u/caraiovinicius

Hi everyone!

I recently built a small TypeScript utility to make responsive Tailwind classes a bit easier to organize, and I'd love to get some feedback from people who use Tailwind regularly.

One thing that always bothered me was having long className strings full of responsive utilities:

<div className="flex flex-col gap-4 md:flex-row lg:gap-8 xl:items-center ...">

So I created responsive-tailwind, which lets you write the same thing like this:

<div
  className={responsive({
    base: "flex flex-col gap-4",
    md: "md:flex-row",
    lg: "lg:gap-8",
    xl: "xl:items-center",
  })}
/>

The library also validates breakpoint prefixes at compile time, so something like this:

responsive({
  md: "flex-row",
})

will produce a TypeScript error instead of silently passing through.

It supports the default Tailwind breakpoints as well as arbitrary ones like min-[900px] and max-[768px], while preserving Tailwind's static class detection.

This is my first npm package, so I'd really appreciate any feedback, ideas, or criticism.

npm: https://www.npmjs.com/package/responsive-tailwind

GitHub: https://github.com/babyreptile/responsive-tailwind

Hi everyone!

I recently built a small TypeScript utility to make responsive Tailwind classes a bit easier to organize, and I'd love to get some feedback from people who use Tailwind regularly.

One thing that always bothered me was having long className strings full of responsive utilities:

<div className="flex flex-col gap-4 md:flex-row lg:gap-8 xl:items-center ...">

So I created responsive-tailwind, which lets you write the same thing like this:

<div
  className={responsive({
    base: "flex flex-col gap-4",
    md: "md:flex-row",
    lg: "lg:gap-8",
    xl: "xl:items-center",
  })}
/>

The library also validates breakpoint prefixes at compile time, so something like this:

responsive({
  md: "flex-row",
})

will produce a TypeScript error instead of silently passing through.

It supports the default Tailwind breakpoints as well as arbitrary ones like min-[900px] and max-[768px], while preserving Tailwind's static class detection.

This is my first npm package, so I'd really appreciate any feedback, ideas, or criticism.

npm: https://www.npmjs.com/package/responsive-tailwind

GitHub: https://github.com/babyreptile/responsive-tailwind

What's an app you use all the time but keeps letting you down because of one missing feature?

Could be anything — a better search, offline mode, a simple export option, less annoying notifications. Whatever it is, drop it below:

App name / Missing feature / Why it matters to you

Curious to see what comes up.