[0.2] Support cascading border colors and styles

[adamwathan]

Previously all of our border width styles (.border, .border-2, etc) worked by applying the border shorthand property.

They would set the width to the specified width, but also set the style to solid, and the color to the default color specified in the borderColors config.

This seemed convenient but has the consequence of resetting any border color overrides any time you change the border width at a breakpoint, for example:

<div class="border border-purple md:border-2"></div>

This will have a 1px purple border on small screens, and a 2px grey border on medium screens.

This is pretty unintuitive, and we have the same issue with border styles (dashed, dotted, etc.)

This resolves all of this by setting a default border style, width, and color to all elements as part of preflight, that looks like this:

*,
*::before,
*::after {
  border-width: 0;
  border-style: solid;
  border-color: config('borderColors.default', black);
}

So every element by default will have a zero width border, set to the default border color.

The border width utilities now only set border-width, not the entire border shorthand. That means that the previous example:

<div class="border border-purple md:border-2"></div>

...will now retain the purple color at larger screens, because md:border-2 is only overriding the width.

This also removes the need for this gruesome borderStyleReset hack we had to apply, where any time you applied a border style, we also reset the border-width back to 0, but defined that portion of the class before the border width utilities so that those would still take precedence. This was the only place in the entire framework where one class had multiple definitions in different places, and actually leads to the bug discussed in #112.

Overall this change dramatically simplifies this portion of the codebase, and also makes the behavior much more intuitive.

The only question is if there's any unintended consequences to the styles added to preflight. Testing suggests that everything is totally fine, but if anyone has questions or concerns feel free to bring them to our attention.

This is technically a breaking change, so even though we are still pre-1.0 and moving rapidly, it's probably wise to save this for 0.2 instead of an 0.1.x patch release.

Resolves #80.
Resolves #112.

[reinink]

[joelataylor]

I think I'm suffering the consequences of this on version 0.1.5.

.section-card-more {
  @apply .no-underline .capitalize .text-grey-darkest .text-lg;

  & span {
    @apply .border-b-2 .border-grey-darkest .border-dotted;
  }

}

The border-dotted class is resetting the border-width: 0 - which obviously hides the border altogether.

I'm hoping this will fix that???

[joelataylor]

I just took a look at the code changed and it looks like it will! Now to figure out how I can get this in my current version, or upgrading to 0.1.6 then getting it in that version. hmmmm

[adamwathan]

I would work around it for now by just writing `border-style: dashed` in your component instead of using `@apply` 👍🏻

…

On Sat, Nov 11, 2017 at 9:57 PM Joel Taylor ***@***.***> wrote: I just took a look at the code changed and it looks like it will! Now to figure out how I can get this in my current version, or upgrading to 0.1.6 then getting it in that version. hmmmm — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#116 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEH3bGG8lLqWQC-OfMJxlSP6kAwtM59-ks5s1l6fgaJpZM4QTfkD> .

[joelataylor]

@adamwathan - so simple a solution! Thanks mate.

[fc-reus]

This also removes default borders from input, select and textarea and produces some problems if one starts using Tailwind in an already existing application.

My suggestion would be adding this:

input, select, textarea {
    border-width: 1px;
}

[DavidVollmers]

Small heads-up on anybody building web components and using the :host selector. This is the culprit why the following style won't apply:

:host {
  border: 1px solid red;
}

The only solution here is to use !important...