Tailwind utility

When to use it

Reach for this when you're already in Tailwind and you don't want to write hand-rolled CSS rules just for icon wrappers.

Setup

Register the plugin in your Tailwind config:

import opticalCenter from 'optical-center/tailwind';

export default {
  plugins: [opticalCenter],
};

And make sure optical-center/postcss is in your PostCSS chain — the Tailwind plugin ships the directive; the PostCSS plugin resolves it.

import tailwind from 'tailwindcss';
import opticalCenter from 'optical-center/postcss';

export default {
  plugins: [tailwind, opticalCenter()],
};

How to write it

Drop the optical-center class on any wrapper:

import { Play } from 'lucide-react';

export function PlayButton() {
  return (
    <button>
      <div className="optical-center">
        <Play />
      </div>
    </button>
  );
}

Compose it with any other Tailwind utility you need on the wrapper. .optical-center is just a component-level utility; w-10 h-10 rounded-full bg-zinc-100 optical-center works as you'd expect.

What gets emitted

The Tailwind plugin emits one rule:

.optical-center {
  optical-center: auto;
}

Then the PostCSS plugin picks up that rule the same way it picks up any hand-written CSS rule with optical-center: auto, scans the project's JSX to link .optical-center → icon, and expands to:

.optical-center {
  display: flex;
  --optical-center: auto;
}
.optical-center > * {
  margin: auto;
  translate: 4.3365% 2.604%;
}

Identical end-state to the CSS class pattern — only the way the directive arrived in the PostCSS chain differs.

Plugin order matters

Tailwind must run before optical-center/postcss in your PostCSS chain. Tailwind emits the optical-center: auto declaration; if our plugin runs first, the declaration doesn't exist yet and nothing gets expanded.