如何使用 TailwindCSS 画一条0.5px的线条

背景

在移动端项目,一般为了让线条看起来更细、更锐利,此时使用0.5px的线条是非常合适的。那么如何使用TailwindCSS画一条0.5px的线条呢?

在实现这个需求的时候,首先去TailwindCSS官网查了一下border有没有对应的内置工具类,发现内置的线条最细的是1px;所以我们需要自定义配置 TailwindCSS 的 space属性。下面将详细说明如何配置。

两种配置实现

方式一

基于配置spacing

javascript 复制代码
const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {},
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        ".border-half": {
          "border-width": "0.5px",
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};

在这个配置方式中,我们自定义plugin插件,插件的作用是添加了一个新的工具类 .border-half来表示0.5px的边框宽度。

在HTML上添加**.border-half**,然后看看效果

javascript 复制代码
<div className="border-half border-black h-24 w-24"></div>

方式二

配置对应的特定属性:borderWidth

javascript 复制代码
module.exports = {
    theme: {
        extend: {
            borderWidth: {
                '0.5': '0.5px',
            },
        },
    }
};

在HTML上添加**.border-0.5**,然后看看效果

javascript 复制代码
<div className="border-0.5 border-black h-24 w-24"></div>

总结

本篇教程通过两种方式实现 Tailwind CSS 创建一条 0.5px 线的需求,希望能够帮助到有疑问的朋友~

相关推荐
西洼工作室8 小时前
【解决导航栏字体图标渲染导致文本闪烁问题】采用腾讯视频的解决方案
前端·css·css3
站在风口的猪11088 小时前
《前端面试题:CSS的display属性》
前端·css·html·css3·html5
普宁彭于晏10 小时前
元素水平垂直居中的方法
前端·css·笔记·css3
超级土豆粉21 小时前
CSS3 的特性
前端·css·css3
lljss20201 天前
html文字红色粗体,闪烁渐变动画效果,中英文切换版本
css·html·css3
全栈陈序员2 天前
前端文件下载常用方式详解
前端·javascript·chrome·ajax·css3·html5·safari
普宁彭于晏2 天前
CSS3相关知识点
前端·css·笔记·学习·css3
站在风口的猪11083 天前
《前端面试题:CSS预处理器(Sass、Less等)》
前端·css·html·less·css3·sass·html5
lexiangqicheng3 天前
es6+和css3新增的特性有哪些
前端·es6·css3
站在风口的猪11083 天前
《前端面试题:CSS3新特性》
前端·css·html·css3·html5