如何在Tailwind中添加两个类以实现JavaScript元素定位

一、添加JavaScript定位类的正确方式 #

不用额外创建多个class属性，直接把用于JS定位的类名和Tailwind样式类、第三方组件类（比如Font Awesome）放在同一个class属性里即可：

• 定位类的命名只要保证唯一、易识别就行，避免和Tailwind内置类名重复（比如别叫text-white这种）。
• 这类类不需要定义任何样式，纯粹作为JS选择器的标识。

二、修复示例中的重复class问题 #

你提供的示例代码里写了两个class属性，这不符合HTML规范，浏览器只会解析第一个class属性，第二个会被忽略。正确的做法是把所有类合并到单个class属性中，同时尽量用Tailwind类替代内联style：

错误代码：

<i class="fa-solid fa-play fa-2xl" style="color: #fcfcfc;" class="Mexico"></i>

修正后代码（用Tailwind内置颜色类）：

<i class="fa-solid fa-play fa-2xl text-white Mexico"></i>

若需使用自定义颜色#fcfcfc：

<i class="fa-solid fa-play fa-2xl text-[#fcfcfc] Mexico"></i>

这样既符合HTML规范，又保留了Tailwind的写法，同时Mexico类可以正常被JavaScript获取到（比如用document.querySelector('.Mexico')）。

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