title: Rails (6) Tailwind CSS Color Palette
body: <p>Im working on my first application in Rails w/ Tailwind and can't get any of the colors outside of &quot;typical&quot; (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: <a href="https://tailwindcss.com/docs/installation/using-postcss" rel="nofollow noreferrer">https://tailwindcss.com/docs/installation/using-postcss</a>, and I have tailwind working except for any of the additional colors, or even extended colors/palettes I tried to create myself. Additionally, the &quot;typical&quot; 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??</p>
  <p>Heres a link to the repo: <a href="https://github.com/horaciovelvetine/horaciovelvetine" rel="nofollow noreferrer">https://github.com/horaciovelvetine/horaciovelvetine</a></p>
  <p>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!</p>
  <p>With my low reputation I can't post screenshots here but you can find those here: <a href="https://github.com/tailwindlabs/tailwindcss/discussions/7697" rel="nofollow noreferrer">https://github.com/tailwindlabs/tailwindcss/discussions/7697</a></p>
  <p>Edit:
  Tailwind Config</p>
  <pre><code>const colors = require('tailwindcss/colors')
  
  module.exports = {
    mode: 'jit',
    purge: {
      enabled: [&quot;production&quot;, &quot;staging&quot;].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: () =&gt; ({
        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'),
    ],
  }
  </code></pre>
  <p>Package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;horaciovelvetine&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@babel/preset-react&quot;: &quot;^7.16.0&quot;,
      &quot;@headlessui/react&quot;: &quot;^1.4.2&quot;,
      &quot;@heroicons/react&quot;: &quot;^1.0.5&quot;,
      &quot;@rails/actioncable&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/activestorage&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/ujs&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/webpacker&quot;: &quot;5.4.3&quot;,
      &quot;@tailwindcss/aspect-ratio&quot;: &quot;^0.4.0&quot;,
      &quot;@tailwindcss/forms&quot;: &quot;^0.4.0&quot;,
      &quot;@tailwindcss/line-clamp&quot;: &quot;^0.3.0&quot;,
      &quot;@tailwindcss/typography&quot;: &quot;^0.5.0&quot;,
      &quot;acorn&quot;: &quot;^8.7.0&quot;,
      &quot;autoprefixer&quot;: &quot;^10.4.1&quot;,
      &quot;axios&quot;: &quot;^0.26.0&quot;,
      &quot;babel-plugin-transform-react-remove-prop-types&quot;: &quot;^0.4.24&quot;,
      &quot;postcss&quot;: &quot;^8.4.5&quot;,
      &quot;postcss-import&quot;: &quot;^14.0.2&quot;,
      &quot;prop-types&quot;: &quot;^15.7.2&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-query&quot;: &quot;^3.34.15&quot;,
      &quot;react-redux&quot;: &quot;^7.2.6&quot;,
      &quot;react-router-dom&quot;: &quot;^6.1.1&quot;,
      &quot;redux&quot;: &quot;^4.1.2&quot;,
      &quot;redux-thunk&quot;: &quot;^2.4.1&quot;,
      &quot;tailwindcss&quot;: &quot;^3.0.2&quot;,
      &quot;turbolinks&quot;: &quot;^5.2.0&quot;,
      &quot;webpack&quot;: &quot;^4.46.0&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.12&quot;
    },
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.16.7&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3&quot;
    }
  }
  </code></pre>
  <p>&quot;Typical color&quot; component with working opacity</p>
  <pre><code>export default function Logo() {
    return (
      &lt;div className='absolute inset-y-0 left-0 md:static md:flex-shrink-0'&gt;
        &lt;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'&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>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.</p>
  <p>Post CSS Config</p>
  <pre><code>module.exports = {
    plugins: [
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer'),
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3
      })
    ]
  }
  </code></pre>
  <p>application.scss with tailwind imports</p>
  <pre><code>@import &quot;tailwindcss/base&quot;;
  
  @import &quot;tailwindcss/components&quot;;
  
  @import &quot;tailwindcss/utilities&quot;;
  </code></pre>
  <pre><code>
  </code></pre>