Css – How to override imported styling with tailwind

I have a react project where I use tailwind. I have an index.css file that I am importing at the root of my project. The index.css file looks like this:

@import "tailwindcss/base";
@import "@navikt/ds-css";
@import "@navikt/ui-common/styles/index.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "custom.css";

I would like to override classes that I import with the styles in custom.css. The custom.css looks like this:

.navds-tabs__tablist-wrapper {
    width: max-content;
}
.navds-checkbox__label {
    align-items: center;
}
.navds-checkbox__icon {
    max-height: 0.5rem;
}
.navds-date__field-input {
    width: 144px;
}

My tailwind.config.cjs file looks like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Also, postcss.config.cjs looks like this:

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

I use webpack for building a project and this is the config I use:

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const deps = require("./package.json").dependencies;
const { EsbuildPlugin } = require("esbuild-loader");

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "[name].[fullhash].js",
        path: path.resolve(__dirname, "./dist"),
    },
    experiments: {
        topLevelAwait: true,
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js", ".jsx"],
    },
    optimization: {
        minimizer: [
            new EsbuildPlugin({
                target: "ESNext",
                minify: false,
                format: "esm",
                sourcemap: true,
                minifyIdentifiers: false,
                minifyWhitespace: true,
                minifySyntax: true,
                globalName: "case_ui",
                css: true,
                keepNames: true,
            }),
        ],
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
            },
            {
                test: /.([jt]sx?)?$/,
                exclude: /node_modules/,
                loader: "esbuild-loader",
                options: {
                    target: "ESNext",
                },
            },
            {
                test: /.svg$/,
                loader: "svg-inline-loader",
            },
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            process: "process/browser",
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].[fullhash].css",
            ignoreOrder: true,
        }),
        new ModuleFederationPlugin({
            name: "case_ui",
            filename: "remoteEntry.js",
            exposes: {
                "./Prehandling": "./src/app.tsx",
                "./Case": "./src/app.tsx",
            },
            shared: {
                react: { singleton: true, requiredVersion: deps.react },
                "react-dom": { singleton: true, requiredVersion: deps.react },
            },
        }),
    ],
};

I wonder why don’t classes that I have in custom.css override classes that I import in index.css?
How can I fix this?