Novatura Tailwind Presets

A collection of opinionated Tailwind CSS presets

Global CSS

html {
    scroll-behavior: smooth;
}

h1,h2,h3 {
    text-wrap: balance;
}

Tailwind Config

theme: {
    container: {
        center: true,
        padding: '1rem',
    },
}

Block content layout

Block content containing sections with a headline and a paragraph.

<div class="py-16 space-y-16">
    <section class="container space-y-4">
        <div class="space-y-1">
            <h2 class="text-5xl">Section 1 Headline</h2>
            <p class="text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia unde commodi fuga sunt, cupiditate distinctio. Asperiores, eaque quia delectus provident non labore suscipit reprehenderit deleniti est porro quibusdam esse perferendis?
        </p>
    </section>
    <section class="container space-y-4">
        <div class="space-y-1">
            <h2 class="text-5xl">Section 2 Headline</h2>
            <p class="text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia unde commodi fuga sunt, cupiditate distinctio. Asperiores, eaque quia delectus provident non labore suscipit reprehenderit deleniti est porro quibusdam esse perferendis?
        </p>
    </section>
</div>

Section 1 Headline

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia unde commodi fuga sunt, cupiditate distinctio. Asperiores, eaque quia delectus provident non labore suscipit reprehenderit deleniti est porro quibusdam esse perferendis?

Section 2 Headline

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia unde commodi fuga sunt, cupiditate distinctio. Asperiores, eaque quia delectus provident non labore suscipit reprehenderit deleniti est porro quibusdam esse perferendis?

Containerised Flex

A flex section - usually for when your content is a little too wide for 50/50

<section class="relative py-16">
    <div class="container flex flex-col lg:flex-row gap-12 items-center">
        <div class="space-y-4">
            <h1 class="text-5xl">
                An incredible title
            </h1>
            <p class="text-xl">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto in sunt ullam sed provident, omnis quam deserunt quos natus autem asperiores totam id explicabo et optio, veritatis dolorum temporibus repellat.
            </p>
        </div>
        <div class="space-y-4">
            <div class="aspect-video bg-black w-[512px]"></div>
        </div>
    </div>
</section>

An incredible title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto in sunt ullam sed provident, omnis quam deserunt quos natus autem asperiores totam id explicabo et optio, veritatis dolorum temporibus repellat.

Containerised Grid

A 50/50 grid in a container

<section class="relative py-16">
    <div class="container grid gap-12 lg:grid-cols-2 items-center">
        <div class="space-y-4">
            <h1 class="text-5xl">
                An incredible title
            </h1>
            <p class="text-xl">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto in sunt ullam sed provident, omnis quam deserunt quos natus autem asperiores totam id explicabo et optio, veritatis dolorum temporibus repellat.
            </p>
        </div>
        <div class="space-y-4">
            <div class="aspect-video bg-black"></div>
        </div>
    </div>
</section>

An incredible title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto in sunt ullam sed provident, omnis quam deserunt quos natus autem asperiores totam id explicabo et optio, veritatis dolorum temporibus repellat.

Containerised Grid with Background

A 50/50 grid in a container with a full-width background

<section class="relative py-16">
    <div class="container relative z-10 grid lg:grid-cols-2 gap-8 lg:gap-0">
        <div class="space-y-4 lg:pr-8">
            <h1 class="text-5xl">
                An incredible title
            </h1>
            <p class="text-xl">
                Both divs are in a container, 50/50 width but the background overflows to full width. If it needs to be an image, that works too - either change the absolute div for an img or use css.
            </p>
        </div>
        <div class="lg:pl-8 text-xl">
            2nd content block
        </div>
    </div>
    <div class="hidden lg:block absolute z-0 inset-y-0 right-0 left-1/2 bg-gradient-to-tr from-blue-500 to-fuchsia-500"></div>
</section>

An incredible title

Both divs are in a container, 50/50 width but the background overflows to full width. If it needs to be an image, that works too - either change the absolute div for an img or use css.

2nd content block

Icon List Item

A list item (li) with a placeholder for an icon - use astro-icon, react-icons, or similar

<li class="flex items-center gap-2">
    <!-- Replace this div with your icon -->
    <div class="w-5 h-5 rounded-t-full rounded-br-full border-2 border-blue-500"></div>
    <span>Item</span>
</li>
  • Item

    • Simple Hero Section

    Page header with padding for a fixed navigation bar.

    <section class="bg-slate-900 pb-32 pt-52">
    <div class="container">
        <div class="max-w-3xl space-y-4">
            <h1 class="text-7xl text-white">
                Your awesome headline
            </h1>
            <p class="text-2xl text-white/80">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas autem quidem alias maiores ullam accusamus dignissimos ipsum odit.
            </p>
        </div>
    </div>
</section>

    Your awesome headline

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas autem quidem alias maiores ullam accusamus dignissimos ipsum odit.

    Fixed nav (80px)