tailwindcss-image-rendering

Tailwind CSS Image Rendering Plugin

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

Installation

Add this plugin to your project:

# 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

// 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
  ],
}

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