Question Details

No question body available.

Tags

node.js typescript tailwind-css

Answers (1)

Accepted Answer Available
Accepted Answer
June 22, 2025 Score: 1 Rep: 27,280 Quality: High Completeness: 80%

For both the Box Icons and Font Awesome stylesheets they have a display declaration that override Tailwind:

.bx {
  …
  display: inline-block;
}

.fa {
  display: inline-block;
  …
}

Solutions

Important

You can work around this by using !important, md:hidden!:

  text

Removing the utilities cascade layer

You could also remove the cascade layer that all Tailwind utilities are placed in. Though do be aware that Tailwind CSS is meant to be used with these cascade layers.

@layer theme, base, components;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
  text

Import stylesheets locally

You can try @importing the Box Icons and Font Awesome stylesheets into the Tailwind CSS source stylesheet. This allows you to place them in an appropriate layer, ensuring rules are overridden appropriately. Though this solution relies on the these stylesheets referencing the font files in a way that is compatible with Tailwind:

  1. Install the node packages: 
    $ npm install font-awesome boxicons
  2. In your CSS file: 
    @import "tailwindcss";
    @import "boxicons" layer(components);
@import "font-awesome" layer(components);
  3. Remove the CDN links in the .