Border - Top only

[mikhailbot]

Firstly, thanks for Tailwind!

I'm trying to add a border-top to a div and I'm not sure that's even possible currently... on version 0.2.2

<div class="border-t border-red">...</div>

...outputs...

.border-red, .hover\:border-red:hover {
    border-color: #e3342f;
}

.border-t {
    border-top-width: 1px;
}

But this doesn't add a border as there's no border-style! So I'l add border-solid which should fix that...except it adds the below:

.border-solid {
    border-style: solid;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}

Which works...except it also adds a border on all the other sides of the div of 4px!

Am I going crazy or doing something wrong?

[mikhailbot]

Hmm OK I couldn't emulate it in Codepen: https://codepen.io/mikhaildelport/pen/bYZxVe

So maybe this is something to do with PostCSS/Vue. I used https://github.com/adamwathan/vue-cli-tailwind-example to generate project and confirmed it does the same with the base repo.

[mikhailbot]

Hmm think I've figured it out, relevant issue: https://github.com/adamwathan/vue-cli-tailwind-example/issues/1

[joshcoast]

I have this same problem, but I can't find what mikhailbot did to solve this? Does anyone know? The last link he posted is a 404 now.

[AlexVipond]

@joshcoast Are you experiencing this problem on the current version (1.0.4) or mikhailbot's version (0.2.2)?

[dhanush167]

Bump

[rationalthinker1]

bump.

[gkweb]

bump

[clintfisher]

Having this issue as well (bottom border), and am not using vue. tailwind 2.0.3

I was able to work around it by adding border-0 first in my classlist border-0 border-b border-solid

[VTrngNghia]

Having this issue as well (bottom border), and am not using vue. tailwind 2.0.3

I was able to work around it by adding border-0 first in my classlist border-0 border-b border-solid

Not working for me (tailwind 2.1.4). the border-0 generates a bunch of !important styles, so it overrides everything else

[mrwensveen]

I was having the same issue. Turned out that in my case preflight: false was set in corePlugins. Setting it to true fixed the problem (turned it off again because it broke something in my specific case). HTH.

Update: if you add this to your main stylesheet, it should work again (copied from dist/base.css at about line 400):

* {
  border-width: 0;
  border-style: solid;
}

See also: #116

[silverwind]

Another solution to avoid the preflight and its wildcard selectors is to add the missing border-{dir}-style classes, which unocss also features btw:

@tailwind utilities;
@layer utilities {
  .border-b-solid { border-bottom-style: solid }
  .border-t-solid { border-top-style: solid }
  .border-l-solid { border-left-style: solid }
  .border-r-solid { border-right-style: solid }
  .border-x-solid { border-left-style: solid; border-right-style: solid }
  .border-y-solid { border-top-style: solid; border-bottom-style: solid }
}