Tailwindcss: Individual Border Settings

[bcorcoran]

Currently it is impossible to use only tailwind to set different border styles or colors per side.

This was exaggerated when I tried to accomplish a CSS triangle, such as: https://css-tricks.com/snippets/css/css-triangle/

I could use an SVG in this particular instance, but that isn't the point. This is a limitation with the way border classes are currently defined.

If possible, I think it would be best if border{-side?}{-width?} were left in tact, but also allowing:

border{-side?}{-style?}
border{-side?}{-color?}

[spiltcoffee]

As discussed over in #560 (and previously at tailwindcss/discuss#46), this is probably not something that would be added to Tailwind due to how much data it would add to the default stylesheet.

If you would style like this, you could achieve what you want via a plugin. As an example, see https://github.com/spiltcoffee/tailwindcss/commit/e3f41fb746b1f1388cde2a4bd44f5b4d9f0b0d55

[adamwathan]

Yeah not going to add this at the moment, would be an easy plugin to write though 👍

[jameshahn2]

Wow. It must be easy if I pulled it off. For anyone else that Google CSS triangles in TailwindCSS, this is how it's done. Go to tailwind/config/tailwind.js, find the plugins section and drop this code in there:

  plugins: [
    container({
      // center: true,
      // padding: '1rem',
    }),

    function({ addComponents }) {
      const arrows = {
        ".arrow-up": {
          width: "0px",
          height: "0px",
          borderLeft: "5px solid transparent",
          borderRight: "5px solid transparent",
          borderBottom: "5px solid black"
        },

        ".arrow-down": {
          width: "0",
          height: "0",
          borderLeft: "20px solid transparent",
          borderRight: "20px solid transparent",
          borderTop: "20px solid #f00"
        },

        ".arrow-right": {
          width: "0",
          height: "0",
          borderTop: "60px solid transparent",
          borderBottom: "60px solid transparent",
          borderLeft: "60px solid green"
        },

        ".arrow-left": {
          width: "0",
          height: "0",
          borderTop: "10px solid transparent",
          borderBottom: "10px solid transparent",
          borderRight: "10px solid blue"
        }
      };
      addComponents(arrows);
    }
  ],

You just wrote a plugin, congrats!

Use in your Tailwind classes like everything else. For example

<div class='arrow-down'></div>

[johnmutuma5]

An example for the individual border colors:

plugins:[
    plugin(function({ addUtilities, theme, config }) {
      const themeColors = theme('colors');
      const individualBorderColors = Object.keys(themeColors).map(colorName => ({
        [`.border-b-${colorName}`]: {
          borderBottomColor: themeColors[colorName]
        },
        [`.border-t-${colorName}`]: {
          borderTopColor:  themeColors[colorName]
        },
        [`.border-l-${colorName}`]: {
          borderLeftColor:  themeColors[colorName]
        },
        [`.border-r-${colorName}`]: {
          borderRightColor:  themeColors[colorName]
        }
      }));

      addUtilities(individualBorderColors);
    }),
]