@hongvanpc10/tailwindcss-12-column-grid v1.1.1

@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.

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',
			},
		},
	},
}