├── .gitignore ├── package.json ├── LICENSE └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-patterns", 3 | "version": "0.1.2", 4 | "description": "80+ Geometric background patterns for TailwindCSS", 5 | "main": "src/index.js", 6 | "source": "src/index.js", 7 | "author": "MagmaFlow", 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/magmaflowco/tailwindcss-patterns.git" 12 | }, 13 | "keywords": [ 14 | "tailwindcss", 15 | "tailwindcss-plugin", 16 | "patterns", 17 | "background" 18 | ], 19 | "bugs": { 20 | "url": "https://github.com/magmaflowco/tailwindcss-patterns/issues" 21 | }, 22 | "homepage": "https://github.com/magmaflowco/tailwindcss-patterns#readme", 23 | "devDependencies": { 24 | "tailwindcss": "^3.1.7" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 MagmaFlow 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 80+ geometric background patterns for TailwindCSS 2 | 3 | ## About 4 | 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. 5 | 6 | **[Live Demo](https://patterns.magmaflow.co)** 7 | 8 | ## Creators 9 | *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](https://magmaflow.co).* 10 | 11 | ## Installation 12 | Install the plugin from npm: 13 | ``` bash 14 | npm i tailwindcss-patterns 15 | ``` 16 | 17 | ## Setup 18 | Then add the plugin to your tailwind.config.js file: 19 | ```javascript 20 | module.exports = { 21 | theme: { 22 | // ... 23 | }, 24 | plugins: [ 25 | require('tailwindcss-patterns'), 26 | // ... 27 | ], 28 | } 29 | ``` 30 | 31 | ## Usage 32 | There are two main classes you can use: 33 | 34 | ### Pattern 35 | Add a background pattern using the following schema `pattern-{type}-{color}/{opacity}`. 36 | 37 | You can find a list of patterns [here](#pattern-types). 38 | 39 | For example: 40 | ```html 41 |
66 | ``` 67 | 68 | ### Pattern types 69 | 70 | - `jigsaw` - [Live Demo](https://patterns.magmaflow.co/#jigsaw) 71 | - `ripples` - [Live Demo](https://patterns.magmaflow.co/#ripples) 72 | - `topography` - [Live Demo](https://patterns.magmaflow.co/#topography) 73 | - `texture` - [Live Demo](https://patterns.magmaflow.co/#texture) 74 | - `hub` - [Live Demo](https://patterns.magmaflow.co/#hub) 75 | - `architect` - [Live Demo](https://patterns.magmaflow.co/#architect) 76 | - `voxel` - [Live Demo](https://patterns.magmaflow.co/#voxel) 77 | - `crosses` - [Live Demo](https://patterns.magmaflow.co/#crosses) 78 | - `graph` - [Live Demo](https://patterns.magmaflow.co/#graph) 79 | - `squares` - [Live Demo](https://patterns.magmaflow.co/#squares) 80 | - `falling-triangles` - [Live Demo](https://patterns.magmaflow.co/#falling-triangles) 81 | - `pies` - [Live Demo](https://patterns.magmaflow.co/#pies) 82 | - `hexagons` - [Live Demo](https://patterns.magmaflow.co/#hexagons) 83 | - `zig-zag` - [Live Demo](https://patterns.magmaflow.co/#zig-zag) 84 | - `zig-zag-2` - [Live Demo](https://patterns.magmaflow.co/#zig-zag-2) 85 | - `autumn` - [Live Demo](https://patterns.magmaflow.co/#autumn) 86 | - `temple` - [Live Demo](https://patterns.magmaflow.co/#temple) 87 | - `death-star` - [Live Demo](https://patterns.magmaflow.co/#death-star) 88 | - `overlapping-hexagons` - [Live Demo](https://patterns.magmaflow.co/#overlapping-hexagons) 89 | - `stars` - [Live Demo](https://patterns.magmaflow.co/#stars) 90 | - `bamboo` - [Live Demo](https://patterns.magmaflow.co/#bamboo) 91 | - `floor` - [Live Demo](https://patterns.magmaflow.co/#floor) 92 | - `cork-screw` - [Live Demo](https://patterns.magmaflow.co/#cork-screw) 93 | - `kiwi` - [Live Demo](https://patterns.magmaflow.co/#kiwi) 94 | - `lips` - [Live Demo](https://patterns.magmaflow.co/#lips) 95 | - `checkered` - [Live Demo](https://patterns.magmaflow.co/#checkered) 96 | - `x-equals` - [Live Demo](https://patterns.magmaflow.co/#x-equals) 97 | - `bevel-circle` - [Live Demo](https://patterns.magmaflow.co/#bevel-circle) 98 | - `brick-wall` - [Live Demo](https://patterns.magmaflow.co/#brick-wall) 99 | - `fancy-rectangles` - [Live Demo](https://patterns.magmaflow.co/#fancy-rectangles) 100 | - `heavy-rain` - [Live Demo](https://patterns.magmaflow.co/#heavy-rain) 101 | - `overlapping-circles` - [Live Demo](https://patterns.magmaflow.co/#overlapping-circles) 102 | - `plus` - [Live Demo](https://patterns.magmaflow.co/#plus) 103 | - `plus-connected` - [Live Demo](https://patterns.magmaflow.co/#plus-connected) 104 | - `volcano-lamp` - [Live Demo](https://patterns.magmaflow.co/#volcano-lamp) 105 | - `wiggle` - [Live Demo](https://patterns.magmaflow.co/#wiggle) 106 | - `bubbles` - [Live Demo](https://patterns.magmaflow.co/#bubbles) 107 | - `cage` - [Live Demo](https://patterns.magmaflow.co/#cage) 108 | - `connections` - [Live Demo](https://patterns.magmaflow.co/#connections) 109 | - `current` - [Live Demo](https://patterns.magmaflow.co/#current) 110 | - `diagonal-stripes` - [Live Demo](https://patterns.magmaflow.co/#diagonal-stripes) 111 | - `flipped-diamonds` - [Live Demo](https://patterns.magmaflow.co/#flipped-diamonds) 112 | - `houndstooth` - [Live Demo](https://patterns.magmaflow.co/#houndstooth) 113 | - `leaf` - [Live Demo](https://patterns.magmaflow.co/#leaf) 114 | - `lines-in-motion` - [Live Demo](https://patterns.magmaflow.co/#lines-in-motion) 115 | - `moroccan` - [Live Demo](https://patterns.magmaflow.co/#moroccan) 116 | - `morphing-diamonds` - [Live Demo](https://patterns.magmaflow.co/#morphing-diamonds) 117 | - `rails` - [Live Demo](https://patterns.magmaflow.co/#rails) 118 | - `rain` - [Live Demo](https://patterns.magmaflow.co/#rain) 119 | - `squares-in-squares` - [Live Demo](https://patterns.magmaflow.co/#squares-in-squares) 120 | - `stripes` - [Live Demo](https://patterns.magmaflow.co/#stripes) 121 | - `tic-tac-toe` - [Live Demo](https://patterns.magmaflow.co/#tic-tac-toe) 122 | - `aztec` - [Live Demo](https://patterns.magmaflow.co/#aztec) 123 | - `bank-note` - [Live Demo](https://patterns.magmaflow.co/#bank-note) 124 | - `boxes` - [Live Demo](https://patterns.magmaflow.co/#boxes) 125 | - `circles-and-squares` - [Live Demo](https://patterns.magmaflow.co/#circles-and-squares) 126 | - `circuit-board` - [Live Demo](https://patterns.magmaflow.co/#circuit-board) 127 | - `curtain` - [Live Demo](https://patterns.magmaflow.co/#curtain) 128 | - `clouds` - [Live Demo](https://patterns.magmaflow.co/#clouds) 129 | - `eyes` - [Live Demo](https://patterns.magmaflow.co/#eyes) 130 | - `tiles` - [Live Demo](https://patterns.magmaflow.co/#tiles) 131 | - `groovy` - [Live Demo](https://patterns.magmaflow.co/#groovy) 132 | - `intersecting-circles` - [Live Demo](https://patterns.magmaflow.co/#intersecting-circles) 133 | - `melt` - [Live Demo](https://patterns.magmaflow.co/#melt) 134 | - `overlapping-diamonds` - [Live Demo](https://patterns.magmaflow.co/#overlapping-diamonds) 135 | - `wood` - [Live Demo](https://patterns.magmaflow.co/#wood) 136 | - `polka` - [Live Demo](https://patterns.magmaflow.co/#polka) 137 | - `signal` - [Live Demo](https://patterns.magmaflow.co/#signal) 138 | - `slanted` - [Live Demo](https://patterns.magmaflow.co/#slanted) 139 | - `lines-diagonal-right` - [Live Demo](https://patterns.magmaflow.co/#lines-diagonal-right) 140 | - `lines-diagonal-left` - [Live Demo](https://patterns.magmaflow.co/#lines-diagonal-left) 141 | - `lines-horizontal` - [Live Demo](https://patterns.magmaflow.co/#lines-horizontal) 142 | - `lines-vertical` - [Live Demo](https://patterns.magmaflow.co/#lines-vertical) 143 | - `sprinkles` - [Live Demo](https://patterns.magmaflow.co/#sprinkles) 144 | - `waves` - [Live Demo](https://patterns.magmaflow.co/#waves) 145 | - `hive` - [Live Demo](https://patterns.magmaflow.co/#hive) 146 | - `squiggles` - [Live Demo](https://patterns.magmaflow.co/#squiggles) 147 | - `triangles` - [Live Demo](https://patterns.magmaflow.co/#triangles) 148 | - `grid` - [Live Demo](https://patterns.magmaflow.co/#grid) 149 | - `zebra` - [Live Demo](https://patterns.magmaflow.co/#zebra) 150 | 151 | ## Credits 152 | This package couldn't have been put together without patterns from: 153 | - [Hero Patterns](https://heropatterns.com/) 154 | - [Pattern Monster](https://pattern.monster/) 155 | - [MadeByCrevans](https://madebycrevans.com/) 156 | --------------------------------------------------------------------------------