如何为Tailwind CSS的值而非属性添加浏览器前缀？

要在Tailwind中实现内联的text-align: -webkit-center，你可以用以下两种方法：

• 直接使用内联style属性
  这是最直接的方式，跳过Tailwind的类解析，直接写原生CSS：

  <div style="text-align: -webkit-center">你的内容</div>
  

• 使用Tailwind的任意属性语法
  Tailwind支持[property:value]格式的任意属性类，能精准指定属性和值，不会和text-前缀的color属性混淆：

  <div class="[text-align:-webkit-center]">你的内容</div>
  

如果这个样式需要多次复用，还可以在tailwind.config.js里自定义工具类：

module.exports = {
  theme: {
    extend: {
      utilities: {
        'text-webkit-center': {
          'text-align': '-webkit-center',
        },
      },
    },
  },
}

之后就能直接用text-webkit-center类来调用这个样式了。

你之前尝试的text-[-webkit-center]之所以失效，是因为Tailwind里text-前缀是专门映射到color属性的，所以会被解析成color: -webkit-center，自然不符合需求。

内容的提问来源于stack exchange，提问作者Mix Master Mike