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

Question

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.

Answer 1

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">