We've moved discussions to 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?
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.


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
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?
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.


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
Notifications
You’re not receiving notifications from this thread.
© 2022 Jumpstart Pro by GoRails, LLC