New Tailwind5 Pro

Next-generation Tailwind CSS engine for Turbopack and SWC.

Adds powerful features inspired by UnoCSS, modern CSS specs, and future Tailwind capabilities — fully compatible with Tailwind CSS v4+ and Next.js 15+.

📑 Table of Contents

• ✨ Features

  • Variant Grouping
  • Modern CSS Support
  • Tailwind Color Mixing
  • Gradient Mixing
  • Iconify Icons Support
  • CSS Shortcuts
  • Turbopack Native Support

• 📦 Installation

• ⚙️ Setup

• 🧩 Optional Setup

  • Install Tailwind CSS
  • Install Icons
  • Install Typography Plugin

• 🧪 Examples

  • Variant grouping
  • Nested grouping
  • Anchor positioning
  • Color mixing
  • Icons
  • Shortcuts

• 🧠 How it works

• 🚀 Performance

• 📚 Compatibility

• 🧩 Supported Features Summary

• 🛠 Example Project

• 📄 License

• 👨‍💻 Author

• ⭐ Future Plans

• 💬 Contributing

✨ Features

Variant Grouping

Write cleaner, grouped variants:

<div className="hover:(bg-black text-white)" />

Compiles to:

<div className="hover:bg-black hover:text-white" />

Supports nested variants:

<div className="sm:(hover:(bg-black text-white))" />

Modern CSS Support

Supports latest CSS features including Anchor Positioning API, color-mix, animation timelines, and more.

Example:

<div className="anchor:popover" />

Compiles to:

<div className="[anchor-name:--popover]" />

Supported modern CSS:

• anchor-name
• position-anchor
• anchor-scope
• animation-timeline
• animation-range
• corner-shape
• image-rendering
• image-resolution
• color-mix()
• clamp()
• dynamic-range-limit-mix()

Example:

<div className="hover:(pos-anchor:popover)" />

Tailwind Color Mixing

Mix Tailwind colors directly:

<div className="text-mix-(red-500 blue-500)" />

Compiles to:

color: color-mix(in oklch, var(--tw-color-red-500), var(--tw-color-blue-500));

Supported:

text-mix-(red-500 blue-500)
bg-mix-(red-500 blue-500)
border-mix-(red-500 blue-500)

Gradient Mixing

<div className="bg-gradient-to-r from-mix-(red-500 blue-500) to-blue-500" />

Iconify Icons Support

Use any icon from:

https://icon-sets.iconify.design/

Example:

<div className="i-lucide-home text-xl text-red-500" />

Install icon set:

npm install @iconify-json/lucide

Supported icon syntax:

i-lucide-home
i-tabler-user
i-mdi-heart
i-ph-anchor

Icons inherit color automatically:

<div className="i-lucide-home text-blue-500 text-2xl" />

CSS Shortcuts

Define reusable utilities in CSS:

@shortcut button {
  @apply bg-red-500 text-white px-4 py-2;
}

Use:

<div className="button" />

Works with variants:

<div className="hover:(button)" />

Turbopack Native Support

Runs directly in SWC — no PostCSS required.

Fast builds.

Works with:

• Next.js 15+
• Turbopack
• SWC

📦 Installation

npm install tailwind5-pro

or

bun add tailwind5-pro

⚙️ Setup (Next.js)

next.config.js:

module.exports = {
  experimental: {
    swcPlugins: [
      ["tailwind5-pro", {}]
    ]
  }
}

🧩 Install Tailwind CSS

npm install tailwindcss

🧩 Install Typography Plugin (optional)

npm install @tailwindcss/typography

🧩 Install Icons (optional)

Example:

npm install @iconify-json/lucide

Browse icons:

https://icon-sets.iconify.design/

🧪 Examples

Variant grouping

<div className="hover:(bg-black text-white)" />

Nested grouping

<div className="sm:(hover:(bg-red-500 text-white))" />

Anchor positioning

<div className="anchor:popover" />

Color mixing

<div className="text-mix-(red-500 blue-500)" />

Icons

<div className="i-lucide-home text-xl text-blue-500" />

Shortcuts

CSS:

@shortcut button {
  @apply bg-red-500 text-white px-4 py-2;
}

JSX:

<div className="button" />

🧠 How it works

New Tailwind5 Pro uses SWC transforms to convert enhanced syntax into standard Tailwind-compatible classes.

No runtime overhead.

Works at compile time.

Pipeline:

JSX
↓
SWC transform
↓
Tailwind CSS engine
↓
Generated CSS

🚀 Performance

• Zero runtime cost
• Compile-time transforms
• Turbopack optimized
• Fast incremental rebuilds

📚 Compatibility

Compatible with:

• Tailwind CSS v4+
• Next.js 15+
• Turbopack
• SWC

🧩 Supported Features Summary

| Feature | Supported | | ------------------ | --------- | | Variant grouping | ✅ | | Nested variants | ✅ | | Modern CSS | ✅ | | Anchor positioning | ✅ | | Color mix | ✅ | | Gradient mix | ✅ | | Iconify icons | ✅ | | CSS shortcuts | ✅ | | Turbopack support | ✅ |

🛠 Example Project

export default function Page() {
  return (
    <div className="p-10">

      <button className="button hover:(bg-black)">
        Click
      </button>

      <div className="i-lucide-home text-blue-500 text-2xl" />

      <div className="text-mix-(red-500 blue-500)">
        Mixed color
      </div>

    </div>
  )
}

📄 License

MIT License

👨‍💻 Author

Radosław Adamczyk

⭐ Future Plans

• Dynamic utilities
• Preset system
• Full UnoCSS compatibility layer
• Container queries shortcuts
• Animation presets

💬 Contributing

Contributions welcome.