Ability to use divide-* and space-* utility together

[neupauer]

Hey 👋,

I ran into an issue that utilities divide-* and space-* cannot be used at the same time. In fact, they can, however, the result is slightly different from the expected one.

I would expect the space to split equally around the divider.

So my idea is that instead of dividing the gap between items like this:

.space-y-4 > :not(template) ~ :not(template) {
  margin-top: 1rem;
}

use this, e.g.,:

.space-y-4 > :not(template) ~ :not(template) {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

As a result, the divider (border) between the items will be divided evenly, and the example below will behave as expected.

<ul class="space-y-4 divide-y">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Note:
Instead of using both (margin and padding), this can be achieved using pseudo-elements.

[taylorthurlow]

Agree on this one! For the time being I found that tweaking the text line-height on the ul tag an easy enough solution.

[DoctorDerek]

This would be a nice feature for sure, the current behavior is odd

    <div className="grid w-full grid-cols-1 space-x-4 divide-x-2 divide-x divide-gray-700 divide-solid sm:grid-cols-3">
      {children}
    </div>

[DoctorDerek]

Here's the relevant file: https://github.com/tailwindlabs/tailwindcss/blob/b86bdbcd7ef8392db25d396eafb7e91932e1b990/src/plugins/space.js

But there are some technical challenges...

[DoctorDerek]

So researching this problem a little bit, there's no way to style CSS gap property like a border.

Right now Tailwind's gap & space properties work the same for me when using a grid layout, though space (space-between) is obviously much more versatile.

Unfortunately @neupauer's solution introduces some other issues.

1. The background will show up (because of padding)
2. The widths will be weird (because padding counts as width)

Plus, it would be a breaking change, so there would need to be a "divide-compatible space-between" plugin instead of a straight conversion of how the "space" (space-between) plugin works now.

How to fix it?

The recommended solution is adding padding manually, though of course we end up with padding on the first and last elements.

For example, the Tailwind Docs use this solution: https://tailwindcss.com/docs/divide-width

<div class="relative overflow-hidden mb-8"><div class="rounded-t-xl overflow-hidden bg-gradient-to-r from-emerald-50 to-teal-100 p-10">
  <div class="grid grid-cols-3 divide-x divide-emerald-500">
    <div class="text-center font-extrabold text-2xl text-emerald-600 px-6">1</div>
    <div class="text-center font-extrabold text-2xl text-emerald-600 px-6">2</div>
    <div class="text-center font-extrabold text-2xl text-emerald-600 px-6">3</div>
  </div>
</div>

That can cause some edge-alignment issues, though. Here's a before & after showing how I lose left-alignment in my design by adding a padding to each "card" in the 3-column layout:

Before, no padding:

After, px-8 (padding-left and padding-right):

You'd need to handle the padding manually to correct that part of things. The border is centered, at least.

What else?

You can create a pseudo-border using gap or space-between by setting the elements to the same color as their background, then using the "border color" for the background of the box. This isn't a great solution, obviously, when you just want your elements to have a background-color of transparent. Plus, you can't style the border.

Solution using first-child and last-child variants

You can create the desired effect using padding while still getting the "full-width" vertical alignment I was looking for earlier by turning on the "first" and "last" variants for padding in Tailwind CSS.

// tailwind.config.js
module.exports = {
    variants: {
    typography: ["dark"],
    extend: {
      padding: ["first", "last"],
    },
  },
}

    <div className="grid grid-cols-3 divide-x-2 divide-gray-700 divide-solid">
      {children}
    </div>

  <div className="px-8 first:pl-0 first:pr-8 last:pl-8 last:pr-0">Card</div>

Hope this is helpful to someone!

[neilgilmour]

Having just arrived here courtesy of Google, and inevitably will again:

I got around this issue by conditionally adding padding except for the first element.

<dl class="space-y-4 divide-y>
    <definition-row v-for="(item, index) in items" :class="{ 'pt-6': index !== 0 }" />
</dl>

[tordans]

I ran into this as well and created tailwindlabs/tailwindcss.com#891 so other may not need to research this.

[voltidev]

It would be great to have an option to add margin around divider, so it can be used instead of space-... when you need a divider.

[CanRau]

Another way is adding a helper plugin

const notFirst = plugin(({ addVariant, e }) => {
  addVariant("not-first", ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      const element = e(`not-first${separator}${className}`);
      // return `.${element} > * + *`;
      return `.${element} > :not(:first-child)`;
    });
  });
});

then use it in HTML like so

not-first:before:content-['_|_']

I've got it working on my website canrau.com at the very bottom in the footer, though copying the whole line lacks spaces between the parts, not exactly sure how to fix this, tho in this case it's not too much of a concern to me for now u

Edit, tho I changed it back to

<span>[..]</span>
{" | "}
<span>[..]</span>

[pascalroget]

