如何在JavaScript中使用自定义Tailwind类并通过指定类名用querySelector选择元素？

当然可以实现，这里给你几种简单直接的方案：

方案1：直接在HTML中添加自定义类名 #

这是最直观的方法，你只需要在目标div的class属性里加上自定义的mydiv类名，和Tailwind的类名共存即可：

<div class="bg-indigo-500 mydiv"></div>

之后就能直接用你想要的代码选中元素：

document.querySelector(".mydiv")

方案2：通过JavaScript动态添加自定义类名 #

如果没办法直接修改HTML（比如元素是动态生成的），可以先通过原有的Tailwind类名选中元素，再给它添加上自定义类：

// 先通过Tailwind类选中目标元素
const targetElement = document.querySelector(".bg-indigo-500");
// 添加自定义类名
targetElement.classList.add("mydiv");

// 现在就能用.mydiv选择这个元素了
const myDiv = document.querySelector(".mydiv");

注意：Tailwind CSS完全允许你混合使用自定义类和它的工具类，两者不会互相冲突，你可以放心添加自定义类用于JavaScript选择元素。

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