External CSS files leveraging @apply with Tailwind Forms Plugin

[t1mwillis]

We are using Tailwind along with the Tailwind forms plugin to reset the styles on form elements in our Create React App application.

// tailwind.config.js
module.exports = {
  ...
  plugins: [
    require( '@tailwindcss/forms' ),
  ]
}

Inside our base .css file which is in injected into the head of the react app, we have something that looks like the following:

// tailwind.css
@tailwind base;
@tailwind components;

@import "./components/select.css";

Where select.css includes css related to a <select> element. Some of this CSS is relatively complex and cannot be achieved with tailwind helpers, whereas other bits can such as @apply border and the like. See below.

// components/select.css
select {
  @apply border;
  @apply border-black-20;
  padding-bottom: 6px !important;
  padding-top: 21px !important;
  background-position: right 5px bottom 8px !important;

The issue I'm running into is that there seem to be some specificity issues related to the layer of these CSS files, where the Tailwind forms plugin actually gets applied after my select.css file, causing most of the @apply'd rules to get overwritten by the reset. The issue goes away if I simply apply the helper classes within the component itself,

// components/SelectField.tsx
<select
        className={ `
            border
            border-black-20
          ` }
      >

Am I using the plugin in a way that it wasn't meant to be designed? I could also likely add some classes to my component to overrule the specificity of the reset. Any feedback/opinions appreciated! Thanks!