@halvaradop/tailwindcss-utilities

@halvaradop/tailwindcss-utilities is a Tailwind CSS plugin designed to enhance productivity in application development by providing additional utilities. These utilities optimize the workflow, making it easier and more efficient for users to access and manipulate data.

Installation

To install the plugin via npm, ensure that Tailwind CSS and its configuration are already installed. If not, refer to the Tailwind CSS documentation for instructions.

npm install -D @halvaradop/tailwindcss-utilities
npm install --save-dev @halvaradop/tailwindcss-utilities

Configuration

To configure the plugin, add it to the plugins array in the Tailwind CSS configuration file.

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

const config: Config = {
    content: [],
    theme: {},
    plugins: [plugin],
}

export default config

// JavaScript
import plugin from "@halvaradop/tailwindcss-utilities"

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {},
    plugins: [plugin],
}

Utilities

Set of utilites offer by the dependency.

Selectors

The selectors utility offers a set of selectors that provide improved access to HTML elements. Below is an example of usage:

Supported Tags

Structural Elements

head
body
main
footer
section
article
label
nav
div

Text Content

p
span
h1 to h6
a

List

ul
ol
li

Forms

button
form
input
label

Tables

table
tr
td

Media

img
figure
picture
caption
figcaption

Usage

<section class="li:mb-5">
    <article class="my-5"></article>
    <li></li>
</section>

Font size dynamic

The font size dynamic utility enables modern scale typographic support using the clamp function. This function dynamically adjusts the font size based on the viewport of the device, ensuring clear and responsive text in a linear manner.

Supported Utilities

fluency-{ xs | sm | base | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl }

Usage

<div>
    <h1 class="fluency-lg"></h1>
    <p class="fluency-sm"></p>
</div>

Scrollbar

The scrollbar utility provides variants for customizing the scrollbar of a component, particularly useful when a component presents overflow. These utilities work with the ::-webkit- prefix.

utilities supported

scroll: for styling the ::-webkit-scrollbar
thumb: for styling the ::-webkit-scrollbar-thumb
track: for styling the ::-webkit-scrollbar-track

Usage

<section class="overflow-y-hidden scroll:w-1 thumb:rounded-full thumb:bg-slate-400 track:my-1">
    <p></p>
</section>

Contributing

Here, you will find a guide on how to contribute to the project and the necessary steps to do so. Please read our Contributing Guidelines.

Code of Conduct

Please be aware that this project has a code of conduct, and we expect all contributors to follow these guidelines in their interactions. For more information, please read our Code of Conduct.