Conclution
It’s because browsers apply default styles to HTML elements, and Tailwind CSS removes those defaults using its built-in reset called Preflight.
By default, browsers apply their own styles to HTML elements like headings and buttons.
For example, <h1> tags might appear bold and large, and <button> elements usually have borders and background colors - even if you haven’t added any CSS yet.
In general, CSS frameworks override these defaults.
However, Tailwind CSS includes a feature called Preflight, which resets these browser styles to ensure consistency and avoid conflicts across different browsers.
On contract, Tailwind CSS has a function to reset those design from browser; Preflight. Preflight works to avoid any posible designing conflict in browser.
What is a user agent stylesheet?
What Happens When You Import Tailwind CSS ?
When you add the following line in your css file:
@import "tailwindcss";
…it’s actually a shorthand for importing several internal layers:
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base); // ← This is the reset (Preflight)
@import "tailwindcss/utilities.css" layer(utilities);
The key part here is preflight.css, which strips away browser default styles.
If you remove this line, you’ll start seeing the original browser styling again.
Also, Tailwind CSS allows you to extend Preflight inside the @layser base section.