tailwindcss-basic-patterns

Plugin for Tailwind CSS to create utility classes for SVG backgrounds.

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-basic-patterns

# Using Yarn
yarn add tailwindcss-basic-patterns

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-basic-patterns"),
    // ...
  ],
};

Usage

Example Usage

<section class="relative">
  <div class="absolute inset-0 bg-grid-slate-800/[0.1]"></div>
  <div class="relative container">
    <h1 class="text-3xl font-semibold">Some content goes here</h1>
  </div>
</section>

Configuration

You can configure which values and variants are generated by this plugin under the colors keys in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {},
  },
};

Credits

Basic Pattern Repository by Thomas Michael Semmler

https://patterns.helloyes.dev/