[READ-ONLY] Mirror of https://github.com/hacknug/tailwindcss-background-extended. All of the missing background utilities for Tailwind CSS.
www.npmjs.com/package/tailwindcss-background-extended
tailwind
tailwind-css
tailwindcss
tailwindcss-plugin
Update readme for v1.0
Nestor Vera
(May 20, 2019, 2:26 PM +0200)
6c403fdf
ea074a40
+20
-5
+20
-5
readme.md
+20
-5
readme.md
···
17
17
yarn add -D tailwindcss-background-extended
18
18
```
19
19
20
-
## Notes
20
+
## Usage
21
21
22
-
I will be adding support for creating classes for `background` and `background-image` soon-ish. Feel free to open an issue if you need it before I get to it.
22
+
```js
23
+
// tailwind.config.js
24
+
{
25
+
theme: {
26
+
backgroundImage: { // defaults to {}
27
+
tailwindcss: "url('https://avatars0.githubusercontent.com/u/30317862')",
28
+
},
29
+
},
23
30
24
-
## Usage
31
+
variants: { // all the following default to ['responsive']
32
+
backgroundImage: ['responsive'],
33
+
backgroundClip: ['responsive'],
34
+
backgroundOrigin: ['responsive'],
35
+
},
25
36
26
-
```js
27
-
require('tailwindcss-background-extended')(['responsive'])
37
+
plugins: [
38
+
require('tailwindcss-background-extended'), // no options to configure
39
+
],
40
+
}
28
41
```
29
42
30
43
```css
44
+
.bg-image-tailwindcss { background-image: url('https://avatars0.githubusercontent.com/u/30317862'); }
45
+
31
46
.bg-clip-border { background-clip: border-box; }
32
47
.bg-clip-padding { background-clip: padding-box; }
33
48
.bg-clip-content { background-clip: content-box; }