CODEWITHSUNDEEP
next.jstailwind-css
waqar
waqar

Reputation: 393

Tailwind css border color not working on web page

I am just trying with tailwindcss, I got stuck at very basic thing. I tried different tailwindcss's utility classed and it worked. But now I am stuck at border-color

<div className="px-4 border-gray-900 border-solid">
   <a href="#" className="block font-semibold">Menu1</a>
   <a href="#" className="block ">Menu2</a>
   <a href="#" className="block ">Menu3</a>
   <a href="#" className="block ">Login</a>
</div>

I can inspect the elements and it is crossed in inspect element which means somehow it is not being applied to dom.

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        negative: 'var(--color-negative)',
        positive: 'var(--color-positive)',
        'primary-background': 'var(--background-primary)',
        'sec-background': 'var(--background-sec)',
        'primary-text': 'var(--color-text-primary)',
      },
    },
    backgroundColor: (theme) => ({
      ...theme('colors'),
    }),
    borderColor: (theme) => ({
      ...theme('colors'),
    }),
  },
  variants: {
    backgroundColor: ['active'],
    borderStyle: ['responsive'],
  },
  plugins: [],
};

This is how my tailwind.config.js looks like

Attaching an image enter image description here

Upvotes: 31

Views: 68519

Answers (4)

Anh-Thi DINH
Anh-Thi DINH

Reputation: 2354

Maybe useful for someone. You need to use "preflight" to apply normal tailwind border class. Otherwise, the border style won't be applied.

Upvotes: 0

usersina
usersina

Reputation: 1783

Nothing was working for me until I added the border-style: solid using border-solid. I had to explicitly set border-0 though, else it will be applied to all directions.

<div className="border-0 border-b-2 border-solid border-b-red-600">Bottom border</div>

I am using "tailwindcss": "^3.3.3"

Upvotes: 17

Sahil Rajput
Sahil Rajput

Reputation: 385

Play live @ https://play.tailwindcss.com/KW66yu4vMu

You can have 1px default border or you can set custom border value as well as shown:

    <div class="border-4 border-gray-900">HELLO with 4px border</div>
    <div class="border-[13px] border-gray-900">HELLO with 13px border</div>

Upvotes: 1

chojnicki
chojnicki

Reputation: 3594

Like you see in inspector, you defined only border color but not border width. Because it is 0px, it is invisible ;)

You need to change it to

class="border border-gray-800"

"border" will by default mean border-width: 1px so if you need thicker use for example

class="border-2 border-gray-800"

or if you wanna it only on one side

class="border-right border-gray-800"

More in documentation.

Upvotes: 40

Related Questions