csstailwind-css

Will CSS styles overwrite Tailwind classes on the same element?

I’m using Tailwind CSS for styling my project, and I’m wondering about the priority of styles when combining Tailwind classes with custom CSS rules.

For example, this p element is styled using Tailwind’s text-sm and text-black classes. Now, in my styles.css file, I add:

p {
  font-size: 1rem;
  text-align: center;
}

Will this overwrite the Tailwind classes? How does the browser determine which styles to apply? Any insights into how Tailwind interacts with custom CSS stylesheets would be helpful!

Solution

  • Will this overwrite the Tailwind classes? How does the browser determine which styles to apply?

    No. .text-sm CSS rule from Tailwind CSS has specificity of (0, 1, 0), whereas your p rule has specificity of (0, 0, 1). The .text-sm rule has higher specificity than p and thus the former takes precedence over the later.