@hongvanpc10/tailwindcss-12-column-grid

A plugin that provides utilities for making layout easier based on 12-column grids to design web pages.

Installation

npm i @hongvanpc10/tailwindcss-12-column-grid -D

or

yarn add @hongvanpc10/tailwindcss-12-column-grid --dev

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
	theme: {
		// ...
	},
	plugins: [
		require('@hongvanpc10/tailwindcss-12-column-grid'),
		// ...
	],
}

Usage

Here is example:

<div class="row">
	<div class="col-6">
		<div class="bg-blue-500 h-60"></div>
	</div>
	<div class="col-6">
		<div class="bg-blue-500 h-60"></div>
	</div>
</div>

To specify gutter, use class gutter-{size}, default is 1.5rem.

| Class | Spacing | | ----------- | --------- | | gutter-xs | 0.75rem | | gutter-sm | 1rem | | gutter-md | 1.25rem | | gutter-nm | 1.5rem | | gutter-lg | 1.75rem | | gutter-xl | 2rem |

Example:

<div class="row gutter-sm">
	<div class="col-6">
		<div class="bg-blue-500 h-60"></div>
	</div>
	<div class="col-6">
		<div class="bg-blue-500 h-60"></div>
	</div>
</div>

Configuration

You can configure gutter which values are generated by this plugin under the gutter key in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			gutter: {
				xs: '0.75rem',
				sm: '1rem',
				md: '1.25rem',
				lg: '1.75rem',
				xl: '2rem',
			},
		},
	},
}