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

user_1979953 0
Viewed 10894

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
    1. 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.)

tailwind-css css html
5 Answers

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

user_138332180

You can achieve this by using below class

border-solid border-0 border-t border-blue-900
user_45784580

Thanks to this answer. I use JIT, I can make the following for 1px:

<div class="border-t-[1px] border-blue-900">foo</div>
user_19799530

I don't know why but sometimes I need to add border-b-0 border-r-0 border-l-0 in addition to the provided answers ( That worked for me, but not always ). If someone knows why, let me know.

user_18417100

If anyone else is pulling their hair out as to why something like border-t border-t-sky-500 isn’t working, and you’re using Tailwind through PostCSS, then check your PostCSS invocation.

If you omit the -o {outfile} and use the stdout output feature, Tailwind prints debug output so you end up with something like this at the beginning of your final production CSS:

Source path:foo/bar/baz.css Setting up new context... Finding changed files:123.456ms Reading changed files:123.456ms Generate rules:123.456ms Build stylesheet:123.456ms Potential classes:123 Active contexts:123 JIT TOTAL:967.483ms *, ::before, ::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color:#e5e7eb
}

In other words, using stdout output of PostCSS with Tailwind ruins the first style rule of Tailwind, which includes setting border-style: solid on everything.

This is a bug, and it must be filed somewhere, but I couldn’t find it so far.

user_2474410
Related