Improve compatibility with @tailwindcss/typography and @tailwindcss/forms

[thecrypticace]

This PR enables compatibility for the @tailwindcss/typography and @tailwindcss/forms plugins. This required the addition of new Plugin APIs and new package exports.

New Plugin APIs and compatibility improvements

We added support for addComponents, matchComponents, and prefix. The component APIs are an alias for the utilities APIs because the sorting in V4 is different and emitting components in a custom @layer is not necessary. Since prefix is not supported in V4, the prefix() API is currently an identity function.

 addComponents({
  '.btn': {
    padding: '.5rem 1rem',
    borderRadius: '.25rem',
    fontWeight: '600',
  },
  '.btn-blue': {
    backgroundColor: '#3490dc',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#2779bd',
    },
  },
  '.btn-red': {
    backgroundColor: '#e3342f',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#cc1f1a',
    },
  },
})

The behavioral changes effect the addUtilities and matchUtilities functions, we now:

• Allow arrays of CSS property objects to be emitted:

  addUtilities({
    '.text-trim': [
      {'text-box-trim': 'both'},
      {'text-box-edge': 'cap alphabetic'},
    ],
  })

• Allow arrays of utilities

  addUtilities([
    {
      '.text-trim':{
        'text-box-trim': 'both',
        'text-box-edge': 'cap alphabetic',
      },
    }
  ])

• Allow more complicated selector names

  addUtilities({
    '.form-input, .form-select, .form-radio': {
      /* styles here */
    },
    '.form-input::placeholder': {
      /* styles here */
    },
    '.form-checkbox:indeterminate:checked': {
      /* styles here */
    }
  })

New tailwindcss/color and tailwindcss/defaultTheme export

To be compatible to v3, we're adding two new exports to the tailwindcss package. These match the default theme values as defined in v3:

import colors from 'tailwindcss/colors'

console.log(colors.red[600])

import theme from 'tailwindcss/defaultTheme'

console.log(theme.spacing[4])

[philipp-spiess]