Skip to main content

Tailwind

note

Due to limitations with Tailwind's JIT engine, @plaiceholder/tailwindcss only supports local images.

Installation#

  1. Install the package alongside your existing tailwindcss and plaiceholder installation:

    npm i @plaiceholder/tailwindcss
  2. Add the plugin to your tailwind.config.js, making sure to enable "jit" mode:

    tailwind.config.js
    module.exports = {
    mode: "jit",
    purge: [],
    theme: {
    extend: {},
    },
    variants: {},
    plugins: [require("@plaiceholder/tailwindcss")],
    };

Usage#

Once installed, pure CSS image LQIPs can be created with the following JIT class format:

<!--
returns a pure CSS LQIP for
`./public/path-to-your-image.jpg`
-->
<div class="plaiceholder-[/path-to-your-image.jpg]" />

The class only returns the "pixels" (linear-gradient values), allowing you to configure your preferred "blur" effect:

<!--
returns a pure CSS LQIP for
`./public/path-to-your-image.jpg`
-->
<div
class="plaiceholder-[/path-to-your-image.jpg] transform scale-150 filter blur-2xl"
/>

Utils#

Dynamic values aren't supported by JIT mode, meaning arbitrary LQIPs can't be computed.

The values must exist at build-time.

// ❌ NOT POSSIBLE
const Example = ({ src }) => (
<div
className={`plaiceholder-[{src}] transform scale-150 filter blur-2xl`}
/>;
);

To circumvent this, @plaiceholder/tailwindcss offers an additional utils entry point to extract image paths from the JIT classes on the server-side.

For example, in a Next.js setup.

import { getPlaiceholder } from "plaiceholder";
import { extractImgSrc } from "@plaiceholder/tailwindcss/utils";
try {
const plaiceholder = "plaiceholder-[/path-to-your-image.jpg]";
getPlaiceholder(extractImgSrc(plaiceholder)).then(({ img }) =>
console.log(img)
);
} catch (err) {
err;
}
// Logs
// {
// src: '…',
// width: …,
// height: …,
// type: '…'
// }