Adding base styles does not work

[jannes]

Following the Tailwind docs on how to add base styles (https://tailwindcss.com/docs/adding-base-styles)
I changed the styles.css to the following:

/* Tailwind base - put variables under: tailwind.config.js */
@import "node_modules/tailwindcss/base";
/* Tailwind component classes registered by plugins*/
@import "node_modules/tailwindcss/components";
/* Site Specific */
@import "assets/css/site";
/* Tailwind's utility classes - generated based on config file */
@import "node_modules/tailwindcss/utilities";

@layer base {
  h1 {
    @apply text-2xl font-bold;
  }
  h2 {
    @apply text-xl font-bold;
  }
}

As I added these extra lines on the first reload of the page (just using hugo server) the styles appear correctly.
But once I click through the pages or do a manual reload of the page, the headers become unstyled again and stay that way.
I do not understand how this could happen, any idea?

[dirkolbrich]

Works on my machine *. Do you get any errors? I tried it with tailwind 2.0 and background colors.

/* Tailwind base - put variables under: tailwind.config.js */
@import "node_modules/tailwindcss/base";
/* Tailwind component classes registered by plugins*/
@import "node_modules/tailwindcss/components";
/* Site Specific */
@import "assets/css/site";
/* Tailwind's utility classes - generated based on config file */
@import "node_modules/tailwindcss/utilities";

@layer base {
  h1 {
    @apply text-5xl bg-red-400;
  }
  h2 {
    @apply text-3xl bg-green-700;
  }
}

[jannes]

I did not get any errors. I switched to a different theme now, so can't test it anymore. If it works for you, it was probably some problem with my setup then.