EleganceUI - Tailwind Utilities

Expand the possibilities of TailwindCSS with eleganceui-tailwind-utilities, a library of utility classes designed to simplify and expand your styling options. With our solution, you save time by writing less code and maintaining visual consistency across your projects.

Features

Class Simplification: Transform long TailwindCSS class chains into shorter, more readable versions.

Additional Features: Unlock new possibilities with exclusive utility classes, further optimizing your workflow.

Easy Integration: Compatible with existing TailwindCSS configuration, allowing for a smooth and seamless transition.

Customization and Flexibility: Choose to import the full set of utilities or just what you need for your project.

Adapts with Custom Theme: Recognizes the theme's custom tokens, continue using the abbreviated prefixes + custom values from your tailwind.config file.

How to install and to set up

Installation

Install the library with Yarn or NPM:

yarn add -D eleganceui-tailwind-utilities

npm i -D eleganceui-tailwind-utilities

Configuration

It is possible to import the complete set with all utility classes at once:

import type { Config } from 'tailwindcss'

import eleganceUIUtilities from '@eleganceui/tailwind-utilities'

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
  theme: {
    extend: {}
  },
  plugins: [...eleganceUIUtilities]
}

export default config

or if you prefer, only the desired utilities can be imported individually:

import type { Config } from 'tailwindcss'

import { skeleton, separator } from '@eleganceui/tailwind-utilities'

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
  theme: {
    extend: {}
  },
  plugins: [skeleton, separator]
}

export default config

How to use

Transform your code with EleganceUI Tailwind Utilities utility classes. Here's an example of how to simplify your code:

- {/* before */}
- <div className="container mx-auto px-4">
-   <div className="flex w-full flex-row flex-wrap gap-4">
-     <div className="flex size-72 min-h-72 min-w-72 flex-col gap-4 overflow-hidden rounded-xl shadow border-2 border-blue-500">
-       <div className="flex h-32 w-full animate-pulse bg-slate-200" />
-       <div className="gap-4 rounded-lg p-4">
-         <h3 className="truncate text-lg font-bold text-blue-500">
-           Example long title omitted with ellipsis
-         </h3>
-         <hr className="border-0 rounded bg-slate-200 h-px w-full" />
-         <p className="text-sm font-normal text-gray-800">Brief description.</p>
-       </div>
-     </div>
-     {/* ... */}
-   </div>
- </div>
+ {/* after */}
+ <div className="px-4 container-row g-4">
+   <div className="ov-hidden br-xl shadow col g-4 square-72 bw-2 bc-blue-500">
+     <div className="h-32 col-full animate-skeleton" />
+     <div className="br-lg p-4 g-4">
+       <h3 className="ellipsis fs-lg fw-bold text-blue-500">
+         Example long title omitted with ellipsis
+       </h3>
+       <hr className="hr-x" />
+       <p className="fs-sm fw-normal text-gray-800">Brief description.</p>
+     </div>
+   </div>
+   {/* ... */}
+ </div>

There are two types of utility classes, those that simplify the syntax of classes that already exist in TailwindCSS and those that add new functionality:

Simplified Classes

content-{suffix} => ac-{suffix}.
- Before: <div class="content-center" />
- After: <div class="ac-center" />

items-{suffix} => ai-{suffix}.
- Before: <div class="items-start" />
- After: <div class="ai-start" />

self-{suffix} => as-{suffix}.
- Before: <div class="self-end" />
- After: <div class="as-end" />

justify-{suffix} => jc-{suffix}.
- Before: <div class="justify-center" />
- After: <div class="jc-center" />

justify-items-{suffix} => ji-{suffix}.
- Before: <div class="justify-items-start" />
- After: <div class="ji-start" />

justify-self-{suffix} => js-{suffix}.
- Before: <div class="justify-self-end" />
- After: <div class="js-end" />

place-content-{suffix} => pc-{suffix}.
- Before: <div class="place-content-center" />
- After: <div class="pc-center" />

place-items-{suffix} => pi-{suffix}.
- Before: <div class="place-items-start" />
- After: <div class="pi-start" />

