Tailwind

plaiceholder packages are ESM only (opens in a new tab).

Installation

Install the package alongside your existing tailwindcss (opens in a new tab) and plaiceholder installation:
```
npm install @plaiceholder/tailwindcss
```

Add the plugin to your Tailwind config:

Your Tailwind config must use the .mjs or .ts extension.

tailwind.config.mjs

// @ts-check
import plaiceholder from "@plaiceholder/tailwindcss";
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [plaiceholder()],
};

Implement a resolver to control how the plugin converts a specified image path (the content within the class square brackets []) into a Buffer.

For example:

tailwind.config.mjs

// @ts-check
import fs from "node:fs";
import path from "node:path";
import plaiceholder from "@plaiceholder/tailwindcss";
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    plaiceholder({
      resolver: (src) =>
        fs.readFileSync(path.join("./public", `${src}.jpg`)),
    }),
  ],
};

Usage

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

<!-- 
   based on the config above, returns a pure CSS LQIP for:
   `./public/image-slug.jpg`
-->
<div class="plaiceholder-[image-slug]" />

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

<!-- 
   based on the config above, returns a pure CSS LQIP for:
   `./public/image-slug.jpg`
-->
<div class="plaiceholder-[image-slug] transform scale-150 filter blur-2xl" />

Utils

Dynamic values aren't supported (opens in a new tab) 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 classes on the server-side.

import { extractImgSrc } from "@plaiceholder/tailwindcss/utils";
 
const plaiceholder = "plaiceholder-[image-slug]";
const src = extractImgSrc(plaiceholder);
 
console.log(src);
 
// Logs
// "image-slug"

Limitations

Supports only ESM/TypeScript Tailwind config files.
i.e. tailwind.config.mjs or tailwind.config.ts
Images must not have an _ in their name
Tailwind treats this as a space.
Only Node.js environments are supported
Tailwind doesn't support asynchrnous configuration, so this plugin depends on make-synchronous to work; a library that uses Node.js internals.

Next Astro