TailwindCSS 3.0 升级覆盖按钮样式

Question

问题：

按钮类被默认的 tailwind 基类覆盖。不知道为什么我的元素类没有被应用。

问题：

如何正确应用我的样式？

截屏：

正如您所看到的，.documentCategory__row 上的背景颜色被 @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

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

Answer 1

在没有看到你的index.tsx样子的情况下，我只能猜测，但以下是导致我们的应用程序出现此问题的原因：

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

转到您的入口文件（可能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