Tailwind css 边框颜色在网页上不起作用

Question

我只是在尝试使用 tailwindcss，我陷入了非常基本的事情。我尝试了不同的tailwindcss 的实用程序分类并且它起作用了。但现在我被困在边框颜色

<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>

我可以检查元素，它在检查元素中交叉，这意味着它没有被应用于 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: [],
};

这是我的 tailwind.config.js 的样子

附加图像

Answer 1

就像您在检查器中看到的那样，您只定义了边框颜色，但没有定义边框宽度。因为是0px，所以不可见;)

你需要把它改成

class="border border-gray-800"

“边框”默认是指，border-width: 1px所以如果你需要更厚的使用，例如

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

或者如果你只想在一侧

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

更多的文档。

Answer 2

border-style: solid在我添加using之前，没有什么对我有用border-solid。但我必须明确设置border-0，否则它将应用于所有方向。

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

我在用"tailwindcss": "^3.3.3"