I cannot change the theme's default primary color

[cheulong]

I try to use Tailwind Elements with nextjs. I cannot overwrite theme primary color.

Steps to reproduce the behavior:

1. setup like this https://tailwind-elements.com/docs/standard/integrations/next-integration/
2. change theme's primary color to a different color.
3. I still see the default color.

Expected behavior
The color in tailwind.config.ts must override the default primary color.

[juujisai]

You can change it inside the tailwind-config.js file. For example:

module.exports = {
...
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "#FF0000",
          50: "#F1F5FB",
          100: "#E3EBF7",
          200: "#C7D7F0",
          300: "#ABC2E8",
          400: "#8FAEE0",
          500: "#6590D5",
          600: "#3061AF",
          700: "#285192",
          800: "#204075",
          900: "#183058",
          "accent-100": "#d9e4f3",
          "accent-200": "#cedbee",
        },
      },
    },
  },
...
};

In this example, I've changed the default primary color to red resulting for example for the datepicker to have red header:

Don't forget to change the rest of values for the ones you like.

[memiljamel]

This doesn't work for colors in the ripple effect

<button class="..." type="button" data-te-ripple-init data-te-ripple-color="primary">Example</button>

[juujisai]

You are right. The ripple doesn't check the colors from tailwind.config.js / plugin.cjs at this moment. We'll try to do something with that.

[aguiagui5]

i can't change the primary color on nuxt project:

/** @type {import('tailwindcss').Config} /
module.exports = {
content: [
'./components/**/.{js,vue,ts}',
'./layouts//*.vue',
'./pages//.vue',
'./plugins/**/.{js,ts}',
'./nuxt.config.{js,ts}',
'./app.vue',
'./node_modules/tw-elements/dist/js/**/*.js',
],
theme: {
extend: {
colors: {
primary: '#ff8400'
}
}
},
darkMode: 'class',
plugins: [require('tw-elements/dist/plugin.cjs')],
}

<button
type="button"
class="mb-2 block w-full rounded bg-primary
...

The button is still blue and not orange

[juujisai]

If you are importing the css in App.vue - import "tw-elements/dist/css/tw-elements.min.css" then it may not work.

I removed the css import on my demo app and I think it still works as it should. The primary colors are changed and the styling is fine.

[aguiagui5]

It works but now my inputs looks like this:

[juujisai]

It wasn't there before? For me it doesn't show the borders. Did you add any other options / classes to those inputs? Does it happen on some specific window / browser width? Did you check if different browser show the same thing?

[aguiagui5]

Resolved. There was a conflict with unocss. Thank you for your help.