Tailwind CSS top and bottom border not working

Question

I'm trying to place a border top and bottom only (not right or left).

From what I can see there are no conflicting css tags

If I use the following it displays nothing:

className="border-y-2 border-gray-3 h-24 ml-4 mb-0 w-full"

If I use this, it displays a border on all sides...

className="border-solid border-y-2 border-gray-3 h-24 ml-4 mb-0 w-full"

Am I missing something on the tailwind docs? https://tailwindcss.com/docs/border-width#customizing-your-theme

You are required to post a minimal reproducible example here, within your question, and not a link to any other site. — Rob
– Rob, Commented Oct 25, 2023 at 21:45

LSE · Accepted Answer · 2023-10-25 00:38:08Z

1

The most common mistake is forgetting to add @tailwind base .
Inside that, it applies border-style: solid to all elements as well as a default border-color.

Moreover, border-gray-3 is not a default color for tailwind. Maybe you meant border-gray-300 ?

Lastly, border-y was introduced in version 3, are you sure you're not using version 1 or 2 ?

answered Oct 25, 2023 at 0:38

LSE

1,3881 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Robshaw Over a year ago

You were right, it was the @tailwind base. Thanks!

Rashmi Yadav · Accepted Answer · 2023-10-26 10:00:13Z

1

Just do a little modification:

className="border-t border-b border-gray-300 h-24 ml-4 mb-0 w-full"

Here, In this modified className:

border-t adds a border to the top of the element.
border-b adds a border to the bottom of the element.
border-gray-300 specifies the color of the border.

This will apply borders only to the top and bottom of the element, leaving the left and right sides border less. Hope this will help!

answered Oct 26, 2023 at 10:00

Rashmi Yadav

795 bronze badges

2 Comments

Tom Robshaw Over a year ago

Hi Rashmi, Thanks for this, tried that but still no luck. "border-gray-3" is a color I declare in my custom.scss file like so: $primary: #d23600; $secondary: #150604; $success: #39a14c; $white: #ffffff; $black-1: #1b1a1a; $green-1: #39a14c; $red-1: #e30612; $gray-1: #c4c1c0; $gray-2: #e8e7e7; $gray-3: #c4c4c4; $gray-4: #717070;

Rashmi Yadav Over a year ago

Hi Tom, please check the tailwind configuration, make sure you have added @tailwind base; in your style.scss file. Then restart the server and check. If it still won't work LMK!

Arr · Accepted Answer · 2023-10-25 00:47:33Z

0

Use border-t-2 for top and border-b-2 for bottom. You can use arbitrary values as well border-t-[3px]. Example using your snippet :

className="border-solid border-t-2 border-b-2 border-gray-3 h-24 ml-4 mb-0 w-full"

answered Oct 25, 2023 at 0:47

Arr

1381 silver badge7 bronze badges

Comments

Mohammad · Accepted Answer · 2023-10-25 07:46:45Z

0

first className miss border-style

it doesn't appear because border property need three values

border-width
border-style
border-color

we write it in css border: 1px solid black;

the color gray-3 is not default color in tailwind

check: https://tailwindcss.com/docs/customizing-colors#default-color-palette

example how to write it in tailwind:

<script src="https://cdn.tailwindcss.com"></script>
<div class="border-solid border-y-2 border-gray-300 h-24 ml-4 mb-0 mt-4 w-full">
  hello world
</div>

answered Oct 25, 2023 at 7:46

Mohammad

463 bronze badges

Collectives™ on Stack Overflow

Tailwind CSS top and bottom border not working

4 Answers 4

1 Comment

2 Comments

Comments

first className miss border-style

the color gray-3 is not default color in tailwind

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

first className miss border-style

the color gray-3 is not default color in tailwind

Comments

Your Answer

Sign up or log in

Post as a guest

Related