Installation

Add the tailwindcss-background-patterns plugin to your project:

# Install using npm
npm install --save-dev tailwindcss-background-patterns

# yarn
yarn add -D tailwindcss-background-patterns

# pnpm
pnpm add -D tailwindcss-background-patterns

# bun
bun add -D tailwindcss-background-patterns

Next

in v4 add following plugin in tailwind.css ( input css )

@import "tailwindcss";

@plugin "tailwindcss-background-patterns";

in v3 add following plugin in tailwind.config

/** @type {import('tailwindcss').Config} */
export default {
 plugins : [
	require('tailwindcss-background-patterns'),
	 ]
}

Usage

<div  class="bg-dot-black/10 dark:bg-dot-white/10 h-screen"></div>
<div  class="bg-grid-black/10 dark:bg-grid-white/10 h-screen"></div>
<div  class="bg-grid-small-black/10 dark:bg-grid-small-white/10 h-screen"></div>