lucide-static font: font-size: inherit prevents Tailwind CSS utility overrides

[punga78]

Problem

The lucide-static/font/lucide.css file contains font-size: inherit; which prevents CSS utility frameworks like Tailwind CSS from overriding the icon size.

Why it's a problem

When using Tailwind CSS 4 with @layer system:

• Lucide CSS is imported without a layer, so it has higher specificity
• font-size: inherit overrides Tailwind utility classes like text-lg, text-xl
• Even using @layer tailwind-base with font-size: unset doesn't work

Proposed solutions

Option A: Remove font-size: inherit entirely

Option B: Provide a CSS custom property

font-size: var(--lucide-font-size, inherit);

Option C: Provide two CSS files

• lucide.css - current behavior
• lucide-minimal.css - without opinionated styles

Environment

• lucide-static: v0.555.0
• Tailwind CSS: v4

[mariepowerscrews]

Goal: Make Lucide’s CSS also live in a layer that comes before Tailwind’s utilities layer.
In your main CSS (e.g. app.css):

/* 1. Declare the layer order */
@layer lucide, base, components, utilities;

/* 2. Import Lucide into the lucide layer */
@import "lucide-static/font/lucide.css" layer(lucide);

/* 3. Import Tailwind v4 (it populates base/components/utilities) */
@import "tailwindcss";

1. Option A – Remove font-size: inherit
2. Option B – font-size: var(--lucide-font-size, inherit);
3. Option C – Two CSS files (lucide.css + lucide-minimal.css)