Tailwind Stylesheet

Inside the src/app.css file, styles for the h1 and h2 heading tags should be based on or built upon the foundational layer of the Tailwind CSS framework. This ensures that the h1 and h2 tags share the exact same styles, conforming to SEO standards. Meanwhile, the rest of the titles on a page can maintain uniformity in size. If larger headings are necessary, they can be overridden.

css

/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1, h2, h3, h4, h5, h6 {
        @apply font-main font-serif text-grey-500
    }

    h1, h2 {
        @apply text-2xl md:text-4xl
    }

    h3 {
        @apply text-xl
    }

    p {
        @apply font-sans text-base text-grey-700
    }
}

/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1, h2, h3, h4, h5, h6 {
        @apply font-main font-serif text-grey-500
    }

    h1, h2 {
        @apply text-2xl md:text-4xl
    }

    h3 {
        @apply text-xl
    }

    p {
        @apply font-sans text-base text-grey-700
    }
}

Tailwind Stylesheet ​

Tailwind Stylesheet