Recommended way to add global styles (e.g. h1, p)

[bobbymannino]

In v4 what is the recommended way to add global base styles? is it;

@layer base {
  h1 {
    / * styles here */
  }
}

or is it something else? I'm aware that tw is a framework to stop global styles and you should use components like heading.svelte files but incase of a small project where that would be out of scope?

[philipp-spiess]

It depends on what you want to take presedence in your CSS in case of two rules with the same specificity. You can use @layer base like you've mentioned which ensures that your custom styles are always ordered before any Tailwind generated utilities will be applied.

As a general rule of thumb, utilities should probably be more specific though so what you're suggesting is great!

[bobbymannino]

To use utilities would it be something like;

/* app.css */
@utility h1 {
  /* styles here */
}

<!-- some html file -->
<h1 class='h1'>Heading 1</h1>

and everywhere where there is a h1 it would get the class h1?

[philipp-spiess]

I'm not sure I understand but if you add a utility, you have to also add the class to the element. If you want some style to apply to every element, you would add a regular element-based rule like the one you have at the top:

@layer base {
  h1 {
    / * styles here */
  }
}

[bobbymannino]

Perfect, thank you @philipp-spiess