TailwindCSS 3.0 升级覆盖按钮样式

Question

问题：

按钮 class 被默认顺风基础 class 覆盖。不确定为什么我在元素上的 classes 没有被应用。

问题：

如何正确应用我的样式？

截图：

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

/* 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

如果我还缺少其他需要的文件，请告诉我！

Answer 1

没有看到你的 index.tsx 长什么样我只能猜测，但这是导致我们的应用程序出现此问题的原因：

在我们的 index.tsx 中，我们在 index.css 之后使用 import App from 'src/App 导入我们的组件树。因此 css 以错误的顺序加载到站点中。首先从组件导入（css 模块，正常 css 导入），顺风最后。

转到您的入口文件（可能是 index.tsx）并尝试将您的 import 'index.scss' 行移动到导入根组件上方。

例如这样

/* index.tsx */
import React from 'react';
import ReactDOM from 'react-dom';

import './index.css'; // this file holds all tailwind styles
import { App } from 'src/App';
// ...

在此处阅读更多内容：

https://github.com/tailwindlabs/tailwindcss/discussions/7304#discussioncomment-2256226

TailwindCSS 3.0 升级覆盖按钮样式

TailwindCSS 3.0 Upgrade overriding button styles

css

webpack

tailwind-css

dart-sass

问题：

问题：

截图：