title: Can't figure out why my Tailwind borders aren't showing
body: <p>I am trying to apply a simple border to my elements. Granted it's been a while since I touched this project, it appears to build the CSS and output what it's meant to but I can't see the border in the browser.</p>
  <p>Am I missing something super obvious?</p>
  <p>Here we have the Tailwind config file</p>
  <pre><code>module.exports = {
      mode: 'jit',
      purge: ['./templates/**/*.twig', './js/**/*.{js,vue}'],
      corePlugins: {
          preflight: false
      },
      prefix: 'tw-',
      important: true,
      darkMode: false, // or 'media' or 'class'
      theme: {
          screens: {
              sm: '640px',
              md: '768px',
              lg: '1024px',
              xl: '1240px',
              '2xl': '1536px'
          },
          // prettier-ignore
  
          fontFamily: {
              sans: [
                  'Nunito',
                  '-apple-system',
                  'BlinkMacSystemFont',
                  'Avenir Next',
                  'Avenir',
                  'Segoe UI',
                  'Lucida Grande',
                  'Helvetica Neue',
                  'Helvetica',
                  'Fira Sans',
                  'Roboto',
                  'Noto',
                  'Droid Sans',
                  'Cantarell',
                  'Oxygen',
                  'Ubuntu',
                  'Franklin Gothic Medium',
                  'Century Gothic',
                  'Liberation Sans',
                  'Arial',
                  'sans-serif'
              ]
          },
          fontSize: {
              tiny: '.8125rem', // 13px
              xs: '.875rem', // 14px
              sm: '.9375rem', // 15px
              base: '1rem', // 16px
              lg: '1.125rem', // 18px
              xl: '1.25rem', // 20px
              '2xl': '2rem', // 32px
              '3xl': '2.75rem' // 44px
          },
          extend: {
              colors: {
                  primary: '#E76A52',
                  'primary-soft': '#FBF0EE'
              }
          }
      },
      variants: {
          extend: {}
      },
      plugins: [require('@tailwindcss/typography')]
  }
  </code></pre>
  <p>I'm declaring the Tailwind classes on the element by using <code>class=&quot;tw-border-primary tw-border-2&quot;</code> and Chrome's dev tools show</p>
  <pre><code>.tw-border-primary {
      --tw-border-opacity: 1 !important;
      border-color: rgba(231, 106, 82, var(--tw-border-opacity)) !important;
  }
  
  .tw-border-2 {
      border-width: 2px !important;
  }
  </code></pre>
  <p>I can't make sense of it. It's definitely not a cache thing as all browsers are the same.</p>