Importing tw-elements-react.min.css overwrites theme.extend.colors

[leebenson]

Describe the bug

After following the setup instructions for a NextJS project, including this line:

import "tw-elements-react/dist/css/tw-elements-react.min.css";

... seems to overwrite custom color classes in tailwind.config.css set in the theme.extend.colors section.

To Reproduce

Using this tailwind.config.ts:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/tw-elements-react/dist/js/**/*.js",
  ],
  theme: {
    extend: {
      colors: {
        honeydew: "#f1faee",
      }
    },
  },
  corePlugins: {
    preflight: false,
  },
  plugins: [require("tw-elements-react/dist/plugin.cjs")],
};

export default config;

... And then use the color in any component:

<div className="bg-honeydew">This should be Honeydew but it isn't!</div>

Expected behavior

The resulting CSS should contain the extended theme colour class names.

Actual behavior

The class names don't exist in the resulting CSS and therefore styles aren't applied.

[iprzybysz]

Hi @leebenson, just don't import our CSS file, because you have custom Tailwind config for your project. However, if these styles are needed for you, place them before your custom Tailwind styles will be added.