├── .gitignore ├── .npmignore ├── .prettierrc ├── README.md ├── docs ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── tailwind.css └── tailwind.min.css ├── package.json ├── postcss.config.js ├── sandbox.config.json ├── src ├── index.js └── patterns.js └── tailwind.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public/build 3 | yarn.lock 4 | .vscode 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /docs/* 2 | sandbox.config.json 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "semi": true, 4 | "tabWidth": 2, 5 | "singleQuote": false 6 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tailwind CSS Hero Patterns 2 | 3 | [](https://www.npmjs.com/package/tailwindcss-hero-patterns) 4 | 5 | 6 | A simple tailwind plugin to display [Hero Patterns](http://www.heropatterns.com/) by [@steveschoger](https://twitter.com/steveschoger). 7 | 8 | [DEMO AVAILABLE HERE](https://svengau.github.io/tailwindcss-hero-patterns/) 9 | 10 | [TAILWIND PLAYGROUND](https://play.tailwindcss.com/fnFV9iHnq4) 11 | ## Installation 12 | 13 | `yarn add tailwindcss-hero-patterns` 14 | 15 | or 16 | 17 | `npm i tailwindcss-hero-patterns` 18 | 19 | ## Usage 20 | 21 | ### Simple 22 | 23 | Just include the plugin: 24 | 25 | ``` 26 | plugins: [ 27 | require('tailwindcss-hero-patterns'), 28 | ], 29 | ``` 30 | 31 | And start using it: 32 | 33 | ```html 34 |
111 | Just click on me to copy the code in the clipboard
112 |169 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
170 |222 | Gradients are done using the tailwindcss-gradients plugin. 224 |
225 |226 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 227 |
228 |