place-self-{suffix} => ps-{suffix}.
- Before: <div class="place-self-end" />
- After: <div class="ps-end" />

text-{suffix-font-size} => fs-{suffix-font-size}.
- Before: <div class="text-lg" />
- After: <div class="fs-lg" />

font-{suffix-font-weight} => fw-{suffix-font-weight}.
- Before: <div class="font-bold" />
- After: <div class="fw-bold" />

gap-{suffix} => g-{suffix}.
- Before: <div class="gap-0" />
- After: <div class="g-0" />

gap-y-{suffix} => gy-{suffix}.
- Before: <div class="gap-y-0" />
- After: <div class="gy-0" />

gap-x-{suffix} => gx-{suffix}.
- Before: <div class="gap-x-0" />
- After: <div class="gx-0" />

overflow-{suffix} => ov-{suffix}.
- Before: <div class="overflow-hidden" />
- After: <div class="ov-hidden" />

overflow-x-{suffix} => ovx-{suffix}.
- Before: <div class="overflow-x-clip" />
- After: <div class="ovx-clip" />

overflow-y-{suffix} => ovy-{suffix}.
- Before: <div class="overflow-y-scroll" />
- After: <div class="ovy-scroll" />

rounded-{suffix} => br-{suffix}.
- Valid for all values and variants of rounded.
- Before: <div class="rounded-bl-xl" />
- After: <div class="br-bl-xl" />

columns-{suffix} => cols-{suffix}.
- Valid for all values and variants of columns.
- Before: <div class="columns-xl" />
- After: <div class="cols-xl" />

border-{suffix} => bw-{suffix}.
- Valid for all values and variants of border-width.
- Before: <div class="border-y-0" />
- After: <div class="bw-y-0" />

border-{suffix} => bc-{suffix}.
- Valid for all values and variants of border-color.
- Before: <div class="border-white" />
- After: <div class="bc-white" />

outline-{suffix} => otl-{suffix}.
- Valid for all values and variants of outline-width.
- Before: <div class="outline-1" />
- After: <div class="otl-1" />

outline-{suffix} => otl-{suffix}.
- Valid for all values and variants of outline-color.
- Before: <div class="outline-white" />
- After: <div class="otl-white" />

outline-offset-{suffix} => otl-o-{suffix}.
- Valid for all values and variants of outline-offset.
- Before: <div class="outline-offset-1" />
- After: <div class="otl-o-1" />

leading-{suffix} => lh-{suffix}.
- Before: <div class="leading-3" />
- After: <div class="lh-3" />

tracking-{suffix} => ls-{suffix}.
- Before: <div class="tracking-widest" />
- After: <div class="ls-widest" />

object-{suffix} => obj-{suffix}.
- Valid for all values and variants of object.
- Before: <div class="object-fit" />
- After: <div class="obj-fit" />
- Before: <div class="object-left-bottom" />
- After: <div class="obj-lb" />

bg-{position} => bg-{abbreviation}.
- Before: <div class="bg-right-top" />
- After: <div class="bg-rt" />

flex-{wrap-reverse, wrap, nowrap} => f-{wrap-reverse, wrap, nowrap}.
- Before: <div class="flex-wrap" />
- After: <div class="f-wrap" />

flex-{1, auto, initial, none} => f-{1, auto, initial, none}.
- Before: <div class="flex-1" />
- After: <div class="f-1" />

text-{color} => tx-{color}.
- Before: <div class="text-blue-500" />
- After: <div class="tx-blue-500" />

text-{align} => tx-{align}.
- Before: <div class="text-center" />
- After: <div class="tx-center" />

text-{overflow} => tx-{overflow}.
- Before: <div class="text-clip" />
- After: <div class="tx-clip" />

text-{wrap} => tx-{wrap}.
- Before: <div class="text-balance" />
- After: <div class="tx-balance" />

Classes with new Features

