如何在Tailwind中移除::before选择器或清空content？删除勾选图标

1. 给元素设置空content #

Tailwind可以直接通过伪元素工具类实现，给目标元素添加 before:content-['']（如果是::after伪元素就用after:content-['']），就能把伪元素的content设为空字符串。

如果需要全局复用的自定义工具类，也可以在你的CSS文件里添加：

@layer utilities {
  .content-empty::before {
    content: '';
  }
}

之后直接给元素加content-empty类即可。

2. 移除输入元素的::before勾选图标 #

要彻底移除这个带✓图标的伪元素，核心是让它不再渲染。可以直接给输入元素添加 before:hidden 类，强制隐藏::before伪元素。

如果担心原伪元素的样式（比如占位空间、定位属性）还会影响布局，可以配合清空content和重置样式：

<input class="before:content-[''] before:hidden before:static before:p-0" ... />

这样就能完全清除原::before的图标及相关样式。

内容的提问来源于stack exchange，提问作者Areg Nikoghosyan