@halvaradop/tailwindcss-utilities@halvaradop/tailwindcss-utilities

A modern utility package for Tailwind CSS v4, providing missing utility classes, advanced selectors, and dynamic CSS variables for rapid, scalable UI development.A modern utility package for Tailwind CSS v4, providing missing utility classes, advanced selectors, and dynamic CSS variables for rapid, scalable UI development.

> Built with the latest Tailwind standards using @custom-variant and @utility from tailwindcss@v4.> Built with the latest Tailwind standards using @custom-variant and @utility from tailwindcss@v4.

Installation

Before using this package, ensure Tailwind CSS v4 is installed and configured. If needed, refer to the official Tailwind installation guide.

Once ready, install the package:

npm install -D @halvaradop/tailwindcss-utilities
# or
pnpm add -D @halvaradop/tailwindcss-utilities

Configuration

To use the utility classes from this package, add them to your Tailwind CSS setup as follows:

1. Make sure Tailwind CSS is imported in your main .css file using the @import directive.
2. Import the utility CSS file from this package after Tailwind.

Example:

@import "tailwindcss";
@import "../node_modules/@halvaradop/tailwindcss-utilities/dist/plugin.css";

This setup ensures that the utility classes are available throughout your project.

Usage

This utility package offers a variety of class enhancements, such as:

• text-fluid-{size}
• min-width-{screen}
• {html-selector}
• scrollbar, thumb, track

Example

<div class="p:text-slate-200">
    <h1 class="text-fluid-2xl">Title</h1>
    <p>paragraph</p>
</div>

Adding Custom Values

Currently, the only utility type that supports extension and custom values is text-fluid. Future releases will allow more utilities to be customized as needed.

To define your own utility values, use the @theme directive in your .css file and add CSS variables with the appropriate prefixes. For example:

@theme {
    /* Recommended: Use `clamp()` for responsive fluid sizes */
    --text-fluid-7xl: clamp(4.5rem, 9.2vw, 6.8rem);
    --text-fluid--line-height: 1.2;
    --text-fluid--letter-spacing: -0.038em;
}

Future versions will extend this customization to additional utilities.

Key Features

• Predefined utility classes for common use cases.
• Customizable values using the @theme directive.
• Seamless integration with TailwindCSS v4.
• Support for advanced features like animations, spacing, and typography.

Breaking Changes

As of the latest release:

• The plugin export has been removed.
• Utilities are now provided directly through a compiled CSS file for simpler integration.