https://github.com/hacknug/tailwindcss-image-rendering

Image-rendering utilities for Tailwind CSS.
https://github.com/hacknug/tailwindcss-image-rendering

Last synced: about 2 months ago
JSON representation

Image-rendering utilities for Tailwind CSS.

• Host: GitHub
• URL: https://github.com/hacknug/tailwindcss-image-rendering
• Owner: hacknug
• Created: 2018-07-01T15:49:53.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-26T08:57:59.000Z (over 1 year ago)
• Last Synced: 2024-07-11T12:42:03.871Z (3 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwindcss-image-rendering
• Size: 58.6 KB
• Stars: 81
• Watchers: 4
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-tailwindcss - Image Rendering - Adds `image-rendering` utilities. (Plugins)

README

        
# Tailwind CSS Image Rendering Plugin

This plugin adds utilities to use `image-rendering` with Tailwind CSS.

## Installation

Add this plugin to your project:

```bash

# Install using pnpm

pnpm install --save-dev tailwindcss-image-rendering

# Install using npm

npm install --save-dev tailwindcss-image-rendering

# Install using yarn

yarn add -D tailwindcss-image-rendering

```

## Usage

```js

// tailwind.config.js

{

  theme: {},  // no options to configure

  variants: { // all the following default to ['responsive']

    imageRendering: ['responsive'],

  },

  plugins: [

    require('tailwindcss-image-rendering')(), // no options to configure

  ],

}

```

```css

.rendering-auto { image-rendering: auto; }

.rendering-crisp-edges { image-rendering: crisp-edges; }

.rendering-pixelated { image-rendering: pixelated; }

```