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

news/2025/3/15 14:26:22/

背景

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

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

两种配置实现

方式一

基于配置spacing

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**,然后看看效果

<div className="border-half border-black h-24 w-24"></div>

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

方式二

配置对应的特定属性:borderWidth

module.exports = {theme: {extend: {borderWidth: {'0.5': '0.5px',},},}
};

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

<div className="border-0.5 border-black h-24 w-24"></div>

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

总结

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


http://www.ppmy.cn/news/1274805.html

相关文章

Linux操作系统—文件和目录管理命令

从Linux目录结构我知道&#xff0c;Linux目录是一个树状结构&#xff0c;从/根目录开始&#xff0c;不同的目录挂载在/根目录之下&#xff0c;通过解除挂载移除相应的文件系统。文件与目录管理主要是通过命令行来进行操作&#xff0c;因此我必须了解文件系统的路径。 路径分为绝…

智能 GPT 图书馆又重生了

智能 GPT 图书馆又重生了 作者&#xff1a;程序员小白条 1&#xff09;概述 自从大二寒假准备开始筹备这个项目&#xff0c;到现在已经一年了&#xff0c;这个项目能维护一年&#xff0c;不愧是我.jpg。本来这个项目只是想练练手&#xff0c;因为那时候刚学完 Spring Boot2 V…

大语言模型--数据

数据 大语言模型 数据WebText和OpenWebText数据集Colossal Clean Crawled Corpus&#xff08;C4&#xff09;Benchmark的数据污染问题GPT-3的数据集The Pile数据集 WebText和OpenWebText数据集 WebText数据集被用于训练GPT-2模型。其目标是获取既多样化又高质量的数据集。以前…

3.3 内容管理模块 - 课程计划

文章目录 内容管理模块 - 课程计划一、介绍1.1 需求分析1.2 数据模型1.2.1 课程计划teachplan表1.2.2 teachplan_media 课程计划视频关联表 二、查询课程计划2.1 查询课程计划2.2 课程计划Dto2.3 TeachplanMapper2.4 TeachplanServiceImpl2.5 TeachPlanController 三、新增/修改…

算法通关第十九关-青铜挑战理解动态规划

大家好我是苏麟 , 今天聊聊动态规划 . 动态规划是最热门、最重要的算法思想之一&#xff0c;在面试中大量出现&#xff0c;而且题目整体都偏难一些对于大部人来说&#xff0c;最大的问题是不知道动态规划到底是怎么回事。很多人看教程等&#xff0c;都被里面的状态子问题、状态…

CentOS:Docker 创建及镜像删除

1、安装docker 远程连接服务器&#xff0c;可以直接下载netsarang比较好用 家庭/学校免费 - NetSarang Website 如果有残留docker未删除干净&#xff0c;请使用 sudo yum -y remove docker docker-common docker-selinux docker-engine Step1&#xff1a;安装必要的一些…

C# CSV文件(逗号分隔符)的读取和写入

1.CSV文件的写入原理&#xff1a; ①csv文件文件为逗号分隔符方式写入&#xff0c;起始写入的坐标位置为单元格的&#xff08;0,0&#xff09;假设用x,y分别表示单元格的横纵坐标&#xff0c;每次追加写入时&#xff0c;默认x坐标不变&#xff0c;y坐标都会1。 ②默认csv文件…

一文快速了解oCPX

01 什么是oCPX o是Optimized&#xff0c;优化一词的首字母。 CPX即Cost Per X&#xff0c;“X”即泛指传统的那些按不同方式进行结算的模式&#xff0c;如&#xff1a;CPC&#xff08;Cost Per Click&#xff0c;按点击付费&#xff09;、CPM&#xff08;Cost Per Mille&…