{"id":22824315,"url":"https://github.com/thillmann/tailwindcss-bg-patterns","last_synced_at":"2025-07-02T10:34:12.557Z","repository":{"id":37601343,"uuid":"338707575","full_name":"thillmann/tailwindcss-bg-patterns","owner":"thillmann","description":"CSS Background patterns for TailwindCSS","archived":false,"fork":false,"pushed_at":"2024-03-29T07:10:00.000Z","size":663,"stargazers_count":150,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T00:51:09.690Z","etag":null,"topics":["background","css","patterns","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/thillmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-02-14T01:37:27.000Z","updated_at":"2025-03-09T02:58:12.000Z","dependencies_parsed_at":"2024-04-01T01:48:55.306Z","dependency_job_id":null,"html_url":"https://github.com/thillmann/tailwindcss-bg-patterns","commit_stats":null,"previous_names":["thillmann/tailwind-patterns"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thillmann/tailwindcss-bg-patterns","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thillmann%2Ftailwindcss-bg-patterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thillmann%2Ftailwindcss-bg-patterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thillmann%2Ftailwindcss-bg-patterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thillmann%2Ftailwindcss-bg-patterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thillmann","download_url":"https://codeload.github.com/thillmann/tailwindcss-bg-patterns/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thillmann%2Ftailwindcss-bg-patterns/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263121263,"owners_count":23416963,"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":["background","css","patterns","tailwindcss"],"created_at":"2024-12-12T17:06:06.992Z","updated_at":"2025-07-02T10:34:12.532Z","avatar_url":"https://github.com/thillmann.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003eTailwindCSS Background Patterns\u003c/h1\u003e\n\u003cp align=\"center\"\u003eInspired by \u003ca href=\"https://www.magicpattern.design/tools/css-backgrounds\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eCSS Background Patterns by MagicPattern\u003c/a\u003e and used by \u003ca href=\"https://relayforms.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eRelayForms\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/tailwindcss-bg-patterns\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/tailwindcss-bg-patterns.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/tailwindcss-bg-patterns\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/tailwindcss-bg-patterns.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/thillmann/tailwindcss-bg-patterns/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/tailwindcss-bg-patterns.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Demo\n\nSee a live demo of all background patterns here: [Live demo](https://hillmann.cc/tailwindcss-bg-patterns/)\n\n## Installation\n\nAdd the `tailwindcss-bg-patterns` plugin to your project:\n\n```bash\n# Install using npm\nnpm install --save-dev tailwindcss-bg-patterns\n\n# Install using yarn\nyarn add -D tailwindcss-bg-patterns\n\n# Install using pnpm\npnpm add -D tailwindcss-bg-patterns\n```\n\n## Usage\n\n```javascript\n// tailwind.config.js\n{\n  theme: { // defaults to these values\n    patterns: {\n        opacities: {\n            100: \"1\",\n            80: \".80\",\n            60: \".60\",\n            40: \".40\",\n            20: \".20\",\n            10: \".10\",\n            5: \".05\",\n        },\n        sizes: {\n            1: \"0.25rem\",\n            2: \"0.5rem\",\n            4: \"1rem\",\n            6: \"1.5rem\",\n            8: \"2rem\",\n            16: \"4rem\",\n            20: \"5rem\",\n            24: \"6rem\",\n            32: \"8rem\",\n        }\n    }\n  },\n  plugins: [\n    require('tailwindcss-bg-patterns'),\n  ],\n}\n```\n\n## Background Patterns\n\nIncluded are the following patterns:\n\n- Lines (`pattern-lines`)\n- Vertical Lines (`pattern-vertical-lines`)\n- Diagonal Lines (`pattern-diagonal-lines`)\n- Rectangles (`pattern-rectangles`)\n- Rhombus (`pattern-rhombus`)\n- Dots (`pattern-dots`)\n- Boxes (`pattern-boxes`)\n- Cross (`pattern-cross`)\n- Zigzag (`pattern-zigzag`)\n- Zigzag 3D (`pattern-zigzag-3d`)\n- Isometric (`pattern-isometric`)\n- Wavy (`pattern-wavy`)\n- Triangles (`pattern-triangles`)\n- Moon (`pattern-moon`)\n- Paper (`pattern-paper`)\n\n## Utilities\n\nThe plugin provides utility classes to control the foreground and background colors (based on your theme colors) as well as opacity and sizing (can be controlled in your theme, too):\n\n**Opacity**: `pattern-opacity-80` applies opacity of `0.8`\n\nBy default the plugin comes with the following options for opacity: `pattern-opacity-100`, `pattern-opacity-80`, `pattern-opacity-60`, `pattern-opacity-40`, `pattern-opacity-20`, `pattern-opacity-10`, `pattern-opacity-5`x\n\n**Size**: `pattern-size-8` applies a size of `2rem`\n\nBy default the plugin comes with the following options for size: `pattern-size-1`, `pattern-size-2`, `pattern-size-4`, `pattern-size-6`, `pattern-size-8`, `pattern-size-16`, `pattern-size-20`, `pattern-size-24`, `pattern-size-32`\n\n**Color**: `pattern-indigo-600` (foreground) and `pattern-bg-white` (background)\n\nColors will be extracted from your theme.\n\n## Example\n\nApplying the isometric background pattern to a div:\n\n```html\n\u003cdiv\n  class=\"w-56 h-56 pattern-isometric pattern-indigo-600 pattern-bg-transparent pattern-opacity-60 pattern-size-8\"\n\u003e\u003c/div\u003e\n```\n\nWhich results in:\n\n![Isometric Example](/packages/example/public/isometric.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthillmann%2Ftailwindcss-bg-patterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthillmann%2Ftailwindcss-bg-patterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthillmann%2Ftailwindcss-bg-patterns/lists"}