问题：

Button类被默认的tailwind基类覆盖。不确定为什么元素上的类没有被应用。

问题：

如何正确应用我的样式？

截图：

如您所见，.documentCategory__行上背景色被在@tailwind/base中定义index.scss上按钮[type=button]覆盖

/* index.scss */
:root {
  --color-primary: #00a3e0;
  --color-secondary: #470a68;
  --color-success: #87d500;
  --color-accent: #e87722;

  /* Dark themes below */
  --color-dark-primary: rgba(31, 41, 55, 1);
  --dark-text: rgba(187, 193, 198, 1);
}

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

我不确定这是否与我切换到dart-scss有关，因此这里是我的Webpack配置，以防我遗漏了什么

import path from 'path'
import { Configuration as WebpackConfiguration, HotModuleReplacementPlugin } from 'webpack'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
import ESLintPlugin from 'eslint-webpack-plugin'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'

const CopyPlugin = require('copy-webpack-plugin');

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  mode: 'development',
  devServer: {
    static: path.join(__dirname, 'build'),
    historyApiFallback: true,
    port: 4000,
    open: true,
    hot: true,
  },
  output: {
    publicPath: '/',
  },
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-typescript',
            ],
          },
        },
      },
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'postcss-loader', // postcss loader needed for tailwindcss
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [tailwindcss, autoprefixer],
              },
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: 'file-loader',
        options: {
          outputPath: '../fonts',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
    new HotModuleReplacementPlugin(),
    new CopyPlugin({
      patterns: [
      // relative path is from src
        { from: 'public/images', to: 'images' },
      ],
    }),
    // Add type checking on dev run
    new ForkTsCheckerWebpackPlugin({
      async: false,
    }),

    // Add lint checking on dev run
    new ESLintPlugin({
      extensions: ['js', 'jsx', 'ts', 'tsx'],
    }),
  ],
  devtool: 'inline-source-map',
};

export default config

如果有其他文件，我是需要让我知道！