tailwindcss-blueprint

Tailwind CSS BluePrint Plugin

a Tailwind CSS plugin to help you build layouts without creating a bunch of containers and wrappers, by leveraging the power of CSS Grid.

to understand the concept behind this plugin, please check out this video by Kevin Powell: https://www.youtube.com/watch?v=c13gpBrnGEw

Installation

You can install this plugin via npm:

 npm install -D tailwindcss-blueprint

Or via yarn:

 yarn add -D tailwindcss-blueprint

Or via pnpm:

pnpm add -D tailwindcss-blueprint

Usage

// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('tailwindcss-blueprint'),
        // ...
    ],
}

to use the plugin, you need to add the blueprint-main class to the parent element of the layout you want to build, this will create a grid container with the three sections: full-width, breakout, and content. by default, all the children will be placed in the content section, but you can use the size-full-w class to make an element span the full width of the grid container, or the size-breakout class to make an element take more than one

Examples

Basic Usage

<div class="blueprint-main">
    <nav class="size-full-w">
        ...
    </nav>
    <section>
        ...
    </section>
    <section class="size-full-w">
        ...
    </section>
    <section>
        ...
    </section>
    <footer class="size-full-w">
        ...
    </footer>
</div>

Blog article content

without the plugin, you would have to wrap the content of the article in a container to achieve the desired layout.

<div class="flex flex-col">
    <div class="max-w-5xl mx-auto">
        <p>...</p>
    </div>
    <div class="bg-blue-500 text-white ">
        <div class="max-w-5xl mx-auto">
            <h2 class="text-xl">This is a title</h2>
            <p>...</p>
        </div>
    </div>
    <div class="max-w-5xl mx-auto">
        <p>...</p>
    </div>
</div>

with the plugin, you can achieve the same result without wrapping the content in a container.

    <div class="blueprint-main">
        <p>...</p>
        <div class="bg-blue-500 text-white size-full-w blueprint-main">
            <h2 class="text-xl">This is a title</h2>
            <p>...</p>
        </div>
        <p>...</p>
    </div>

Customizing the breakouts

by default, the plugin has the following breakouts:

{
    main: {
        breakouts: {
            'content': {
                min: ['100% - 2rem', '64rem'],
            },
            'breakout': {
                min: '0',
                max: '1fr',
            },
            'full-w': {
                min: '1rem',
                max: '1fr',
            },
        },
        default: 'content'
    }
}

you can customize the breakouts or create new blueprints by passing a configuration object to the plugin.

// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('tailwindcss-blueprint')({
            card: {
                breakouts: {
                    'content': '1fr',
                    'full-w': '2rem',
                },
                default: 'content'
            },
            main: {
                breakouts: {
                    'content': {
                        min: ['100% - 2rem', '64rem'],
                        max: undefined,
                    },
                    'breakout': {
                        min: '0',
                        max: '1fr',
                    },
                    'full-w': {
                        min: '1rem',
                        max: '1fr',
                    },
                },
                default: 'content'
            },
        }),
        // ...
    ],
}

and now you can use the blueprint-card class to create a grid container with a different set of breakouts

<div class="blueprint-card">
    <div class="size-full-w">
        <input type="radio" name="radio">
        <label>Radio</label>
    </div>
    <img src="..." alt="..." class="size-e-full-w">
    <p class="size-e-full-w">...</p>
    <div class="size-full-w">
        <button>Button</button>
    </div>
</div>

default

you can also change the default section that the children will be placed in by passing the default property to the configuration object.