[READ-ONLY] Mirror of https://github.com/hacknug/tailwindcss-image-rendering. Image-rendering utilities for Tailwind CSS.
www.npmjs.com/package/tailwindcss-image-rendering
Init repository
Nestor Vera
(Jul 1, 2018, 5:49 PM +0200)
381baf7e
+65
+15
index.js
+15
index.js
···
1
+
module.exports = function (variants) {
2
+
return function ({ addUtilities }) {
3
+
addUtilities(
4
+
{
5
+
// Image Rendering
6
+
'rendering-auto': { imageRendering: 'auto' },
7
+
// 'rendering-smooth': { imageRendering: 'smooth' },
8
+
// 'rendering-high-quality': { imageRendering: 'high-quality' },
9
+
'rendering-crisp-edges': { imageRendering: 'crisp-edges' },
10
+
'rendering-pixelated': { imageRendering: 'pixelated' },
11
+
},
12
+
variants
13
+
)
14
+
}
15
+
}
+23
package.json
+23
package.json
···
1
+
{
2
+
"name": "tailwindcss-image-rendering",
3
+
"version": "0.1.0",
4
+
"description": "Describe what this plugin does",
5
+
"main": "index.js",
6
+
"repository": {
7
+
"type": "git",
8
+
"url": "git+https://github.com/hacknug/tailwindcss-image-rendering.git"
9
+
},
10
+
"keywords": [
11
+
"tailwind",
12
+
"tailwindcss",
13
+
"tailwind css",
14
+
"tailwindcss-plugin",
15
+
"plugin"
16
+
],
17
+
"author": "Nestor Vera <nestorvera@me.com> (https://nestor.rip)",
18
+
"license": "MIT",
19
+
"bugs": {
20
+
"url": "https://github.com/hacknug/tailwindcss-image-rendering/issues"
21
+
},
22
+
"homepage": "https://github.com/hacknug/tailwindcss-image-rendering#readme"
23
+
}
+27
readme.md
+27
readme.md
···
1
+
# Tailwind CSS Image Rendering Plugin
2
+
3
+
This plugin adds utilities to use image-rendering with Tailwind CSS.
4
+
5
+
## Installation
6
+
7
+
Add this plugin to your project:
8
+
9
+
```bash
10
+
# Install using npm
11
+
npm install --save-dev tailwindcss-image-rendering
12
+
13
+
# Install using yarn
14
+
yarn add -D tailwindcss-image-rendering
15
+
```
16
+
17
+
## Usage
18
+
19
+
```js
20
+
require('tailwindcss-image-rendering')(['responsive'])
21
+
```
22
+
23
+
```css
24
+
.rendering-auto { image-rendering: auto; }
25
+
.rendering-crisp-edges { image-rendering: crisp-edges; }
26
+
.rendering-pixelated { image-rendering: pixelated; }
27
+
```