tailwindの@applyが適用されない

コンソールで開くと以下です。

関係するファイルの状態は以下です。
postcss.config.js

Javascript
1module.exports = {
2  plugins: [
3    require('postcss-import'),
4    require('postcss-flexbugs-fixes'),
5    require("tailwindcss"),
6    require('postcss-preset-env')({
7      autoprefixer: {
8        flexbox: 'no-2009'
9      },
10      stage: 3
11    })
12  ]
13}
14

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.field_with_errors input,
.field_with_errors select {
  border-color: red;
}
.pagy-nav, 
.pagy-nav-js,
.pagy-combo-nav-js {
  @apply inline-flex shadow-md;
}
.pagy-nav.pagination, 
.pagy-nav-js.pagination,
.pagy-combo-nav-js.pagination {
  @apply border border-gray-600 rounded-sm;
}
.pagy-nav .page,
.pagy-nav-js .page,
.pagy-combo-nav-js .page,
.pagy-combo-nav-js .pagy-combo-input {
  @apply text-gray-700 border-r border-gray-600 px-3 py-2 text-sm leading-tight font-medium;
}
.pagy-nav .page:hover,
.pagy-nav-js .page:hover {
  @apply text-gray-900;
}
.pagy-nav .disabled,
.pagy-nav-js .disabled,
.pagy-combo-nav-js .disabled {
  @apply cursor-not-allowed;
}
.pagy-nav .active,
.pagy-nav-js .active {
  @apply text-blue-500;
}
.pagy-nav .prev,
.pagy-nav-js .prev,
.pagy-combo-nav-js .prev {
  @apply text-gray-900;
}
.pagy-nav .next,
 .pagy-nav-js .next,
 .pagy-combo-nav-js .next {
  @apply text-gray-900 border-r border-transparent;
}

html(erb)