## 事象
[[Tailwind CSS]]のv4にて、[[theme変数]]に `--color-F7F7F7` と定義すると、`text-F7F7F7` が有効にならない。
`style.css`
```css
@import "tailwindcss";
@theme {
--color-F7F7F7: #f00;
}
```
`app.vue`
```html
<template>
<span class="text-F7F7F7 text-5xl">Title</span>
</template>
```
以下のケースはいずれも動く。
- `--color-FAFAFA`
- `--color-696969`
- `--color-f7f7f7`
### 環境
| 対象 | バージョン |
| ---------------- | ---------- |
| [[macOS]] | 15.6.1 |
| [[Tailwind CSS]] | 4.1.13 |
| [[Vue]] | 3.5.21 |
## 原因
[[theme変数]]は[[ケバブケース]]で書かないと、[[カスタムプロパティ (CSS)|カスタムプロパティ]]に追加されなそうだから。
`--color-f7f7f7` だとdev server起動後のページで、[[styleタグ]]の中に定義が存在する。
![[2025-09-08-00-39-01.avif]]
> [!info]
> `@layer utilities` の方には `.text-f7f7f7` の定義が存在する。
一方、`--color-F7F7F7` だと存在しないことが分かる。
![[2025-09-08-00-40-09.avif]]
## 解決方法
[[ケバブケース]]の定義、すなわち**アルファベットはすべて小文字**で定義しなおす。
> [!unresolved]
> これが仕様なのかは謎... issueによると[[キャメルケース]]などでも[[ケバブケース]]に変換されていそうなので、`color-F7F7F7` も変換されているかもしれない... がそもそも大文字が含まれいるのでややこしそう。
>
> <div class="link-card-v2">
> <div class="link-card-v2-site">
> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
> <span class="link-card-v2-site-name">GitHub</span>
> </div>
> <div class="link-card-v2-title">
> Utility class name transforms lowercase+uppercase keys (camelCase/PascalCase) to kebab-case unexpectedly when using JavaScript config file · Issue #18114 · tailwindlabs/tailwindcss
> </div>
> <div class="link-card-v2-content">
> What version of Tailwind CSS are you using? v4.1.7 What build tool (or framework if it abstracts the build tool) ...
> </div>
> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/7e4fccadccc20089b32589d096e80e0f399831b3afb622d6c3f7e3044700807c/tailwindlabs/tailwindcss/issues/18114" />
> <a href="https://github.com/tailwindlabs/tailwindcss/issues/18114"></a>
> </div>