tailwindcss/__tests__/modifyConfig.test.js

import postcss from 'postcss'
import tailwind from '../src/index'

test('plugins can add new theme values', () => {
  return postcss([
    tailwind({
      corePlugins: [],
      plugins: [
        {
          modifyConfig: function(config) {
            return {
              ...config,
              theme: {
                ...config.theme,
                rotate: {
                  '0': '0deg',
                  '90': '90deg',
                  '180': '180deg',
                  '270': '270deg',
                }
              }
            }
          },
          handler: function({ addUtilities, theme }) {
            addUtilities(Object.entries(theme('rotate')).map(([key, value]) => {
              return {
                [`.rotate-${key}`]: {
                  transform: `rotate(${value})`,
                },
              }
            }))
          },
        }
      ]
    }),
  ])
    .process('@tailwind utilities;',
      { from: undefined }
    )
    .then(result => {
      const expected = `
        .rotate-0 {
          transform: rotate(0deg)
        }
        .rotate-90 {
          transform: rotate(90deg)
        }
        .rotate-180 {
          transform: rotate(180deg)
        }
        .rotate-270 {
          transform: rotate(270deg)
        }
      `

      expect(result.css).toMatchCss(expected)
    })
})