Background Grid

Examples

Basic

<div class="bg-grid-gray-800 ..." />

.bg-grid-COLOR: {
    background-size: var(--tw-bg-grid-w, 32px) var(--tw-bg-grid-h, 32px);
    background-image: linear-gradient(to right, COLOR var(--tw-bg-grid-border-w, 1px), transparent 0px), linear-gradient( to bottom, COLOR var(--tw-bg-grid-border-w, 1px), transparent 0px);
}

Center

<div class="bg-center bg-grid-gray-800 ..." />

background-position

Shadow

<div class="bg-center shadow-[inset_0_0_4rem_2rem_theme(colors.gray.900)] bg-grid-gray-800 ..." />

box-shadow

Sizes

Width and Height

<div class="bg-grid-gray-800 bg-grid-4 ..." />

.bg-grid-SPACING: {
    --tw-bg-grid-w: SPACING;
    --tw-bg-grid-h: SPACING;
}

CSS custom properties (variables)

Rows

<div class="bg-grid-gray-800 bg-grid-w-16 ..." />

.bg-grid-w-SPACING: {
    --tw-bg-grid-w: SPACING;
}

CSS custom properties (variables)

Columns

<div class="bg-grid-gray-800 bg-grid-h-16 ..." />

.bg-grid-h-SPACING: {
    --tw-bg-grid-h: SPACING;
}

CSS custom properties (variables)

Border Width

<div class="bg-grid-gray-800 bg-grid-border-2 ..." />

.bg-grid-border-BORDER_WIDTH: {
    --tw-bg-grid-border-w: BORDER_WIDTH;
}

CSS custom properties (variables)

Usage

Single import

// tailwind.config.js
 
import { bgGrid } from "tailwindcss-addons"
 
export default {
    plugins: [bgGrid],
}

Multi import

// tailwind.config.js
 
import { allAddons } from "tailwindcss-addons"
 
export default {
    plugins: [
        ...allAddons({
            bgGrid: false, // Enabled by default.
        }),
    ],
}