oliverdavies.uk/content/node.79fdad19-834d-463e-89f6-059c0865a034.yml

uuid:
  - value: 79fdad19-834d-463e-89f6-059c0865a034
langcode:
  - value: en
type:
  - target_id: daily_email
    target_type: node_type
    target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
revision_timestamp:
  - value: '2025-05-11T09:00:48+00:00'
revision_uid:
  - target_type: user
    target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
revision_log: {  }
status:
  - value: true
uid:
  - target_type: user
    target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
title:
  - value: |
      Testable Tailwind CSS plugins
created:
  - value: '2023-01-04T00:00:00+00:00'
changed:
  - value: '2025-05-11T09:00:48+00:00'
promote:
  - value: false
sticky:
  - value: false
default_langcode:
  - value: true
revision_translation_affected:
  - value: true
path:
  - alias: /daily/2023/01/04/testable-tailwind-css-plugins
    langcode: en
body:
  - value: |
      <p>A great thing about <a href="/daily/2023/01/03/tailwind-css-extensibility-is-one-of-its-best-features">Tailwind CSS plugins</a> being written in JavaScript is that they can be tested using tools like Jest.</p>

      <p>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):</p>

      <pre><code class="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', () =&gt; {
        const output = `
          .test {
            display: block
          }
        `

        run().then(result =&gt; {
          expect(result.css).toMatchCss(output)
        })
      })

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

        run({ variants: ['hover', 'focus'] }).then(result =&gt; {
          expect(result.css).toMatchCss(output)
        })
      });
      </code></pre>

      <p>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.</p>

              
    format: full_html
    processed: |
      <p>A great thing about <a href="/daily/2023/01/03/tailwind-css-extensibility-is-one-of-its-best-features">Tailwind CSS plugins</a> being written in JavaScript is that they can be tested using tools like Jest.</p>

      <p>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):</p>

      <pre><code class="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', () =&gt; {
        const output = `
          .test {
            display: block
          }
        `

        run().then(result =&gt; {
          expect(result.css).toMatchCss(output)
        })
      })

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

        run({ variants: ['hover', 'focus'] }).then(result =&gt; {
          expect(result.css).toMatchCss(output)
        })
      });
      </code></pre>

      <p>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.</p>

              
    summary: null
field_daily_email_cta: {  }