How to add a vendor prefix to a Tailwind CSS value and not the property?

I'm trying to use text-align: center (Tailwind class, text-center) but would like to apply a vendor prefix to the value so it would be, text-align: -webkit-center. How can I apply it inline?

I've tried text-[-webkit-center] but it is interpreted as color: -webkit-center, which is incorrect.

I understand that Tailwind has an Autoprefixer option, but that applies the prefix to the property (ie. -webkit-box-align: center) and not the value.

Solution

Arbitrary value syntax only works for class utilities registered with matchUtilities() internally, where their values can be "dynamic". For the class utilities for text-align, they are registered in Tailwind core via addUtilities(), since there are only a few valid values text-align can have:

textAlign: ({ addUtilities }) => {
  addUtilities({
    '.text-left': { 'text-align': 'left' },
    '.text-center': { 'text-align': 'center' },
    '.text-right': { 'text-align': 'right' },
    '.text-justify': { 'text-align': 'justify' },
    '.text-start': { 'text-align': 'start' },
    '.text-end': { 'text-align': 'end' },
  })
},

Thus they are more "static". To apply text-align: -webkit-center, you could:

Use an arbitrary property class like:

<div class="[text-align:-webkit-center]">

Use a Tailwind Plugin that adds a rule that applies the declaration:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-webkit-center': {
          'text-align': '-webkit-center',
        },
      })
    })
  ]
}

<div class="text-webkit-center">

Add a CSS rule to a CSS file (or otherwise) that loads on to the page:

.text-webkit-center {
  text-align: -webkit-center;
}

<div class="text-webkit-center">