TailwindCSS 3.0 Upgrade overriding button styles

Question

Problem:

Button class being overridden by default tailwind base classes. Not sure why my classes on the element aren't being applied.

Question:

How can I get my styles to apply properly?

Screenshot:

As you can see background color on .documentCategory__row is being overridden by button, [type=button] on index.scss which is being defined within @tailwind/base.

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

I'm not sure if this has to do with me switching to dart-scss so here is my webpack configuration in case I am missing something

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

If there are other files I am missing that are needed let me know!

Currently I just added !important to my class and that gets me a work around for now... — William Zink, Dec 17 '21 at 14:20
I am running into the same issue, but I'm not using dart-scss. — Ed Lucas, Jan 10 '22 at 17:04
Similar issue reported in Tailwind's GitHub repo: https://github.com/tailwindlabs/tailwindcss/discussions/7049 — Ed Lucas, Jan 13 '22 at 21:33

score 5 · Accepted Answer · answered Feb 26 '22 at 12:46

without seeing what your index.tsx looks like I can only make a guess, but here's what caused this issue in our app:

in our index.tsx we were importing index.css after importing our component tree with import App from 'src/App. thus the css was loaded into the site in the wrong order. imports from components first (css modules, normal css imports), tailwind last.

go to your entry file (probably index.tsx) and try moving your import 'index.scss' line above importing the root component.

like this for example

/* 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';
// ...

TailwindCSS 3.0 Upgrade overriding button styles

Problem:

Question:

Screenshot:

4 Answers4