Question 271830 in CSS Question posted in
Some basic documentation can be found here.

Tailwind CSS top and bottom border not working

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

Tags:

2

Answers


  1. 0

    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 ?

    Login or Signup to reply.
  2. 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"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search