Tailwind

Flex gap utilities for Tailwind, without the browser support worries.

Installation#

1. Install Tailwind

2. Install the plugin via your preferred package manager:

   npm install -D @raam/tailwind
   # or
   yarn add -D @raam/tailwind

3. Add the following to your tailwind.config.js

   module.exports = {
     corePlugins: {
       // Disable tailwind's built-in flex utilities for
       // @raam/tailwind to override and extend
       flexDirection: false,
       flexWrap: false,
     },
     plugins: [require("@raam/tailwind")],
   };

Usage#

Continue using .flex, Flex Wrap and Flex Direction utilities as you normally would

Use .flex-gap-{size} classes to set spacing between items.

<ul role="list" className="list-none flex flex-row flex-wrap flex-gap-4">
  <li><a href="/home">Home</a></li>
  <li><a href="/home">Pricing</a></li>
  <li><a href="/home">About</a></li>
  <li><a href="/home">Contact</a></li>
</ul>

Recipes#

VStack#

<div className="flex flex-col flex-nowrap flex-gap-4">
  <div
    className="h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
</div>

HStack#

<div className="flex flex-row flex-nowrap flex-gap-4">
  <div
    className="w-10 h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="w-10 h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="w-10 h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div className="flex-1" />
  <div
    className="w-10 h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
</div>

Wrap#

<div className="flex flex-row flex-wrap flex-gap-4">
  <div
    className="w-40 h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="w-20 h-30 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="w-80 h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="w-60 h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
  <div
    className="w-40 h-10 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-800 dark:to-blue-800 rounded-md"
  />
</div>