Divide

go.raybo.org/2cDu

The divide classes allow you to easily set up borders between elements

Divide Width

  • divide(-DIR)(-AMT)
    • SID

      x y
    • AMT (divide)

      0 2 4 8 reverse

Docs Try it

You can set the direction or the width of the lines that will appear between elements and Tailwind will automatically add the borders in between the elements. Although there is no single pixel border, if you simply use divide-x or divide-y without an amount, you'll get one pixel.

You may also need some classes like inline-block or a span tag for divides that run in the x order.

There's an interesting additional reverse option here. If you're using flexbox to reverse the position of the elements, this extra class will make sure that the borders appear in the right place with something like divide-y-reverse flex flex-col-reverse

Divide Opacity

  • divide-opacity-AMT
    • AMT (opacity/100)

      0 5 10 20 25 30 40 50
      60 70 75 80 90 95 100

Docs Try it

Divide opacity of course lets you control the opacity of the divides, you can include values from 0 to 100% and notice that there are more values at the beginning and the end. The 0 and 100 values are to reset things if they already have values, which you usually do in dynamic applications.

Divide Color

  • divide-COL-STR
    transparent transparent black white
    gray red yellow green blue indigo purple pink
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900
    50 100 200 300 400 500 600 700 800 900

Docs Try it

The border colors just as you'd expect are trasnparent, black white and current...which sets the color to whatever the current color is set to. Plus the traditional gray, red, yellow, etc. and the strengths go from 100 to 900.

Divide Style

  • divide-(STL)
    • STL (divide-style)

      none solid dashed dotted double

Docs Try it

There's a few border styles available. Interstingly enough the double style doesn't work well unless the border is set to 4 or 8 pixels.