Tailwind background colors not working after installing Shadcn

I am making a Remix JS React app and using Tailwind for theming. Initially Tailwind served me perfectly until I tried to use a <datalist> in a form and couldn't get it to remove that ugly down arrow in the browser render of the element. I then installed @Shadcn on recommendation and refactored my screen to use its inbuilt <Select> components.

The problem is that when I try to run the app my background colors (className="bg-<color>") are no longer applying. second and most concerningly, the custom class component I made to make all the inputs of the form uniform is causing the build to fail with the error:

[plugin: postcss-plugin] ~\appdir\app\tailwind.css:7:9: The `bg-search-panel-element-color` class does not exist. If `bg-search-panel-element-color` is a custom class, make sure it is defined within a `@layer` directive.

search-panel-element-color is a cutom color I defined in the tailwindconfig.ts file under theme.extend.colors. the bg- prefix is for Tailwind to know that I am setting a background color. The code was compiling before and the only change was that I installed shadcn. I was reliably informed that shadcn builds ontop of Tailwind so I don't know why it is causing a valid Tailwind styling to fail.

So far I have tried setting tailwind.cssVariables setting to false in components.json but it still fails to build unless I remove my background color from the custom Tailwind class.

here is my code:

components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "gray",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

tailwind.config.ts:

import type { Config } from 'tailwindcss'

export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors:{
        'search-panel-element' : '#EDEDED',
      }
    },
  },
  plugins: [],
} satisfies Config

the custom component in tailwind.css that's causing the failed build:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{
    .search-panel-input{
        @apply mx-1 pl-1 w-32 bg-search-panel-element rounded-md appearance-none;
    }
}

when I remove the background color and the custom components looks like this:

@layer components{
    .search-panel-input{
        @apply mx-1 pl-1 w-32 rounded-md appearance-none;
}

the code compiles again.

it seems as though shadcn has somehow made the bg-<color> convention invalid cos the background does not set in elements where the class is applied inline. Any help you can render will be greatly appreciated.

Turns out when Shadcn was installing it created a tailwind.config.js file that was conflicting with my tailwind.config.ts file and it set the app config to point at it.

It got resolved by setting tailwind.config to tailwind.config.ts in components.json and adding all the extra config inside tailwind.config.js to tailwind.config.ts and deleting tailwind.config.js.

Not sure how I initially missed that mistake but I had tunnelvision i guess.

correct components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "gray",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}