I'm not figuring out how to add custom colors

[Ashlc]

So basically, I've followed the steps show in the documentation, but I've had no luck getting it to use my colors. I've imported both animate.min and bladewind-ui css. The helper is also imported before the closing of the body tag. Tailwind works as expected in my project with the configurations below. I ran php artisan vendor:publish --tag=bladewind-public --force as well.

This is my project's tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./vendor/mkocansey/bladewind/resources/views/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary)',
        blue: 'var(--primary)',
        secondary: 'var(--secondary)',
        dark: 'var(--dark)',
        green: '#2ecc71',
        'hover': {
          'primary': 'var(--primary-hover)',
        },
      },
      textColor: {
      'on': {
        'primary': 'var(--text-on-primary)',
      },
      'primary': 'var(--primary)',
      'default': 'var(--text)',
      },
    },
  },
  plugins: [],
}

[mkocansey]

Hey @Ashlc ,

Lets use one of the Tailwind colour defaults just to be sure the issue is not with the dynamic variables.
Can you replace primary: 'var(--primary)', with primary: colors.blue,.

You will probably need to add this at the top of the tailwind.config.js file as well in this case.

import colors from 'tailwindcss/colors'.

Your file will end up looking something like below.

import colors from 'tailwindcss/colors'
export default {
  content: [
    "./resources/**/*.blade.php",
    "./vendor/mkocansey/bladewind/resources/views/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        blue: colors.blue,
        secondary: colors.gray,
        dark: colors.gray,
        green: '#2ecc71',
        'hover': {
          'primary': 'var(--primary-hover)',
        },
      },
      textColor: {
      'on': {
        'primary': 'var(--text-on-primary)',
      },
      'primary': colors.blue,
      'default': 'var(--text)',
      },
    },
  },
  plugins: [],
}

[Ashlc]

Well, I've resorted to not using the library as Bladewind's CSS ended up messing a bit with my layout (it kinda forces Tailwind to interpret the 'sm' media query? I'm not sure how to properly explain this).

I did try to use Tailwind's colors like you recommended but it also didn't work (stays transparent, only text, though the outline shows up on click). I'd be glad to help you with any further questions before I uninstall the library, but I'm afraid I won't be able to invest some time on fixing the issue due to my tight schedule.

[mkocansey]

Ooops I'm 2 days late. Would have been great to see how your layout looked with the Bladewind CSS and how it looked without it, to understand how it affected the layout. That will help debug things on my end but I guess you've uninstalled the library now? Thanks for at least giving it a try.