Is there a shorter way to write a border on only one side?

Issue

I got borders on all the edges by doing something like:

It is actually a mistake, but at the time of the question I believe I can draw a line only to the TOP with the following code. (Actually, lines are drawn on all edges.)

<div class="border border-blue-900 border-t-1">foo</div>

I wanted to display it only on one side, so I did some research. I noticed that when I used border in tailwindcss, the following was output in the output file.

/**

• 1. Prevent padding and border from affecting element width.
• We used to set this in the html element and inherit from
• the parent element for everything else. This caused issues
• in shadow-dom-enhanced elements like where the content
• is wrapped by a div with box-sizing set to content-box.
• https://github.com/mozdevs/cssremedy/issues/4
• 2. Allow adding a border to an element by just adding a border-width.
• By default, the way the browser specifies that an element should have no
• border is by setting it's border-style to none in the user-agent
• stylesheet.
• In order to easily add borders to elements by just setting the border-width
• property, we change the default border-style for all elements to solid, and
• use border-width to hide them instead. This way our border utilities only
• need to set the border-width property instead of the entire border
• shorthand, making our border utilities much more straightforward to compose.
• https://github.com/tailwindcss/tailwindcss/pull/116 */

The original of this output would have come from https://github.com/tailwindlabs/tailwindcss/blob/723e8d4377eb25b66a6224f767937fa02762eb52/src/plugins/css/preflight.css#L71

I thought this was probably the cause. I have succeeded in applying it only to the top edge by writing the following.

<div class="border border-blue-900 border-t-1 border-l-0 border-r-0 border-b-0">foo</div>

However, this is too long. Is there any way to make it shorter?

Note: I am also considering the following as alternatives.

How do I take it as a parameter in JIT?

This way, I can also adjust the width (not the width in the border, it is for display: block).

What I want to do is just display it on any one side, so the above link is trying to display it on the bottom. (In other words, it doesn't matter if it's at the top, bottom, or anywhere else. It's just an example.)

Solution

You can apply border-width of 2px only to the top edge according to the documentation as following

<div class="border-t-2 border-blue-900">foo</div>

The error made was there is no utility class called border-t-1 in tailwind-CSS. Also applying border utility class adds the the CSS styling of border-width: 1px; which adds a border-width to all sides.

Check out the solution at tailwind playground

EDIT: Check out shingo.nakanishi's answer top apply border-top-width of 1px if you are using JIT mode

Answered By - Rifky Niyas