Background Grid
| Class | Styles |
|---|---|
bg-grid-<theme-color> | background-size: var(--tw-bg-grid-w, 32px) var(--tw-bg-grid-h, 32px);
background-image: linear-gradient(to right, var(--<theme-color>) var(--tw-bg-grid-border-w, 1px), transparent 0px), linear-gradient( to bottom, var(--<theme-color>) var(--tw-bg-grid-border-w, 1px), transparent 0px); |
bg-grid-(<custom-property>) | background-size: var(--tw-bg-grid-w, 32px) var(--tw-bg-grid-h, 32px);
background-image: linear-gradient(to right, var(<custom-property>) var(--tw-bg-grid-border-w, 1px), transparent 0px), linear-gradient( to bottom, var(<custom-property>) var(--tw-bg-grid-border-w, 1px), transparent 0px); |
bg-grid-[<arbitrary-value>] | background-size: var(--tw-bg-grid-w, 32px) var(--tw-bg-grid-h, 32px);
background-image: linear-gradient(to right, <arbitrary-value> var(--tw-bg-grid-border-w, 1px), transparent 0px), linear-gradient( to bottom, <arbitrary-value> var(--tw-bg-grid-border-w, 1px), transparent 0px); |
Examples
Basic
<div class="bg-grid-gray-700 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)]"></div>Size
| Class | Styles |
|---|---|
bg-grid-size-<theme-spacing> | --tw-bg-grid-w: calc(var(--spacing) * <theme-spacing>);
--tw-bg-grid-h: calc(var(--spacing) * <theme-spacing>); |
bg-grid-size-<number> | --tw-bg-grid-w: calc(var(--spacing) * <number>);
--tw-bg-grid-h: calc(var(--spacing) * <number>); |
bg-grid-size-(<custom-property>) | --tw-bg-grid-w: var(<custom-property>);
--tw-bg-grid-h: var(<custom-property>); |
bg-grid-size-[<arbitrary-value>] | --tw-bg-grid-w: <arbitrary-value>;
--tw-bg-grid-h: <arbitrary-value>; |
<div class="bg-grid-size-4 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)] bg-grid-gray-700"></div>Width
| Class | Styles |
|---|---|
bg-grid-w-<theme-spacing> | --tw-bg-grid-w: calc(var(--spacing) * <theme-spacing>); |
bg-grid-w-<number> | --tw-bg-grid-w: calc(var(--spacing) * <number>); |
bg-grid-w-(<custom-property>) | --tw-bg-grid-w: var(<custom-property>); |
bg-grid-w-[<arbitrary-value>] | --tw-bg-grid-w: <arbitrary-value>; |
<div class="bg-grid-w-16 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)] bg-grid-gray-700"></div>Height
| Class | Styles |
|---|---|
bg-grid-h-<theme-spacing> | --tw-bg-grid-h: calc(var(--spacing) * <theme-spacing>); |
bg-grid-h-<number> | --tw-bg-grid-h: calc(var(--spacing) * <number>); |
bg-grid-h-(<custom-property>) | --tw-bg-grid-h: var(<custom-property>); |
bg-grid-h-[<arbitrary-value>] | --tw-bg-grid-h: <arbitrary-value>; |
<div class="bg-grid-h-16 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)] bg-grid-gray-700"></div>Border Width
| Class | Styles |
|---|---|
bg-grid-border-<number> | --tw-bg-grid-border-w: <number>px; |
bg-grid-border-(length:<custom-property>) | --tw-bg-grid-border-w: var(<custom-property>); |
bg-grid-border-[<arbitrary-value>] | --tw-bg-grid-border-w: <arbitrary-value>; |
<div class="bg-grid-border-2 h-48 bg-center shadow-[inset_0_0_1rem_2rem_var(--sl-color-black)] bg-grid-gray-700"></div>