We've moved discussions to Discord

Join Discord

Tailwind custom color not working

Benjamin Houy •
Hi,

I'm pretty new to Tailwind and to programming in general so forgive me if this is a stupid question but I'm having trouble adding custom colors to Tailwind. 

I added the "venice-blue" color in tailwind.config.js but nothing happens when I use a class like "bg-venice-blue."
theme: {
    // Extend (add to) the default theme in the `extend` key
    extend: {
      // Create your own at: https://javisperez.github.io/tailwindcolorshades
      colors: {
        'venice-blue': '#30547E',
        //orange: colors.orange,
        primary: colors.blue,
        secondary: colors.emerald,
        tertiary: colors.gray,
        danger: colors.red,
        "code-400": "#fefcf9",
        "code-600": "#3c455b",
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
I tried restarting the server and running npx tailwindcss -o tailwind.css but it made no difference.

Any idea what I'm missing?

Thanks
Brian Carpenter •
Same issue.  Adding myself to the thread for updates.
Chris Oliver •
You've also saved an HTML file with the class in it? It might just be getting purged.
Benjamin Houy •
Ah yes, I think you are right. It's working now :). Thanks
Dan Tappin •
I am having a similar issue.  The issue is that when I have custom helpers to make badges etc. the other colors won't work.

Is this the work around - to simply add a static file that calls the various colors (bg, text, etc) that you always want available and not purged?  Can you just have them all available?  Also where is that config file stored?  Just in /config?
Evelyn S •
Hey Benjamin, could you detail the steps that you took to solve the custom color issue? running into the same problem just now. Many thanks
Benjamin Houy •
Hi Evelyn,

I don't rememeber the exact steps but I do remember that there was nothing wrong with my Tailwind config. I believe running rails assets:precompile is what fixed it but I'm not 100% sure.


Evelyn S •
Got it, thanks. 
Andrew Mutz •
Hi, I'm just starting out with Jumpstart and trying to use the colors that are in the Tailwind CSS docs.  They don't work.  For example, applying text-red-500 works, but text-yellow-500 does not.

What is the workaround here?
Andrew Mutz •
Okay, I solved my own issue (from reading a different thread) with 

rake assets:clean && rake assets:clobber
My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.