Md:hidden not working with fa-bars or bx-menu

General
1

The md:hidden property does not work properly in my Next.js project.

<header className="flex justify-between items-center gap-3 text-gb-dark py-6 px-4">
  <i className="text-5xl md:hidden cursor-pointer">text</i>
  <i className="bx bx-menu text-5xl md:hidden cursor-pointer"></i>
  <i className="fa fa-bars fa-2x md:hidden cursor-pointer"></i>
</header>

boxicons and font-awesome are imported in the index.html head section:

<head>
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

Now if I run the project, the text ‘text’ is hidden properly if I run the browser in full-size but the burger-menu is not. If I shrink the view, all three items are shown.

I tried this with a brand new project, created with npx create-next-app@latest. The project was created with TypeScript and Tailwind CSS.

2

The problem is boxicons and font-awesome styles have higher specificity or conflicting CSS that overrides Tailwind’s md:hidden.

Straightforward fix:

  • Tailwind’s md:hidden sets display: none at min-width: 768px.
  • But icon fonts like Boxicons and FontAwesome sometimes add styles (like display: inline-block !important or similar) that override this.
  • You can check in browser dev tools if the icons have conflicting styles overriding display: none.

How to fix:

  1. Add !important to Tailwind utility to force hiding:
<i className="text-5xl md:hidden !hidden md:!hidden cursor-pointer">text</i>
<i className="bx bx-menu text-5xl md:hidden !hidden md:!hidden cursor-pointer"></i>
<i className="fa fa-bars fa-2x md:hidden !hidden md:!hidden cursor-pointer"></i>

(You need to enable the important modifier in Tailwind or write custom CSS)

  1. Or write explicit CSS override:
@media (min-width: 768px) {
  .md-hidden-important {
    display: none !important;
  }
}

Then in JSX:

<i className="text-5xl md-hidden-important cursor-pointer">text</i>
<i className="bx bx-menu text-5xl md-hidden-important cursor-pointer"></i>
<i className="fa fa-bars fa-2x md-hidden-important cursor-pointer"></i>
  1. Alternatively, wrap the icons in a div and control visibility on the wrapper.

Summary:
Tailwind’s md:hidden works fine on plain text but icon fonts may override display styles. Use !important or custom CSS to force hiding on icons at md breakpoint.