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 POSSIBLEconst 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: '…'// }