tailwind-stack

A plugin to stack multiple Tailwind utilities into a single arbitrary class, with support for variants like hover:, focus:, sm:, etc.

✨ Example

<!-- ❌ Before tailwind-stack -->
<h1
  class="
    hover:bg-blue-800 hover:text-yellow-200
  "
>
  Hello world
</h1>

<!-- ✅ After tailwind-stack -->
<h1
  class="
    hover:stack-[bg-blue-800_text-yellow-200]
  "
>
  Hello world
</h1>

🚀 Installation

pnpm add tailwind-stack
# or
npm install tailwind-stack
# or
yarn add tailwind-stack

⚙️ Tailwind Configuration

// tailwind.config.js
import stack from 'tailwind-stack';

export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  plugins: [
    stack,
  ],
};

🧠 How it works

This plugin uses tailwind-to-object to convert any list of Tailwind utilities into flat CSS declarations, avoiding the issues with @apply and the internal pipeline.

Separate multiple utilities with _ inside [...]:

<div class="stack-[bg-red-500_text-white_font-bold]">
  Red button
</div>

✔️ Works with variants like hover:, focus:, md:, etc.
✔️ Compatible with arbitrary values (w-[37px], bg-[color]…)
✔️ No safelist or extra configuration required.

📄 License

MIT