tailwind-custom-utilities v1.0.4

tailwind-custom-utilities

Motivation

If you use flex or grid then this plugin is for you. I used to have these utilities as components in every project I use Tailwindcss with.

Installation

npm i -D tailwind-custom-utilities

then add the plugin to tailwind.config.js

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwind-custom-utilites"),
    // ...
  ],
};

Flex Utilities

usage

  <div class="flex-row-center gap-x-6">
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
</div>

Grid Utilities

Inspired by ThirusOfficial

Create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-fit keyword in the grid-template-columns CSS property to help you do the same.

Usage

Use utilities like .grid-auto-fit-sm, .grid-auto-fit-xl to change the minimum and maximum item size of the responsive grid. This plugin includes five item sizes with the default minimum size being 16rem.

<section class="grid gap-4 grid-auto-fit">
  <div class="p-4 bg-black">Item 1</div>
  <div class="p-4 bg-black">Item 2</div>
  <div class="p-4 bg-black">Item 3</div>
  <div class="p-4 bg-black">Item 4</div>
  <div class="p-4 bg-black">Item 5</div>
  <div class="p-4 bg-black">Item 6</div>
  <div class="p-4 bg-black">Item 7</div>
</section>

Changing the grid item size

This plugin supports the use of arbitrary values if you want a custom minimum item size