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.

Table of content

- 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:

``bash
npm install tailwind-extras
`

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

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

$3

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

`css
@import 'tailwindcss';

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

Plugins

$3

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

Enter/Exit Animations:

`html



`

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

$3

Control element draggability with semantic utility classes.

`html










`

Available Classes:

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

$3

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

`html


Button with :hover & :focus-visible state




Interactive 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:

`html



`

$3

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

`html










`

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.

$3

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

`bash


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