Tailwindcss: Add `currentColor` to the default Tailwind palette

[hacknug]

I think it might be a good idea to add current: ‘currentColor’ to the default color palette. This would save users using the CDN version of Tailwind from writing some custom CSS on their pens/sandboxes/projects.

I was using the CDN version to prototype a project right now, and having that would’ve saved me from having to override the default border-color.

[adamwathan]

Can you share a use case for this where it's significantly more cumbersome or impossible to just specify the border color explicitly? I don't think it's unreasonable to add this but I've never personally needed it.

[codytooker]

‘border-color: currentColor’ can be valuable with things like hollow buttons.

If default, hover, and focus all have different variations but the text and border colors are the same in each variant we don’t have to add ‘hover:border-red-500’ or ‘focus:border-blue-400’ simply change the text color and let the border follow

[yakobe]

There is also the use case when a color is set dynamically. E.g. an app has a user configurable setting for a color. This would allow other elements to react automatically based on the current color.

[adevade]

I would also like to see currentColor in the default config, along with inherit.
I've found color-inherit to be useful on simple SVG icons that should have the same color as the text, and maybe the text-color is dynamic as @yakobe said.

If @adamwathan is up for the idea, I'm willing to submit a PR to add both (or only currentColor). 😃

[hacknug]

@adevade currentColor already inherits so .text-current should be equivalent to .text-inherit. Also SVGs don't use color for anything, only fill and stroke. For those Tailwind already ships .fill-current and .stroke-current by default (which is why I think current should be part of the default palette).

[nikkijd]

I think adding dynamic colors for fill based on defined colors will be very helpful.

[Larsklopstra]

This use case is helpful for adding loading indicators in buttons

[craigerskine]

I use currentColor ALL the time. Example:

class="text-gray-500 hover:text-blue-500 border border-current"

Border color follows the text color so I don't have to stack the border colors for hover, focus, etc. Simple, elegant. The first thing I do when using Tailwind in a project is extend the colors to add currentColor.

[benface]

@craigerskine If you're customizing the config, you can make currentColor the default border color:

// tailwind.config.js
theme: {
  extend: {
    borderColor: {
      'default': 'currentColor',
    },
  },
}

That way you could omit border-current from your example and it would still work.

I agree that 'current': 'currentColor' should be in the default theme colors though, mostly for the CDN version.

[adamwathan]

Happy to merge a PR for this.

[philippbosch]

@adamwathan: This can be closed now that #1438 was merged (sorry, forgot the Closes #998 in the PR body)