Documentation

Welcome to the official documentation for the plugins in the @halvaradop/tailwindcss utilities ecosystem. These plugins provide a set of utility classes and styles that enable you to create code quickly and efficiently using TailwindCSS.

Plugins

Installation

Run the following commands to install the packages

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

Configuration

Each plugin is designed to be easily configurable and flexible, allowing you to create powerful utility classes for your application development needs.

tailwind.config.ts

import type { Config } from "tailwindcss"
import utilities from "@halvaradop/tailwindcss-utilities"
import animations from "@halvaradop/tailwindcss-animations"

const config: Config = {
    content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
    theme: {},
    plugins: [
        utilities,
        animations,
    ],
}

export default config

Features

Some of the key features offered by these plugins include

<section class="scroll:w-2 track:my-2 thumb:rounded thumb:bg-black">
  <h2 class="fluency-2xl">Subtitle</h2>
  <ul class="li:text-slate-500">
    <li>...</li>
    <li>...</li>
  </ul>
  <div class="size-20 rounded fade-in-up" />
</section>