How to customize the TW-Elements dropdown in Tailwind 4

[zikou058]

Hi everyone,

I am trying to customize the TW-Elements dropdown colors in Tailwind CSS v4.
I tried overriding the default styles in my tailwind.config.js, but it doesn’t seem to work.

Does anyone have a working example or workaround for this?

Thanks

[juujisai]

Hi, have you tried importing the tailwind.config.js? According to the tailwind upgrade guide, config files are no longer detected automatically in v4.

https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file

Theme customizations for tailwinds new versions
https://tailwindcss.com/docs/theme

Our v3 docs theme customization
https://tw-elements.com/docs/standard/getting-started/theming/

[zikou058]

You can look my project_test on vs code

[juujisai]

Updating in the tailwind.config.js seem to work for me

module.exports = {
  content: ["./src/**/*.{html,js}", "./node_modules/tw-elements/js/**/*.js"],
  plugins: [require("tw-elements/plugin.cjs")],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "#54B4D3",
          50: "#F3FAFC",
          100: "#E7F4F9",
          200: "#CEE9F2",
          300: "#B6DFEC",
          400: "#9ED4E6",
          500: "#79C4DC",
          600: "#34A4CA",
          700: "#2B89A8",
          800: "#236D86",
          900: "#1A5265",
          "accent-300": "#50abc8",
        },
      },
    },
  },
  darkMode: "class",
};

Few times I had to restart the dev to make the changes apply but it did update the primary color for me.

In style.css I on my fresh installed app from here just have

@import "tailwindcss";
@config "../tailwind.config.js";

[zikou058]

I tried using the code below for customizing Tailwind and TW Elements, but it doesn’t seem to work — not only the colors, but some other Tailwind classes aren’t working either. Here’s my current

tailwind.config.js file:

      module.exports = {
          content: ["./src/**/*.{html,js}", "./node_modules/tw-elements/js/**/*.js"],
          plugins: [require("tw-elements/plugin.cjs")],
            theme: {
              extend: {
                colors: {
                  primary: {
                      DEFAULT: "#54B4D3",
                      50: "#F3FAFC",
                      100: "#E7F4F9",
                      200: "#CEE9F2",
                      300: "#B6DFEC",
                      400: "#9ED4E6",
                      500: "#79C4DC",
                      600: "#34A4CA",
                      700: "#2B89A8",
                      800: "#236D86",
                      900: "#1A5265",
                      "accent-300": "#50abc8",
                  },
                },
              },
            },
          darkMode: "class",
      };

I already restarted the dev server, but the changes still don’t apply.
Do you know what could be wrong? Maybe something changed in Tailwind v4?

[zikou058]

Can I push this folder to my GitHub profile so you can check the error

[iprzybysz]

I also created a clean app following this tutorial: https://tailwindcss.com/docs/installation/using-vite. Afterward, I installed the TWE package, and everything works correctly on my end.

Try setting up a fresh project from scratch using that tutorial to see if the issue persists. This would help confirm if the problem is in your existing setup. Please also make sure that the styles from the TWE package are not being overridden by something else.