@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.
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
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],
}
Set of utilites offer by the dependency.
The selectors utility offers a set of selectors that provide improved access to HTML elements. Below is an example of usage:
head
body
main
footer
section
article
label
nav
div
p
span
h1
toh6
a
ul
ol
li
button
form
input
label
table
tr
td
img
figure
picture
caption
figcaption
<section class="li:mb-5">
<article class="my-5"></article>
<li></li>
</section>
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.
fluency-{ xs | sm | base | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl }
<div>
<h1 class="fluency-lg"></h1>
<p class="fluency-sm"></p>
</div>
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.
scroll
: for styling the ::-webkit-scrollbarthumb
: for styling the ::-webkit-scrollbar-thumbtrack
: for styling the ::-webkit-scrollbar-track
<section class="overflow-y-hidden scroll:w-1 thumb:rounded-full thumb:bg-slate-400 track:my-1">
<p></p>
</section>
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.
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.