Custom colors in my tailwind.config.js file not showing on page

[spiercy16]

I just installed Tailwind in VS Code (noob to Tailwind) and am having a problem where the color I configured in tailwind.config.js does not work on my page. When I add the Tailwind code to my class in VS Code I'm able to see the value (bg-bistre) with the actual color tile displayed next to, so it's somehow referencing the page, but when I view the page in the browser the color does not work. If I change the value to a default Tailwind value however it does work (like bg-black-500).

Here is my code, though it's almost identical to the code found in the official tailwind tutorial here :

module.exports = {
purge: [],
theme: {
extend: {
colors: {
'bistre': '#231006',
'dutch-white': '#EFE4C5',
'kombu-green': '#243010',
'polished-pine': '#539987',
'midnight-green': '#1A535C',
},
}
},
variants: {},
plugins: [],
}

One discrepancy I noticed is that in the Tailwind tutorial video they used single quotes around the color noames and values, where as in their documentation on configuring a theme they omitted them (confusing for new users, especially if they're tyring to troubleshoot issues to have conflicting code). I used them because I get an error message in VS Code otherwise.

Thanks in advance for any help. I've already wasted about an hour trying to troubleshoot it already.

[estevanmaito]

Did you recompile your CSS after you've made these changes?

Something like this: https://tailwindcss.com/docs/installation#using-tailwind-cli

[shiftgeist]

@Ekeu I think what he means is a minimal reproduction (GitHub repo) that shows what environment the tailwind config is being used in.

[Ekeu]

Hey I just want to thank you for your feedback.

I was actually able to make it run. I'm not pretty sure if that is the reason but my first tailwind.config.js file I created it myself by creating a new file but later after several attempts I deleted it and went back to tailwind's doc and used the command they provided which generated a new tailwind.config.js and it worked.

So I concluded saying I had to instead use the command to create my config file rather than creating it myself.

[mabitten]

@Ekeu Do you can to share with us that comand?

[Helpico]

npx tailwind init

[simonswiss]

Ok I know this thread is 1 year old and likely not really helpful to respond now, but... reading this again today I saw you had module.export = in your code shared here from the manual config file you made:

And this should be module.exports with an s - that was possibly the issue 👍

[homocodian]

Just move the colors property under theme property, remove from extend property.
Then you will only see your defined colors by tailwind css intellisense.

[Azalea9X]

This works, though, I noticed when I compile the tailwind css it adds in an equation that seems to be dividing the RGB by var(--text-opacity), and, removing that seemed to fix the issue. I'm not entirely sure why it was an issue in the first place.

[FeivelRiodan]

sorry i'm too late but the color exists on the intellisense but no matter what i do, it won't appear. i know that this isn't a browser problem because i can definitely use the color with traditional css

[homocodian]

sorry i'm too late but the color exists on the intellisense but no matter what i do, it won't appear. i know that this isn't a browser problem because i can definitely use the color with traditional css

Check your tailwind config

[homocodian]

Can you send me the screenshot of your tailwind.config file.

…

On Mon, Dec 20, 2021, 10:26 PM nilavrusty ***@***.***> wrote: Hi @Ashish-singh-dev <https://github.com/Ashish-singh-dev> , It seems all default color pallet isn't working, for me bg-zinc-900 works but bg-zinc-200 doesn't, I was trying out remix run. Any idea how to fix it — Reply to this email directly, view it on GitHub <#2016 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASEJJ6ZE6IY6CW5BS4Q6GP3UR5N2JANCNFSM4OYALZ5Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[Jorge-Ortiz-M]

Am I doing it as it should?

[homocodian]

You should use like "bg-backcolor" for background color and for text color use "text-backcolor", that should work

[Azalea9X]

I think so? That is what worked for me. I do not know about everything else. Regards, Jacob Siegel

…

On Sat, Jun 25, 2022 at 12:55 PM Jorge Ortiz ***@***.***> wrote: Am I doing it as it should? [image: image] <https://user-images.githubusercontent.com/104739183/175783284-b56d1690-0f18-40c2-9e3a-c9397b44e57e.png> — Reply to this email directly, view it on GitHub <#2016 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMWY6EL4PUCIJL6NYPVNRPTVQ42YVANCNFSM4OYALZ5Q> . You are receiving this because you commented.Message ID: ***@***.*** com>

[darius00klokj]

Hey guys,

Not sure why this does not work for me, it also does not work on the Tailwind playground.

im following these docs: https://tailwindcss.com/docs/configuration

Can someone point out the obvious mistake im making

Thanks!

[walnut937]

wait you have configured the colors inside the extend {} , but it is shown in tutorial to include it in theme

[raycris]

For me work when I put backgroundColor then my custom colors

BEFORE

AFTER

[raycris]

Also you need to build again you tailwind file. Well at least that works for me.

[madmenmarketingindia]

Just use in the extended. It is also written in documentation ==>
https://tailwindcss.com/docs/customizing-colors#adding-additional-colors

[homocodian]

Try puttings colors under theme instead of extend

[taajason]

I faced this issue when using tailwind.config.ts in nextjs, it worked when I changed tailwind.config.ts to tailwind.config.js, I found the reason was that the ts file was not compiled automatically js file, hope it helps.