tailwindcss-resolution
Tailwind plugin to add resolution-
variants, to target devices based on screen pixel density (retina, dpi).
Installation
Install the plugin from npm:
npm install -D tailwind-resolution
Then add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {
// default resolutions
resolutions: {
'2': '2dppx',
'3': '3dppx',
'4': '4dppx'
},
// ...
},
plugins: [
require('tailwindcss-resolution'),
// ...
],
}
Usage
Add resolution-
if you need to target specific device resolutions. The following code example will change background image based on dpi:
<div class="bg-[url(/example.webp)] resolution-2:bg-url(/example_2x.webp)"></div>
This plugin will generate the following CSS:
.bg-\[url\(\/example\.webp\)\] {
background-image: url(/example.webp);
}
@media (min-resolution: 2dppx) {
.resolution-2\:bg-\[url\(\/example_2x\.webp\)\] {
background-image: url(/example_2x.webp);
}
}