tailwindcss-blueprint
v1.0.1
Published
Avoid nested containers using the power of grid
Downloads
1
Maintainers
Readme
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.