tailwindcss中解决border不显示及自定义颜色

官网的例子border拷贝过来也不显示，查阅了很多资料，最后发现要使用border 属性，首先先设置border的border-style 否则后面的距离和颜色都无法显示。其次就是查看线条预设宽度，如果超过范围也不会显示，边框颜色也是如此（但是可以根据自己的需求来自定义颜色）。

1、自定义颜色

在配置文件tailwind.config.js中自定义

module.exports = {
  theme: {
    colors: {
      //下面是4个自定义颜色
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      MyColor1: 'rgb(0 126 55)',    
      MyColor2: 'rgb(0 106 57)',    
    }
  }
}

使用

<div class="bg-MyColor1">demo</div>

2、border不显示的问题

<!--
也就是border的style和color必须共同使用。
border-style 有四类类型，可供使用。
1、border-solid
2、border-dashed
3、border-dotted
4、border-double
-->
<div class="border-solid border-r-8 border-red-500 ">lvmanba.com</div>

原文地址：https://blog.csdn.net/LvManBa/article/details/144003444

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！