How do you undo a "hidden" class?

[quick007]

At the moment, you can hide things using hidden, but there's no way to show something that's hidden. The main reason I think this would be useful (and why I need it) is for responsive design, you could use class="shown sm:hidden md:hidden"

[adamwathan]

Hey! You want to use any of the other display utilities for this, like:

class="block sm:hidden"

hidden just sets display: none, so anything class that changes display to something else will unhide it.

You don't need sm:hidden md:hidden btw unless you've edited your breakpoints to not be min-width based in your config — sm:hidden is enough, the element will stay hidden on all larger screens until you explicitly unhide with something like lg:block 👍

[sebastienbarre]

Thanks @adamwathan

Is there a magical way to undo hidden without having to know which one of the display class to use instead?

My use case here is a high-level React component that takes one child, and returns two cloned children, one that is to be displayed on small screens, and the other on anything larger. That high-level component does not know if the child requires block, or inline-flex, etc.

To give you an even more specific example, I'm coding a simple React component for the nice Tailwind UI button you guys provide. That component allows the creation of a button with an icon in it (the "Button with leading icon" example in Tailwind UI).

I ended up with something like this below, which takes care of properly resizing the icon, as well as aligning the icon inside the button given the requested button size, using a Flex container internally:

<Button size="small" icon={<Icon variant="email" />} >Send Email</Button>

If the button has no content (label) the component centers the icons, but if the button has one, like above, it gives the icon that small negative left margin you guys coded in Tailwind UI. This can be done because the component knows if it has a child or not.

However, I'd like my Button component to show only the icon on small screens, in some situations (not all). On anything larger, both the icon and the label. But I don't want to hardcode that breakpoint in the Button component itself.
At first I tried to make the label itself responsive:

<Button size="small" icon={<Icon variant="email" />} ><span class="hidden md:inline">Send Email</span></Button>

but this does not work, because once the label disappears, the left negative margin on the icon is still there, and the alignment of the icon inside the button is now broken--the icon is not centered. It is not because the component has a child, technically speaking, but is not aware that the child can disappear at some breakpoints. And I can't disable the left negative margin at some breakpoints in the component... because I can't hardcode the breakpoint in the component, I'd like it to be flexible enough that the it switches to "icon only" at arbitrary breakpoints.

So I ended up creating a ContentSwitch component that takes a button, clones it into two buttons (using React.cloneComponent()), removes the content (aka label) from one of the clone, and assign the appropriate visibility classes on each clone:

    <ContentSwitch classNameWithoutContent="md:hidden" classNameWithContent="hidden md:inline-flex">
      <Button size="small" icon={<Icon variant="email" />} >Send Email</Button>
    </ContentSwitch>

this above ends up creating something like:

    <div>
      <Button className="md:hidden" size="small" icon={<Icon variant="email" />} ></Button>
      <Button className="hidden md:inline-flex" size="small" icon={<Icon variant="email" />} >Send Email</Button>
    </div>

which works, but as you can see it needs to be aware of what display class the button requires (here, inline-flex). So if the implementation of the Button component changes, I need to change md:inline-flex to something else everywhere a button is used inside such component. It would be great to have something like md:display-default, if such thing is possible in CSS...

Sorry, that was pretty long for something that would seem simple to solve :)

Thanks!

[adi518]

I added a custom display-revert class to my project, so you can do hidden md:display-revert.

[rozsazoltan]

Just use breakpoint range variant: max-md:hidden. Read more: #3843 (comment)

[rozsazoltan]

Use the classic class="sm:hidden lg:block" to make the element hidden from sm through md up to the beginning of lg, and then block from lg onwards. Or use a breakpoint range with the max-{breakpoint}: variant:
class="sm:max-lg:hidden", which means the same as the previous example, with the difference that it automatically reverts to the original display mode from lg onwards.

For example, if we want the default display to be flex, but hidden from sm to md, and then back to flex from lg onward, the classic way looks like this: class="flex sm:hidden lg:flex". But with a breakpoint range, there's no duplication anymore:
class="flex sm:max-lg:hidden", since it means the same thing.

• Responsive design

Breakpoint prefix	Minimum width	CSS
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }

• Targeting a breakpoint range

Variant	Media query
max-sm	@media (width < 40rem) { ... }
max-md	@media (width < 48rem) { ... }
max-lg	@media (width < 64rem) { ... }
max-xl	@media (width < 80rem) { ... }
max-2xl	@media (width < 96rem) { ... }