{"id":15289064,"url":"https://github.com/magmaflowco/tailwindcss-patterns","last_synced_at":"2025-04-13T06:32:01.479Z","repository":{"id":50620315,"uuid":"519643292","full_name":"magmaflowco/tailwindcss-patterns","owner":"magmaflowco","description":"80+ geometric background patterns for TailwindCSS","archived":false,"fork":false,"pushed_at":"2022-07-31T01:46:58.000Z","size":36499,"stargazers_count":36,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T23:11:11.886Z","etag":null,"topics":["tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/magmaflowco.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-30T23:54:07.000Z","updated_at":"2025-02-25T03:41:22.000Z","dependencies_parsed_at":"2022-09-24T16:13:07.660Z","dependency_job_id":null,"html_url":"https://github.com/magmaflowco/tailwindcss-patterns","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magmaflowco%2Ftailwindcss-patterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magmaflowco%2Ftailwindcss-patterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magmaflowco%2Ftailwindcss-patterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magmaflowco%2Ftailwindcss-patterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magmaflowco","download_url":"https://codeload.github.com/magmaflowco/tailwindcss-patterns/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248674659,"owners_count":21143760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwindcss","tailwindcss-plugin"],"created_at":"2024-09-30T15:58:41.184Z","updated_at":"2025-04-13T06:32:01.154Z","avatar_url":"https://github.com/magmaflowco.png","language":null,"readme":"# 80+ geometric background patterns for TailwindCSS\n\n## About\nThis 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.\n\n**[Live Demo](https://patterns.magmaflow.co)**\n\n## Creators\n*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).*\n\n## Installation\nInstall the plugin from npm:\n``` bash\nnpm i tailwindcss-patterns\n```\n\n## Setup\nThen add the plugin to your tailwind.config.js file:\n```javascript\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-patterns'),\n    // ...\n  ],\n}\n```\n\n## Usage\nThere are two main classes you can use:\n\n### Pattern\nAdd a background pattern using the following schema `pattern-{type}-{color}/{opacity}`.\n\nYou can find a list of patterns [here](#pattern-types).\n\nFor example:\n```html\n\u003cdiv class=\"pattern-hive-amber-500/100\"...\n```\n\n### Scale\nYou can scale a background pattern, in line with its aspect ratio using the following schema `pattern-{type}-scale-{percent}`.\n\nFor example:\n```html\n\u003cdiv class=\"pattern-hive-scale-50\"...\n```\n\nScaling options are the same as TailwindCSS's scale options (they can be found [here](https://tailwindcss.com/docs/scale).)\n\nYou may want to use a custom scaling multiplier. You can do that using the following schema `pattern-{type}-scale-[multiplier]`.\n\nFor example:\n```html\n\u003cdiv class=\"pattern-hive-scale-[2.5]\"...\n```\n\n### Putting it all together\n\nYou can combine these classes with a generic background class to create the full effect.\n```html\n\u003cdiv class=\"bg-amber-300 pattern-hive-amber-700/50 pattern-hive-scale-[0.5]\"\u003e\u003c/div\u003e\n```\n\n### Pattern types\n\n- `jigsaw` - [Live Demo](https://patterns.magmaflow.co/#jigsaw)\n- `ripples` - [Live Demo](https://patterns.magmaflow.co/#ripples)\n- `topography` - [Live Demo](https://patterns.magmaflow.co/#topography)\n- `texture` - [Live Demo](https://patterns.magmaflow.co/#texture)\n- `hub` - [Live Demo](https://patterns.magmaflow.co/#hub)\n- `architect` - [Live Demo](https://patterns.magmaflow.co/#architect)\n- `voxel` - [Live Demo](https://patterns.magmaflow.co/#voxel)\n- `crosses` - [Live Demo](https://patterns.magmaflow.co/#crosses)\n- `graph` - [Live Demo](https://patterns.magmaflow.co/#graph)\n- `squares` - [Live Demo](https://patterns.magmaflow.co/#squares)\n- `falling-triangles` - [Live Demo](https://patterns.magmaflow.co/#falling-triangles)\n- `pies` - [Live Demo](https://patterns.magmaflow.co/#pies)\n- `hexagons` - [Live Demo](https://patterns.magmaflow.co/#hexagons)\n- `zig-zag` - [Live Demo](https://patterns.magmaflow.co/#zig-zag)\n- `zig-zag-2` - [Live Demo](https://patterns.magmaflow.co/#zig-zag-2)\n- `autumn` - [Live Demo](https://patterns.magmaflow.co/#autumn)\n- `temple` - [Live Demo](https://patterns.magmaflow.co/#temple)\n- `death-star` - [Live Demo](https://patterns.magmaflow.co/#death-star)\n- `overlapping-hexagons` - [Live Demo](https://patterns.magmaflow.co/#overlapping-hexagons)\n- `stars` - [Live Demo](https://patterns.magmaflow.co/#stars)\n- `bamboo` - [Live Demo](https://patterns.magmaflow.co/#bamboo)\n- `floor` - [Live Demo](https://patterns.magmaflow.co/#floor)\n- `cork-screw` - [Live Demo](https://patterns.magmaflow.co/#cork-screw)\n- `kiwi` - [Live Demo](https://patterns.magmaflow.co/#kiwi)\n- `lips` - [Live Demo](https://patterns.magmaflow.co/#lips)\n- `checkered` - [Live Demo](https://patterns.magmaflow.co/#checkered)\n- `x-equals` - [Live Demo](https://patterns.magmaflow.co/#x-equals)\n- `bevel-circle` - [Live Demo](https://patterns.magmaflow.co/#bevel-circle)\n- `brick-wall` - [Live Demo](https://patterns.magmaflow.co/#brick-wall)\n- `fancy-rectangles` - [Live Demo](https://patterns.magmaflow.co/#fancy-rectangles)\n- `heavy-rain` - [Live Demo](https://patterns.magmaflow.co/#heavy-rain)\n- `overlapping-circles` - [Live Demo](https://patterns.magmaflow.co/#overlapping-circles)\n- `plus` - [Live Demo](https://patterns.magmaflow.co/#plus)\n- `plus-connected` - [Live Demo](https://patterns.magmaflow.co/#plus-connected)\n- `volcano-lamp` - [Live Demo](https://patterns.magmaflow.co/#volcano-lamp)\n- `wiggle` - [Live Demo](https://patterns.magmaflow.co/#wiggle)\n- `bubbles` - [Live Demo](https://patterns.magmaflow.co/#bubbles)\n- `cage` - [Live Demo](https://patterns.magmaflow.co/#cage)\n- `connections` - [Live Demo](https://patterns.magmaflow.co/#connections)\n- `current` - [Live Demo](https://patterns.magmaflow.co/#current)\n- `diagonal-stripes` - [Live Demo](https://patterns.magmaflow.co/#diagonal-stripes)\n- `flipped-diamonds` - [Live Demo](https://patterns.magmaflow.co/#flipped-diamonds)\n- `houndstooth` - [Live Demo](https://patterns.magmaflow.co/#houndstooth)\n- `leaf` - [Live Demo](https://patterns.magmaflow.co/#leaf)\n- `lines-in-motion` - [Live Demo](https://patterns.magmaflow.co/#lines-in-motion)\n- `moroccan` - [Live Demo](https://patterns.magmaflow.co/#moroccan)\n- `morphing-diamonds` - [Live Demo](https://patterns.magmaflow.co/#morphing-diamonds)\n- `rails` - [Live Demo](https://patterns.magmaflow.co/#rails)\n- `rain` - [Live Demo](https://patterns.magmaflow.co/#rain)\n- `squares-in-squares` - [Live Demo](https://patterns.magmaflow.co/#squares-in-squares)\n- `stripes` - [Live Demo](https://patterns.magmaflow.co/#stripes)\n- `tic-tac-toe` - [Live Demo](https://patterns.magmaflow.co/#tic-tac-toe)\n- `aztec` - [Live Demo](https://patterns.magmaflow.co/#aztec)\n- `bank-note` - [Live Demo](https://patterns.magmaflow.co/#bank-note)\n- `boxes` - [Live Demo](https://patterns.magmaflow.co/#boxes)\n- `circles-and-squares` - [Live Demo](https://patterns.magmaflow.co/#circles-and-squares)\n- `circuit-board` - [Live Demo](https://patterns.magmaflow.co/#circuit-board)\n- `curtain` - [Live Demo](https://patterns.magmaflow.co/#curtain)\n- `clouds` - [Live Demo](https://patterns.magmaflow.co/#clouds)\n- `eyes` - [Live Demo](https://patterns.magmaflow.co/#eyes)\n- `tiles` - [Live Demo](https://patterns.magmaflow.co/#tiles)\n- `groovy` - [Live Demo](https://patterns.magmaflow.co/#groovy)\n- `intersecting-circles` - [Live Demo](https://patterns.magmaflow.co/#intersecting-circles)\n- `melt` - [Live Demo](https://patterns.magmaflow.co/#melt)\n- `overlapping-diamonds` - [Live Demo](https://patterns.magmaflow.co/#overlapping-diamonds)\n- `wood` - [Live Demo](https://patterns.magmaflow.co/#wood)\n- `polka` - [Live Demo](https://patterns.magmaflow.co/#polka)\n- `signal` - [Live Demo](https://patterns.magmaflow.co/#signal)\n- `slanted` - [Live Demo](https://patterns.magmaflow.co/#slanted)\n- `lines-diagonal-right` - [Live Demo](https://patterns.magmaflow.co/#lines-diagonal-right)\n- `lines-diagonal-left` - [Live Demo](https://patterns.magmaflow.co/#lines-diagonal-left)\n- `lines-horizontal` - [Live Demo](https://patterns.magmaflow.co/#lines-horizontal)\n- `lines-vertical` - [Live Demo](https://patterns.magmaflow.co/#lines-vertical)\n- `sprinkles` - [Live Demo](https://patterns.magmaflow.co/#sprinkles)\n- `waves` - [Live Demo](https://patterns.magmaflow.co/#waves)\n- `hive` - [Live Demo](https://patterns.magmaflow.co/#hive)\n- `squiggles` - [Live Demo](https://patterns.magmaflow.co/#squiggles)\n- `triangles` - [Live Demo](https://patterns.magmaflow.co/#triangles)\n- `grid` - [Live Demo](https://patterns.magmaflow.co/#grid)\n- `zebra` - [Live Demo](https://patterns.magmaflow.co/#zebra)\n\n## Credits\nThis package couldn't have been put together without patterns from:\n- [Hero Patterns](https://heropatterns.com/)\n- [Pattern Monster](https://pattern.monster/)\n- [MadeByCrevans](https://madebycrevans.com/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagmaflowco%2Ftailwindcss-patterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagmaflowco%2Ftailwindcss-patterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagmaflowco%2Ftailwindcss-patterns/lists"}