Background Radial

Examples

Basic

<div class="bg-radial-gray-700 ..." />

.bg-radial-COLOR: {
    background-size: var(--tw-bg-radial-gap-x, 32px) var(--tw-bg-radial-gap-y, 32px);
    background-image: radial-gradient(circle, COLOR var(--tw-bg-radial-size, 1px), transparent 0px);
}

Center

<div class="bg-center bg-radial-gray-700 ..." />

background-position

Shadow

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

box-shadow

Spacing

X and Y

<div class="bg-radial-gray-700 bg-radial-gap-4 ..." />

.bg-radial-gap-SPACING: {
    --tw-bg-radial-gap-x: SPACING;
    --tw-bg-radial-gap-y: SPACING;
}

CSS custom properties (variables)

X

<div class="bg-radial-gray-700 bg-radial-gap-x-16 ..." />

.bg-radial-gap-x-SPACING: {
    --tw-bg-radial-gap-x: SPACING;
}

CSS custom properties (variables)

Y

<div class="bg-radial-gray-700 bg-radial-gap-y-16 ..." />

.bg-radial-gap-y-SPACING: {
    --tw-bg-radial-gap-y: SPACING;
}

CSS custom properties (variables)

Size

<div class="bg-radial-gray-700 bg-radial-size-2 ..." />

.bg-radial-size-BORDER_WIDTH: {
    --tw-bg-radial-size: BORDER_WIDTH;
}

CSS custom properties (variables)

Usage

Single import

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

Multi import

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