---
title: >
  Testable Tailwind CSS plugins
pubDate: 2023-01-04
permalink: >-
  archive/2023/01/04/testable-tailwind-css-plugins
tags:
  - tailwind-css
---

A great thing about [Tailwind CSS plugins]({{site.url}}/archive/2023/01/03/tailwind-css-extensibility-is-one-of-its-best-features) being written in JavaScript is that they can be tested using tools like Jest.

Here's an example from https://github.com/opdavies/tailwindcss-plugin-jest-example (it may need updating to work with the latest Tailwind versions or to use the latest best practices):

```javascript
function run(options = {}) {
  return postcss(
    tailwindcss({
      corePlugins: false,
      plugins: [plugin(options)]
    })
  )
  .process('@tailwind utilities;', {
    from: undefined
  })
}

expect.extend({
  toMatchCss: cssMatcher
})

test('it generates the correct classes with no variants', () => {
  const output = `
    .test {
      display: block
    }
  `

  run().then(result => {
    expect(result.css).toMatchCss(output)
  })
})

test('it generates the correct classes with variants', () => {
  const output = `
    .test {
      display: block
    }
    .hover\\:test:hover {
      display: block
    }
    .focus\\:test:focus {
      display: block
    }
  `

  run({ variants: ['hover', 'focus'] }).then(result => {
    expect(result.css).toMatchCss(output)
  })
});
```

Within the test, Tailwind can be run using PostCSS and generates styles based on a provided configuration, which is then checked against some expected output. If the generated styles match what was expected, the tests pass and the plugin is working as expected.