Rails (6) Tailwind CSS Color Palette

Question

Im working on my first application in Rails w/ Tailwind and can't get any of the colors outside of "typical" (red, green, yellow... etc all working while slate, amber, neutral... are not). Apologies if this isn't the right place! I've followed the setup info here: https://tailwindcss.com/docs/installation/using-postcss, and I have tailwind working except for any of the additional colors, or even extended colors/palettes I tried to create myself. Additionally, the "typical" colors that work also work with the opacity/hue controls (i.e. 'bg-green-600' works as expected), but attempts to circle around this by directly using arbitrary color assignment weren't successful. For some reason when it fails to find a color it just defaults to white??

Heres a link to the repo: https://github.com/horaciovelvetine/horaciovelvetine

It's been a month or two since I was working on this, and I just roped a much more capable dev friend in to help and still no solution. Not even sure if I have really narrowed it down to tailwind for sure causing the issue! I'm really hoping someone can point me in a different google direction, or catch a detail I must be missing!

With my low reputation I can't post screenshots here but you can find those here: https://github.com/tailwindlabs/tailwindcss/discussions/7697

Edit: Tailwind Config

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  purge: {
    enabled: ["production", "staging"].includes(process.env.NODE_ENV),
    content: [
      './app/views/**/*.html.erb',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },
  presets: [],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {
      colors: {
        'ui': {
          100: '#5B626A', // primary light gray
          200: '#69666B', // secondary light gray
          400: '#545055', // text input bg gray
          600: '#464348', // menu bg 
          800: '#221D28', // main bg
        },
        'accent': {
          50: '#FFFFFF', //white 
          100: '#0C84FF', //primary blue
          200: '#3F8CE6', //obj highlighted blue
          400: '#FEBC2E', //minimize yellow
          600: '#FF9F0B', //flag orange
          800: '#FF443A', //primary red
        },
        'fonts': {
          50: '#F0EFF0', //primary font
          100: '#C1BFC4', //secondary herader font
          200: '#858388', //secondary font
          400: '#7D7C80', //grayed out text
          600: '#727E87', //primary header font
          800: '#3E9AFC', //link blue
        },
      },
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    colors: () => ({
      inherit: colors.inherit,
      current: colors.current,
      transparent: colors.transparent,
      black: colors.black,
      white: colors.white,
      slate: colors.slate,
      gray: colors.gray,
      zinc: colors.zinc,
      neutral: colors.neutral,
      stone: colors.stone,
      red: colors.red,
      orange: colors.orange,
      amber: colors.amber,
      yellow: colors.yellow,
      lime: colors.lime,
      green: colors.green,
      emerald: colors.emerald,
      teal: colors.teal,
      cyan: colors.cyan,
      sky: colors.sky,
      blue: colors.blue,
      indigo: colors.indigo,
      violet: colors.violet,
      purple: colors.purple,
      fuchsia: colors.fuchsia,
      pink: colors.pink,
      rose: colors.rose,
    }),
    columns: {
      auto: 'auto',
      1: '1',
      2: '2',
      3: '3',
      4: '4',
      5: '5',
      6: '6',
      7: '7',
      8: '8',
      9: '9',
      10: '10',
      11: '11',
      12: '12',
      '3xs': '16rem',
      '2xs': '18rem',
      xs: '20rem',
      sm: '24rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      '2xl': '42rem',
      '3xl': '48rem',
      '4xl': '56rem',
      '5xl': '64rem',
      '6xl': '72rem',
      '7xl': '80rem',
    },... continues
    zIndex: {
      auto: 'auto',
      0: '0',
      10: '10',
      20: '20',
      30: '30',
      40: '40',
      50: '50',
    }, ...continues
  },...
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'empty',
    'read-only',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'disabled',
  ],
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
  ],
}

Package.json

{
  "name": "horaciovelvetine",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.16.0",
    "@headlessui/react": "^1.4.2",
    "@heroicons/react": "^1.0.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/line-clamp": "^0.3.0",
    "@tailwindcss/typography": "^0.5.0",
    "acorn": "^8.7.0",
    "autoprefixer": "^10.4.1",
    "axios": "^0.26.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "postcss": "^8.4.5",
    "postcss-import": "^14.0.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.34.15",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.1.1",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "tailwindcss": "^3.0.2",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "webpack-dev-server": "^3"
  }
}

"Typical color" component with working opacity

export default function Logo() {
  return (
    <div className='absolute inset-y-0 left-0 md:static md:flex-shrink-0'>
      <a
        href='/'
        className='flex items-center justify-center h-16 w-16 bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-600 md:w-20'>
      </a>
    </div>
  )
}

the change for a palette component with the bg color not working would be replacing indigo with something like slate which is only defined on the tailwind colors.

Post CSS Config

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

application.scss with tailwind imports

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";