0.1.2 • Published 2 years ago

tailwindcss-patterns v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

80+ geometric background patterns for TailwindCSS

About

This package allows you to quickly add repeating background patterns to your TailwindCSS projects. We've collected and designed 80+ geometric patterns that can be applied as utility classes in TailwindCSS.

Live Demo

Creators

This package is brought to you by MagmaFlow, we offer unlimited TailwindCSS development for a fixed monthly fee to startups, agencies and freelancers. Find out more here.

Installation

Install the plugin from npm:

npm i tailwindcss-patterns

Setup

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

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-patterns'),
    // ...
  ],
}

Usage

There are two main classes you can use:

Pattern

Add a background pattern using the following schema pattern-{type}-{color}/{opacity}.

You can find a list of patterns here.

For example:

<div class="pattern-hive-amber-500/100"...

Scale

You can scale a background pattern, in line with its aspect ratio using the following schema pattern-{type}-scale-{percent}.

For example:

<div class="pattern-hive-scale-50"...

Scaling options are the same as TailwindCSS's scale options (they can be found here.)

You may want to use a custom scaling multiplier. You can do that using the following schema pattern-{type}-scale-[multiplier].

For example:

<div class="pattern-hive-scale-[2.5]"...

Putting it all together

You can combine these classes with a generic background class to create the full effect.

<div class="bg-amber-300 pattern-hive-amber-700/50 pattern-hive-scale-[0.5]"></div>

Pattern types

Credits

This package couldn't have been put together without patterns from:

tailwindcsstailwindcss-pluginpatternsbackground
@everything-registry/sub-chunk-2874@infinitebrahmanuniverse/nolb-tail
0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago