How to remove height: auto

[darkstarx]

When I import tailwindcss like this in my app.css

@import 'tailwindcss';

it makes my resulting app.css containing

  img, video {
    max-width: 100%;
    height: auto;
  }

It breakes all <img height="xxx"> coming from the server dynamically (I can't modify them somehow).

So I need the resulting app.css doesn't contain this height: auto;. How can I achieve this?

[pushkarsinghh]

You can override Tailwind’s height: auto like this:

img, video {
  height: unset !important;
}

Place this after your Tailwind import to ensure it takes precedence.

Or, to remove all base styles (including height: auto), disable preflight in tailwind.config.js:

module.exports = {
  corePlugins: {
    preflight: false,
  },
};

Just note that this removes all Tailwind resets.

[darkstarx]

No, it won't work. height: unset !important; makes the <img height="100px"> attribute not working.

[darkstarx]

As far as I know, tailwind.config.js is deprecated in Tailwind 4 and is not recommended. Instead, all configuration is in app.css now.

[McVyp]

[darkstarx]

No, it doesn't work as well. The reason is the same. You can verify this by trying it yourself.

unset, revert, inherit don't work.
The only variant is

@import 'tailwindcss';

@layer base {
  img[height] {
    height: 100px;
  }
}

i.e. resetting with the concrete value. But that is not a solution since we can't specify any concrete value.

[wongjn]

You could:

• Disable preflight and then add your own copy of preflight with the offending rule modified/removed.
• Have some extra process run after Tailwind that modifies/removes the offending CSS rule.

[darkstarx]

You could:

• Disable preflight and then add your own copy of preflight with the offending rule modified/removed.

Great! Thanks a lot!!! I could'n find how to disable it, and decided to remove specific tags by adding a vite plugin, which seems a bit ugly for me.