tailwindcss-patterns

Release 0.1.2

80+ Geometric background patterns for TailwindCSS

Homepage Repository npm Download

Keywords
tailwindcss, tailwindcss-plugin, patterns, background
License
MIT
Install
npm install tailwindcss-patterns@0.1.2

Documentation

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:

Stats

Dependencies
0
Dependent packages
0
Dependent repositories
0
Total releases
3
Latest release
First release
Stars
2
Forks
0
Watchers
1
Contributors
1
Repository size
34.7 MB
SourceRank
7

Releases

0.1.2
0.1.1
0.1.0

Contributors

Crevans02


See all contributors

Login to resync this project