我只是在尝试使用 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 的样子
附上图片
最佳答案
就像你在检查器中看到的那样,你只定义了边框颜色而不是 border width .因为是0px,所以不可见;)
你需要把它改成
class="border border-gray-800"
“边框”默认表示 border-width: 1px
所以如果你需要更厚的使用,例如class="border-2 border-gray-800"
或者如果你只想在一侧class="border-right border-gray-800"
更多在 documentation .
关于next.js - Tailwind css 边框颜色在网页上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61759776/