https://github.com/thillmann/tailwindcss-bg-patterns
CSS Background patterns for TailwindCSS
https://github.com/thillmann/tailwindcss-bg-patterns
background css patterns tailwindcss
Last synced: 6 months ago
JSON representation
CSS Background patterns for TailwindCSS
- Host: GitHub
- URL: https://github.com/thillmann/tailwindcss-bg-patterns
- Owner: thillmann
- License: mit
- Created: 2021-02-14T01:37:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-29T07:10:00.000Z (about 1 year ago)
- Last Synced: 2024-12-12T17:06:22.367Z (6 months ago)
- Topics: background, css, patterns, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 647 KB
- Stars: 142
- Watchers: 1
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
TailwindCSS Background Patterns
Inspired by CSS Background Patterns by MagicPattern and used by RelayForms
---
## Demo
See a live demo of all background patterns here: [Live demo](https://hillmann.cc/tailwindcss-bg-patterns/)
## Installation
Add the `tailwindcss-bg-patterns` plugin to your project:
```bash
# Install using npm
npm install --save-dev tailwindcss-bg-patterns
# Install using yarn
yarn add -D tailwindcss-bg-patterns
# Install using pnpm
pnpm add -D tailwindcss-bg-patterns
```
## Usage
```javascript
// tailwind.config.js
{
theme: { // defaults to these values
patterns: {
opacities: {
100: "1",
80: ".80",
60: ".60",
40: ".40",
20: ".20",
10: ".10",
5: ".05",
},
sizes: {
1: "0.25rem",
2: "0.5rem",
4: "1rem",
6: "1.5rem",
8: "2rem",
16: "4rem",
20: "5rem",
24: "6rem",
32: "8rem",
}
}
},
plugins: [
require('tailwindcss-bg-patterns'),
],
}
```
## Background Patterns
Included are the following patterns:
- Lines (`pattern-lines`)
- Vertical Lines (`pattern-vertical-lines`)
- Diagonal Lines (`pattern-diagonal-lines`)
- Rectangles (`pattern-rectangles`)
- Rhombus (`pattern-rhombus`)
- Dots (`pattern-dots`)
- Boxes (`pattern-boxes`)
- Cross (`pattern-cross`)
- Zigzag (`pattern-zigzag`)
- Zigzag 3D (`pattern-zigzag-3d`)
- Isometric (`pattern-isometric`)
- Wavy (`pattern-wavy`)
- Triangles (`pattern-triangles`)
- Moon (`pattern-moon`)
- Paper (`pattern-paper`)
## Utilities
The 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):
**Opacity**: `pattern-opacity-80` applies opacity of `0.8`
By 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
**Size**: `pattern-size-8` applies a size of `2rem`
By 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`
**Color**: `pattern-indigo-600` (foreground) and `pattern-bg-white` (background)
Colors will be extracted from your theme.
## Example
Applying the isometric background pattern to a div:
```html
```
Which results in:
