# Colors in Gutenberg not working correctly

**URL:** https://discourse.roots.io/t/colors-in-gutenberg-not-working-correctly/26000
**Category:** sage
**Tags:** sage10
**Created:** 2023-09-20T13:46:07Z
**Posts:** 9

## Post 1 by @igorlopasovsky — 2023-09-20T13:46:07Z

Colors in Gutenberg don’t work correctly when we define them in Tailwind config with `<alpha-value>` (as described in their [documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables)):

```
primary: 'rgb(var(--color-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-secondary) / <alpha-value>)'
```

 ![image](https://discourse.roots.io/uploads/default/original/2X/5/5c97a78e18e1d183a7c893f7464aa08ab2a3cf7a.png)

When we remove `<alpha-value>` everything works fine.

Is there any workaround for this? We use `<alpha-value>` across the whole project.

Many thanks for help.

---

## Post 2 by @talss89 — 2023-09-20T20:51:18Z

Hi @igorlopasovsky,

Thanks for the post. I didn’t realise this was even a feature of Tailwind. :face_in_clouds:

So, it turns out [Bud supports this and will replace the `<alpha-value>` placeholder with ‘1’ ie. 100% opaque](https://github.com/roots/bud/blob/11b0dd8654af39148df37641590eedae07873d29/sources/%40roots/bud-tailwindcss-theme-json/src/tailwind/palette.ts#L36C1-L40C3). This feature was merged in June of this year, so make sure you’re running a recent version of Bud.

The reason why the colour swatches don’t appear to have any colour is because the CSS variables aren’t defined on the Gutenberg page. If you set a colour, then view the frontend, it’ll look fine.

To fix this, we need to include the CSS variables in the editor.

In Sage, there is an `editor` entrypoint set up for this purpose. We can include the CSS variables in `./resources/styles/editor.css` and the swatches will then have the correct colour, providing that the bundle is enqueued on `enqueue_block_editor_assets` - [like it is in Sage out of the box](https://github.com/roots/sage/blob/c0d3dd87f7c13ff201c6b9f7730c970dcbba3f08/app/setup.php#L25C1-L27C9).

Hopefully that solves your issue.

Tom

---

## Post 3 by @igorlopasovsky — 2023-09-21T08:46:20Z

Hi Tom, thank you very much for your help, I really appreciate it.

It makes perfect sense what you said. We added CSS variables to `editor.css` but unfortunately this is what I see in the DEV tools

 ![image](https://discourse.roots.io/uploads/default/original/2X/2/2b974ecba22b55934834a6995a3502030fcde995.png)

It looks like the `<alpha-value>` doesn’t compile to anything.

---

## Post 4 by @talss89 — 2023-09-21T09:11:47Z

That’s strange. For me on Bud 6.16.1, the values are compiled to 1.

What version of Bud are you running?

---

## Post 5 by @igorlopasovsky — 2023-09-21T09:37:30Z

These are my versions:

```
"@roots/bud": "6.12.2",
"@roots/bud-tailwindcss": "6.12.2",
"@roots/sage": "6.12.2",
```

---

## Post 6 by @talss89 — 2023-09-21T09:40:35Z

I think that might be the reason. Try upgrading all to `6.16.1`.

It looks like the fix for `<alpha-value>` came in Bud `6.14.3`

---

## Post 7 by @igorlopasovsky — 2023-09-21T10:05:11Z

You were right, all colors are working now. Thank you very much for your help :wink:

Maybe just one more thing. We use `.useTailwindColors()` in `bud` config which causes that only Tailwind colors are visible in Gutenberg. Is it somehow possible to show custom color picker as well? I didn’t find anything in the documentation.

Many thanks again.

---

## Post 8 by @talss89 — 2023-09-21T11:05:49Z

No problem. Yes, you can.

In `bud.config.js`, you can set the `settings.colors.custom` property for `theme.json` to `true`.

```
app.wpjson.settings((theme) => theme.set('color.custom', true))
```

You can also enable custom gradients this way.

`.wpjson` methods are chainable, so you can just tag `.useTailwindColors()` etc. on to that. Just remember to call `.enable()` at the end! Eg:

```
app.wpjson.settings((theme) => theme.set('color.custom', true))
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize()
.enable();
```

---

## Post 9 by @igorlopasovsky — 2023-09-21T11:51:29Z

Thank you very much Tom, working like a charm :wink: