@halvaradop/tailwindcss-utilities

It is a utility package for TailwindCSS v4 that provides predefined utility classes for customization elements and pseudoelement more css properties that currently aren't supported native by Tailwindcss which includes ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb or extends the min-width classes provided by Tailwindcss. and adding new html selector to customize them of easy way. Additionally is provided a seria of dynamic texts with that starts with the --text-fluid prefix.. These new properties are not supported by all of the browser and are experimental. It enables developers to easily customization to their applications with minimal effort.

The utilities offered by the packages are created with the latest standards of tailwindcss via @custom-variant and @utility variants introduced in tailwindcss@v4

Installation

To use this package, ensure you have TailwindCSS v4 installed and configured. If not, refer to the Tailwind CSS installation guide. Once ready, install the package using one of the following commands:

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

Configuration

To enable the utility classes provided by this package, integrate it into your TailwindCSS setup. Follow these steps:

1. Ensure TailwindCSS is imported in your global .css file using the @import directive.
2. Include the utilities CSS file provided by the package.

Example configuration:

@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 package provides utility classes for various purposes, including but not limited to:

• 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

The unique utility type that currently supports extension and update it defined values is text-fluid. In future versions more utilities be able to customize for its requirements To define custom utility values, use the @theme directive in your .css file. Add CSS variables following the required prefixes. For example:

@theme {
    /* We recommend use `clamp` function to create dynamic sizes based on the viewport of the screen */
    --text-fluid-7xl: clamp(4.5rem, 9.2vw, 6.8rem);
    --text-fluid--line-height: 1.2;
    --text-fluid--letter-spacing: -0.038em;
}

With these configurations, you can extend and customize utilities to suit your application's needs.

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

The latest version of the package introduces the following changes:

• The plugin is no longer exported. Instead, a CSS file containing utility classes is provided for direct use in your project.