Browser ignoring .border

[lukeyouell]

I've come across an issue where the browser is ignoring the .border class:

This happens in both Chrome & Firefox.

[adamwathan]

What do you mean it's ignoring it? Can you share a project that demonstrates the issue along with both the expected result and the actual result? Not sure what I'm really looking at in that screenshot.

[adamwathan]

If you aren't using our @tailwind preflight reset, .border won't do anything on it's own as it only sets border-width and the browser's default border-style is none. So if you are layering just utilities on top of some existing CSS, you'll want to add .border-solid as well whenever working with borders.

[lukeyouell]

The border isn't being applied, the screenshot I provided is of the element when inspected.

Unfortunately I can't share the project, but I've attached a few more screenshots below:

This should have a one pixel border, code below screenshot:

<a class="text-white no-underline border border-blue-light hover:border-white py-3 px-4 rounded" href="#">Contact</a>

Inspect element results:

[lukeyouell]

If you aren't using our @tailwind preflight reset, .border won't do anything on it's own as it only sets border-width and the browser's default border-style is none. So if you are layering just utilities on top of some existing CSS, you'll want to add .border-solid as well whenever working with borders.

Could be a side-effect of using Purge CSS?

[lukeyouell]

Using .border-solid solves it

[adamwathan]

Unfortunately I can't share the project, but I've attached a few more screenshots below:

You can make a new project that reproduces the issue though yeah? It's hard to troubleshoot a screenshot of dev tools.

Are you using Preflight or not?

[fedetibaldo]

As far as I know is more of a design decision than a side effect of using PurgeCSS. Border style gets applied together with border color only once on preflight. You can actually see these two attributes in the `tailwind.js` configuration file. In this way, whenever you need a border, you tipically only have to set the width. EDIT: see #116

…

On Mon, Mar 26, 2018, 2:08 PM Luke Youell ***@***.***> wrote: If you aren't using our @tailwind <https://github.com/tailwind> preflight reset, .border won't do anything on it's own as it only sets border-width and the browser's default border-style is none. So if you are layering just utilities on top of some existing CSS, you'll want to add .border-solid as well whenever working with borders. Could be a side-effect of using Purge CSS? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#435 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AUJkjqJlviadlCF169BW2M1UgA1gWbLJks5tiNo6gaJpZM4S6-wS> .

[adamwathan]

Here's your exact code in a JSFiddle, the border is applied as expected:

https://jsfiddle.net/vufwsen7/

In your case you must have some style somewhere that is setting the border style of that element to none, either because you aren't using preflight, or you have some other CSS that's changing it.

Again if you can create a small project that reproduces the issue I am happy to point out exactly what's causing the problem but I can't do it without more information. It's clear from your screenshot that border-style is being set to none whereas in a project that uses Preflight, every element receives a border style of solid by default:

https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css#L530-L551

[adamwathan]

Closing as not a bug or issue with Tailwind itself but happy to help you figure out where that style is coming from in your project if you can share a reproduction.

[HapLifeMan]

I am using your laravel-preset and I I have the same issue in production mode on my server.

After a npm run prod on my server, I can see this in app.css:

*,:after,:before{border:0}

Trying this on my Mac with npm run prod or npm run watch is fine:

*,:after,:before{border:0 solid #dae1e7}

I referenced my own tailwind.js in the postCss() options on build:

require('tailwindcss')('./tailwind.js'),

Do you still want something to reproduce or do you have enough information?

[adamwathan]

Not sure why there would be a difference between local and production; best suggestion is to make sure you are using the same version of node and npm in both environments and see if the issue still persists.

I build all my Tailwind stuff on the server too with no issues, using node 8.11.1 and yarn 1.6.0 on the server I just checked.

[pusle]

Using .border-solid solves it

Thank you for posting that. I have the same problem, but no purgeCSS.

[luisrudge]

I'm also seeing this issue in tailwindcss@next 🤔 I'm not using purgeCSS.

[theomjones]

I'm also seeing this issue on Chrome & Firefox, in a Vue app using 1.0.1.
No purgecss, using @preflight as well.