{r, l, t, b, x, y}-{suffix}:
- Before: <div class="right-1" />
- After: <div class="r-1" />
- Before: <div class="left-1.5" />
- After: <div class="l-1.5" />
- Before: <div class="top-1" />
- After: <div class="t-1" />
- Before: <div class="bottom-2" />
- After: <div class="b-2" />
- Before: <div class="inset-x-1" />
- After: <div class="x-1" />
- Before: <div class="inset-y-1" />
- After: <div class="y-1" />

center:
- Before: <div class="items-center justify-center" />
- After: <div class="center" />

col:
- Before: <div class="flex flex-col" />
- After: <div class="col" />

col-reverse:
- Before: <div class="flex flex-col-reverse" />
- After: <div class="col-reverse" />

col-full:
- Before: <div class="flex flex-col w-full" />
- After: <div class="col-full" />

row:
- Before: <div class="flex flex-row" />
- After: <div class="row" />

row-reverse:
- Before: <div class="flex flex-row-reverse" />
- After: <div class="row-reverse" />

row-full:
- Before: <div class="flex flex-row w-full" />
- After: <div class="row-full" />

container-col:

<div class="container-col" />

.container-col {
  display: flex;
  flex-direction: column;
  width: min(100% - 32px, 1500px - 32px);
}

@media (min-width: 640px) {
  .container-col {
    width: min(100% - 48px, 1500px - 48px);
  }
}

@media (min-width: 768px) {
  .container-col {
    width: min(100% - 96px, 1500px - 96px);
  }
}

@media (min-width: 1024px) {
  .container-col {
    width: min(100% - 128px, 1500px - 128px);
  }
}

container-row:

<div class="container-row" />

.container-row {
  display: flex;
  flex-flow: row wrap;
  width: min(100% - 32px, 1500px - 32px);
}

@media (min-width: 640px) {
  .container-row {
    width: min(100% - 48px, 1500px - 48px);
  }
}

@media (min-width: 768px) {
  .container-row {
    width: min(100% - 96px, 1500px - 96px);
  }
}

@media (min-width: 1024px) {
  .container-row {
    width: min(100% - 128px, 1500px - 128px);
  }
}

after-base:
- Before: <div class="after:block after:content-['']" />
- After: <div class="after-base" />

before-base:
- Before: <div class="before:block before:content-['']" />
- After: <div class="before-base" />

max-size-{suffix}:
- Before: <div class="max-w-6 max-h-6" />
- After: <div class="max-size-6" />

min-size-{suffix}:
- Before: <div class="min-w-6 min-h-6" />
- After: <div class="min-size-6" />

square-{suffix}:
- Before: <div class="min-w-6 min-h-6 w-6 h-6" />
- After: <div class="square-6" />

ellipsis:
- Adds ellipsis to text that exceeds the container, taking up all available space, in addition to working in cases where truncate does not work.
- <div class="ellipsis" />

scrollbar-hide:
- <div class="scrollbar-hide" />
- Hides scroll bar.

scrollbar-default:
- <div class="scrollbar-default" />
- Show scroll bar.

hr-x:
- Before: <hr class="border-0 rounded-[100px] bg-gray-200 h-px w-full" />
- After: <hr class="hr-x" />
- Before: <hr class="border-0 rounded-[100px] bg-blue-500 h-px w-full" />
- After: <hr class="hr-x-blue-500" />

hr-y:
- Before: <hr class="border-0 rounded-[100px] bg-gray-200 w-px h-full" />
- After: <hr class="hr-y" />
- Before: <hr class="border-0 rounded-[100px] bg-blue-500 w-px h-full" />
- After: <hr class="hr-y-blue-500" />

backface-{suffix}:
- <div class="backface-visible" />.
- <div class="backface-hidden" />.

animate-skeleton:
- Before: <div class="animate-pulse bg-slate-200" />
- After: <div class="animate-skeleton" />.

Contribute

Contributions are always welcome! See how you can contribute to our Contribution Page.

Contributors

Author

By Éverton Toffanetto. Follow me on social media:

🔗 LinkedIn

🔗 YouTube

EleganceUI/eleganceui-tailwindcss-utilities