Vielleicht hat hier ja jemand eine Idee dazu, aber aktuell macht mir die Tatsache Probleme das extra deklarierte Default Stile ignoriert werden, was mich fast dazu bringt Dinge wie Paragraphen, Headings und Co. als Komponenten anzulegen...

Aber zum Thema, ich hab für Grundelemente feste Stile zugewiesen, um das nicht ständig zu wiederholen, das ganze ist in der base.css auch zusammen gefasst, wie man hier sieht:

img {
    @apply rounded-sm;
}

p {
    @apply text-gray-200;
}

svg {
    @apply text-gray-200;
}

h1 {
    @apply text-white;
    @apply font-handwritten;
    @apply text-7xl;
}

h2 {
    @apply text-white font-handwritten text-6xl;
}

h3 {
    @apply text-white font-handwritten text-5xl;
}

h4 {
    @apply text-white font-handwritten text-4xl;
}

h5 {
    @apply text-white font-handwritten text-3xl;
}

h6 {
    @apply text-white font-handwritten text-2xl;
}

label {
    @apply text-white;
}

button {
    @apply text-white;
}

Das ganze wird dann auch in der Main-CSS Datei entsprechend importiert:

@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
@import "base.css";
@import "var.css";
@import "primevue.css";
/* @import "scrollbar.css"; */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font Face deklarationen, Animationen etc hier drunter */

Mein Problem ist aber, das trotzdem für h1 zB nur text-white und font-handwritten angewand wird, die Eigenschaften von text-7xl werden überschrieben:

Jetzt die Frage.... weiß jemand wieso es von Tailwind "ignoriert" wird? Ich tippe ja auf falsche Reihenfolge beim Import, aber leider müssen ja Import Statements vor dem Import von Tailwind stattfinden.
Möglichkeit wäre ja das ganze in der app.css direkt einzutragen, würde ich nur gerne vermeiden wegen der Übersichtlichkeit des ganzen.

Live kann man sich was ich meine ebenfalls anschauen hier:

DotSexy Staging

Wer wissen will wie die obere Box aufgebaut ist:

<Card>
	<p>Declarations styled with CSS:</p>
    <hr class="mb-4" />
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
</Card>

Also falls jemand Ideen hat gerne raus damit

Ah ja das mit dem @layer funktioniert, da hab ich das wohl bei einem Update übersehen das das nun "so" geht nur noch