Tailwind Extras

A comprehensive collection of Tailwind CSS v4 utilities that enhance your development workflow with powerful animations, interaction states, and drag controls. Built specifically for Tailwind CSS v4's new architecture.

It plugin uses the new css-first architecture, leveraging the latest capabilities in the framework. This means utilities are provided as native CSS via @import, instead of being registered through the older JavaScript plugin API.

• Features
• Installation & Usage
  • Import Individual Modules
• Plugins
  • Animate
  • Drag
  • Hocus
  • Scrollbar
• Contributing
  • Development Setup

Features

• 🎨 Animate: Rich animation utilities for enter/exit transitions, fades, slides, zooms, and more
• 🛠️ Fully compatible with shadcn, and includes custom animations like accordion-up, accordion-down
• 🖱️ Drag: Control element draggability with semantic utility classes
• 👆 Hocus: Combined hover and focus state variants for better UX patterns
• 📜 Scrollbar: Customize scrollbar appearance with utilities for width, thumb, and track styling

Upcoming Features

• [ ] Custom utilities for radix-ui compatible data-, aria-, and group- attributes
• [ ] Typography plugin for prose

Installation & Usage

Install the package using your preferred package manager:

npm install tailwind-extras

To include all utilities in your project, add the following to your main CSS file:

@import 'tailwindcss';
@import 'tailwind-extras';

Import Individual Modules

For better bundle size control, you can import only the utilities you need:

@import 'tailwindcss';

/* Import only what you need */
@import 'tailwind-extras/animate';
@import 'tailwind-extras/drag';
@import 'tailwind-extras/hocus';
@import 'tailwind-extras/scrollbar';

Plugins

Animate

Animation utilities inspired by tailwindcss-animate, optimized for Tailwind CSS v4.

Enter/Exit Animations:

<div class="animate-in fade-in slide-in-from-top duration-300">
  Content entering from top
</div>

<div class="animate-out fade-out slide-out-to-bottom duration-300">
  Content exiting to bottom
</div>

Available Animation Types:

• fade-in / fade-out - Opacity transitions
• zoom-in / zoom-out - Scale animations
• slide-in-from-{direction} / slide-out-to-{direction} - Slide animations (top, bottom, left, right)
• spin-in / spin-out - Rotation animations

Animation Controls:

• duration-* - Control animation duration
• delay-* - Add animation delays
• ease-* - Customize easing functions
• repeat-* - Set iteration count
• direction-* - Control animation direction
• fill-mode-* - Set fill mode behavior
• running / paused - Control animation play state

Special Animations:

• animate-accordion-down / animate-accordion-up - Accordion transitions
• animate-caret-blink - Text caret blinking animation

Drag

Control element draggability with semantic utility classes.

<!-- Prevent dragging -->
<img src="logo.png" class="drag-none" alt="Logo" />

<!-- Enable element dragging -->
<div class="drag-element">Draggable content</div>

<!-- Default browser drag behavior -->
<div class="drag-auto">Auto drag behavior</div>

Available Classes:

• drag-none - Prevents dragging
• drag-element - Enables element dragging
• drag-auto - Uses browser default behavior

Hocus

Combined hover and focus state variants for improved accessibility and user experience.

<!-- Combined hover and focus styles -->
<button class="hocus:bg-blue-600 hocus:text-white">
  Button with :hover & :focus-visible state
</button>

<!-- Pressed state (active + hover) -->
<button class="pressed:scale-95 pressed:bg-blue-700">
  Interactive button
</button>

Available Variants:

• hocus: - Applies styles on :focus-visible (recommended for accessibility)
• pressed: - Applies styles when element is both :active and :hover

With Group and Peer:

<div class="group">
  <button class="group-hocus:bg-blue-500">Button</button>
</div>

<div class="peer">
  <input class="peer-hocus:border-blue-500" />
</div>

Scrollbar

Customize scrollbar appearance with utilities for controlling width, thumb color, and track color.

<!-- Hide scrollbar -->
<div class="scroll-none overflow-auto">
  Content with hidden scrollbar
</div>

<!-- Thin scrollbar -->
<div class="scroll-thin overflow-auto">
  Content with thin scrollbar
</div>

<!-- Custom scrollbar colors -->
<div class="scroll-thumb-blue-500 scroll-track-gray-200 overflow-auto">
  Content with custom colored scrollbar
</div>

Available Classes:

• scroll-none - Hides the scrollbar completely (cross-browser compatible)
• scroll-thin - Sets scrollbar width to thin
• scroll-thumb-{color} - Sets the scrollbar thumb color (uses Tailwind color utilities)
• scroll-track-{color} - Sets the scrollbar track color (uses Tailwind color utilities)

Contributing

We welcome contributions! Please review our contributing guidelines before submitting pull requests.

Development Setup

This project uses Bun.js as the primary package manager for development:

# Clone the repository
git clone https://github.com/oviirup/tailwind-extras.git

# Install dependencies
bun install

While Bun is recommended for development, the package works with all major package managers in production.

License: MIT © Avirup Ghosh