Skip to content

EleganceUI/eleganceui-tailwindcss-utilities

Repository files navigation

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

or

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