如何在JavaScript中访问并使用Tailwind CSS工具类

嘿，这个坑我刚接触Tailwind的时候也踩过！你现在的问题在于搞混了行内CSS属性和Tailwind工具类的区别：

• document.getElementById("demo").style.color 是用来设置行内CSS的颜色值（比如 "red"、"#1e40af" 这种），而 text-blue-600 是Tailwind预定义的CSS类，不是颜色值，所以直接给style赋值肯定不会生效。

要给元素应用Tailwind的工具类，你需要操作元素的classList属性，下面是几种常用的实现方式：

1. 直接添加Tailwind类 #

如果元素之前没有其他颜色类，直接用add方法添加即可：

const demoElement = document.getElementById("demo");
demoElement.classList.add("text-blue-600");

2. 替换原有颜色类 #

如果元素已经有其他Tailwind颜色类（比如默认的text-gray-900），需要先移除旧类再添加新类：

const demoElement = document.getElementById("demo");
// 移除旧的颜色类
demoElement.classList.remove("text-gray-900");
// 添加新的颜色类
demoElement.classList.add("text-blue-600");

3. 动态切换类（比如点击切换） #

如果需要实现切换效果（比如点击元素切换颜色），可以用toggle方法（存在则移除，不存在则添加）：

const demoElement = document.getElementById("demo");
demoElement.addEventListener("click", () => {
  demoElement.classList.toggle("text-blue-600");
});

或者用replace方法精准替换指定类：

demoElement.classList.replace("text-red-500", "text-blue-600");

注意：确保Tailwind编译了这些类 #

如果你的项目开启了Tailwind的JIT模式（现在默认是开启的），Tailwind只会编译代码中明确出现过的类。如果是通过JS动态添加的类，可能会被Tailwind从最终的CSS文件中剔除，导致添加了类也看不到效果。

解决方法是在tailwind.config.js的safelist中列出需要动态添加的类：

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  safelist: [
    'text-blue-600',
    'text-red-500',
    // 其他需要动态添加的类
  ],
  // 其他配置...
};

这样就能确保这些类被编译到最终的CSS里啦！

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