@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
To configure the plugin, add it to the plugins array in the Tailwind CSS configuration file.
// ts
import type { Config } from "tailwindcss";
import plugin from "@halvaradop/tailwindcss-utilities"
const config: Config = {
content: [],
theme: {},
plugins: [plugin],
};
export default config;
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:
li
div
span
a
p
img
h1
toh6
ul
ol
li
table
tr
td
form
input
button
section
main
body
article
label
img
figure
picture
caption
footer
<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.