This is how I do this in React using the classNames helper by Tailwind

  <p className="flex flex-row divide-x-2">
          {categories.map((category, index) => {
            return (
              <div
                key={category.name}
                className={classNames("pr-4", index > 0 && "pl-4")}
              >
                <Link href={category.uri} className="hover:underline">
                  <a>{category.name}</a>
                </Link>
              </div>
            );
          })}

Here is the helper - it just concatenates class names:

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

Basically - add padding around items, conditionally skipping the first one.

[EmilyFlocc]

Agreed this would be great functionality, I think it would be really easy for tailwind to just add divide-x-SIZE to their classes, as the class would just be: (my example is with a custom size called medium and based on their spacing-x class)

.divide-x-medium > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(
      (theme("spacing.medium") / 2) * var(--tw-space-x-reverse)
    );
    margin-left: calc(
      (theme("spacing.medium") / 2) * calc(1 - var(--tw-space-x-reverse))
    );
    padding-right: calc(
      (theme("spacing.medium") / 2) * var(--tw-space-x-reverse)
    );
    padding-left: calc(
      (theme("spacing.medium") / 2) * calc(1 - var(--tw-space-x-reverse))
    );
  }

I have added this to my tailwind.css so that I can use it with the responsive classes, but it would be great if tailwind could automatically go through each size and create this new space class. Would there be scope for this to be added?

[justingolden21]

+1 on this problem. I feel like there are a lot of use cases for this. Sadly, no easy way to do this without breaking changes on Tailwind imo

[justingolden21]

To solve this, do something like:

<div class="divide-y divide-green-900">
	<div class="py-10 first:pt-0 last:pb-0">
		hello
	</div>
	<div class="py-10 first:pt-0 last:pb-0">
		hello
	</div>
	<div class="py-10 first:pt-0 last:pb-0">
		hello
	</div>
</div>

In other words, keep divide in the parent, but instead of space-y-10 in the parent, move padding to the children and use first: and last: modifiers to get the expected result.

[gerhardsletten]

One solutions is to add custom utilities that will use :before to place dividers in the midle between gaps.

Usage:

<div class="grid grid-cols-4 gap-8 chop-2 chop-black chop-offset-4">
</div>

chop-offset should be half of spacing / gap

/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin");
const {
  default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");

module.exports = {
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          "chop-x": (value, ...more) => {
            value = value === "0" ? "0px" : value;
            return {
              "& > :not([hidden]) ~ :not([hidden])": {
                position: `relative`,
              },
              "& > :not([hidden]) ~ :not([hidden]):before": {
                "@defaults border-width": {},
                content: "''",
                position: "absolute",
                top: 0,
                left: `calc(var(--tw-chop-x-offset,-1px)*-1)`,
                height: "100%",
                "border-right-width": `${value}`,
              },
            };
          },
        },
        { values: theme("borderWidth"), type: ["line-width", "length", "any"] }
      );
      matchUtilities(
        {
          chop: (value) => {
            return {
              ["& > :not([hidden]) ~ :not([hidden]):before"]: {
                "border-color": value,
              },
            };
          },
        },
        {
          values: (({ DEFAULT: _, ...colors }) => colors)(
            flattenColorPalette(theme("borderColor"))
          ),
          type: ["color", "any"],
        }
      );
      matchUtilities(
        {
          "chop-offset": (value) => {
            return {
              [`& > :not([hidden]) ~ :not([hidden]):before`]: {
                "--tw-chop-x-offset": value,
              },
            };
          },
        },
        { values: theme("spacing") }
      );
    }),
  ],
};

[kyuumeitai]

This works perfectly, thank you!

[erkstruwe]

Since Tailwind 3.4 we can add styling to an element's children. This way, we can use divide and p together to center the divider:

<div class="flex flex-col divide-y *:py-4 first:*:pt-0 last:*:pb-0">
    <!-- Other elements -->
</div>

[AndrewBogdanovTSS]

This still looks not as nice as space-y

[Dragate]

Inspired by your suggestion, I created a utility pad-x-${spacing}/pad-y-${spacing} to deal with the verbose nature.

const plugin = require("tailwindcss/plugin");

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
        extend: {
        },
    },
    plugins: [
        plugin(({ matchUtilities, theme }) => {
            matchUtilities({
                "pad-x": (value) => ({
                    "& > *": {
                        "padding-left": value,
                        "padding-right": value,
                        "&:first-child": {
                            "padding-left": "0",
                        },
                        "&:last-child": {
                            "padding-right": "0",
                        },
                    },
                }),
                "pad-y": (value) => ({
                    "& > *": {
                        "padding-top": value,
                        "padding-bottom": value,
                        "&:first-child": {
                            "padding-top": "0",
                        },
                        "&:last-child": {
                            "padding-bottom": "0",
                        },
                    },
                }),
            }, {
                values: theme("spacing"),
            });
        })
    ],
}

[jeroenwtf]

I ended up wrapping a half-baked solution in a plugin, in case someone finds it useful. Didn't want to have to repeat snippets between project configs.

https://github.com/jeroenwtf/tailwindcss-divide-pad#readme

If you have better approaches let me know :)