Changed Border Color and Border Style Generation to provide individual edge utilities

[spiltcoffee]

Fixes #559.

I was bored so I tried making a fix for this change. I'm not sold on this implementation, though - this increases the size of border color utilities fourfold, and they may not all be used, so as a default it's proooooobably not the best thing.

If this was more customisable, it might be better, but I'm thinking it might be better to try and do this as a plugin instead.

[tlgreg]

This did came up in the past, not sure if things changed since.
tailwindlabs/discuss#46

[spiltcoffee]

Yeah, probably not. I'm thinking this pull request should be rejected, considering how much data it would add to the default case.

It's probably better done as a plugin for those wanting these styles. For those who aren't sure how, here's an attempt at an implementation you can use: https://github.com/spiltcoffee/tailwindcss/commit/e3f41fb746b1f1388cde2a4bd44f5b4d9f0b0d55

(If there's demand, I could clean this up into it's own repo so you can install it through npm).

[simensen]

The following appears to work just fine for people who are wanting to know how to create this plugin.

var _ = require('lodash')
var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default

module.exports = {
  plugins: [
    function({ addUtilities, e, theme, variants }) {
      const colors = flattenColorPalette(theme('borderColor'))

      const utilities = _.flatMap(_.omit(colors, 'default'), (value, modifier) => ({
        [`.${e(`border-t-${modifier}`)}`]: { borderTopColor: `${value}` },
        [`.${e(`border-r-${modifier}`)}`]: { borderRightColor: `${value}` },
        [`.${e(`border-b-${modifier}`)}`]: { borderBottomColor: `${value}` },
        [`.${e(`border-l-${modifier}`)}`]: { borderLeftColor: `${value}` },
      }))

      addUtilities(utilities, variants('borderColor'))
    },
  ],
}

[icaroscherma]

@simensen Great job! I changed a bit your code for people that don't want to use Lodash just for this.

var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;

module.exports = {
  plugins: [
    ({ addUtilities, e, theme, variants }) => {
      const colors = flattenColorPalette(theme('borderColor'));
      delete colors['default'];

      const colorMap = Object.keys(colors)
        .map(color => ({
          [`.border-t-${color}`]: {borderTopColor: colors[color]},
          [`.border-r-${color}`]: {borderRightColor: colors[color]},
          [`.border-b-${color}`]: {borderBottomColor: colors[color]},
          [`.border-l-${color}`]: {borderLeftColor: colors[color]},
        }));
      const utilities = Object.assign({}, ...colorMap);

      addUtilities(utilities, variants('borderColor'));
    },
  ],
};

[CristianDeluxe]

@simensen and @icaroscherma Awesome job!!, just my 2 cents in case someone is using extended custom colors.

var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;

module.exports = {
  plugins: [
          ({ addUtilities, e, theme, variants }) => {
              let colors = flattenColorPalette(theme('borderColor'));
              delete colors['default'];
  
              // Replace or Add custom colors
              if(this.theme?.extend?.colors !== undefined){
                  colors = Object.assign(colors, this.theme.extend.colors);
              }
  
              const colorMap = Object.keys(colors)
                  .map(color => ({
                      [`.border-t-${color}`]: {borderTopColor: colors[color]},
                      [`.border-r-${color}`]: {borderRightColor: colors[color]},
                      [`.border-b-${color}`]: {borderBottomColor: colors[color]},
                      [`.border-l-${color}`]: {borderLeftColor: colors[color]},
                  }));
              const utilities = Object.assign({}, ...colorMap);
  
              addUtilities(utilities, variants('borderColor'));
          },
      ],
};

[tomchen]

Border opacity does not work with this plugin method, otherwise it works fine

[rjworks]

Border opacity does not work with this plugin method, otherwise it works fine

how did you use it?

[rjworks]

Border opacity does not work with this plugin method, otherwise it works fine

how did you use it?

nvm!
border-r-red-900 border-l-blue-900 bg-blue-600

[eswat2]

Exactly what I was looking for to finish my port... !!

[hellomrbigshot]

Nice! It works for me.

[pwkurth]

Might be solved with this PR

#4404

[icaroscherma]

@pwkurth yes, this is old school, now you can just set a custom color on tailwind.config.js under theme.extend.colors.YOUR_COLOR_NAME and it will be available everywhere.