[{"data":1,"prerenderedAt":689},["ShallowReactive",2],{"content-/tailwind-arbitrary-values-issue":3,"all-pages-for-dir":666,"related-/tailwind-arbitrary-values-issue":667,"og-image-/tailwind-arbitrary-values-issue":688},{"id":4,"title":5,"body":6,"category":651,"concepts":651,"description":652,"extension":653,"meta":654,"navigation":438,"ogImage":651,"path":655,"project_name":651,"published":656,"publishedAt":657,"seo":658,"source":651,"stem":659,"tags":660,"todo":651,"unpublished":656,"updatedAt":651,"__hash__":665},"pages/2025-11/2025-11-22/tailwind-arbitrary-values-issue.md","Nuxt 3でTailwind CSSの任意値が効かない問題と解決方法",{"type":7,"value":8,"toc":637},"minimark",[9,13,17,26,30,89,92,117,128,131,134,159,162,166,169,233,238,249,254,259,263,272,393,397,400,474,478,484,550,586,589,592,612,615,633],[10,11,5],"h1",{"id":12},"nuxt-3でtailwind-cssの任意値が効かない問題と解決方法",[14,15,16],"h2",{"id":16},"問題の概要",[18,19,20,21,25],"p",{},"Vueコンポーネント（",[22,23,24],"code",{},"NebiusFinancialsChart.vue","）内でTailwind CSSの任意値を使用した際、クラス名は正しく付与されるものの実際のスタイルが適用されない問題が発生しました。",[27,28,29],"h3",{"id":29},"症状",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-light vitesse-light","\u003Cdiv class=\"relative h-[600px] w-full\">\n  \u003Ccanvas ref=\"canvasRef\">\u003C/canvas>\n\u003C/div>\n","vue","",[22,38,39,72,79],{"__ignoreMap":36},[40,41,44,48,52,56,59,63,67,69],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"shFtX","\u003C",[40,49,51],{"class":50},"sHkkW","div",[40,53,55],{"class":54},"s4oTP"," class",[40,57,58],{"class":46},"=",[40,60,62],{"class":61},"sMJiu","\"",[40,64,66],{"class":65},"sdGka","relative h-[600px] w-full",[40,68,62],{"class":61},[40,70,71],{"class":46},">\n",[40,73,75],{"class":42,"line":74},2,[40,76,78],{"class":77},"sG7-3","  \u003Ccanvas ref=\"canvasRef\">\u003C/canvas>\n",[40,80,82,85,87],{"class":42,"line":81},3,[40,83,84],{"class":46},"\u003C/",[40,86,51],{"class":50},[40,88,71],{"class":46},[18,90,91],{},"上記のコードで：",[93,94,95,106],"ul",{},[96,97,98,101,102,105],"li",{},[22,99,100],{},"className",": ",[22,103,104],{},"\"relative h-[600px] w-full\""," （正しく付与されている）",[96,107,108,109,112,113,116],{},"実際の高さ: ",[22,110,111],{},"150px"," （期待値: ",[22,114,115],{},"600px","）",[18,118,119,120,123,124,127],{},"開発者ツールで確認すると",[22,121,122],{},"computedHeight: \"150px\"","となっており、Tailwindの任意値",[22,125,126],{},"h-[600px]","が正しくコンパイルされていませんでした。",[14,129,130],{"id":130},"原因",[18,132,133],{},"Nuxt 3の開発環境において、Tailwind CSSの任意値（Arbitrary values）が動的に生成されるVueコンポーネント内で正しくコンパイルされないケースがあります。これは以下のような理由が考えられます：",[135,136,137,144,150],"ol",{},[96,138,139,143],{},[140,141,142],"strong",{},"JITコンパイルのタイミング問題",": Tailwindのジャストインタイム（JIT）コンパイラがコンポーネントの変更を検知してクラスを生成するタイミングの問題",[96,145,146,149],{},[140,147,148],{},"キャッシュの問題",": 開発サーバーやビルドキャッシュが古い状態のままになっている",[96,151,152,101,155,158],{},[140,153,154],{},"Tailwind設定の問題",[22,156,157],{},"content"," パスの設定が適切でない可能性",[14,160,161],{"id":161},"解決方法",[27,163,165],{"id":164},"_1-インラインスタイルを使用推奨","1. インラインスタイルを使用（推奨）",[18,167,168],{},"最も確実な方法は、インラインスタイルを使用することです：",[31,170,172],{"className":33,"code":171,"language":35,"meta":36,"style":36},"\u003Cdiv class=\"relative w-full\" style=\"height: 600px;\">\n  \u003Ccanvas ref=\"canvasRef\">\u003C/canvas>\n\u003C/div>\n",[22,173,174,221,225],{"__ignoreMap":36},[40,175,176,178,180,182,184,186,189,191,195,197,199,203,206,210,214,217,219],{"class":42,"line":43},[40,177,47],{"class":46},[40,179,51],{"class":50},[40,181,55],{"class":54},[40,183,58],{"class":46},[40,185,62],{"class":61},[40,187,188],{"class":65},"relative w-full",[40,190,62],{"class":61},[40,192,194],{"class":193},"senZ8"," style",[40,196,58],{"class":46},[40,198,62],{"class":46},[40,200,202],{"class":201},"sz8Xr","height",[40,204,205],{"class":46},":",[40,207,209],{"class":208},"sM54T"," 600",[40,211,213],{"class":212},"stQ0i","px",[40,215,216],{"class":46},";",[40,218,62],{"class":46},[40,220,71],{"class":46},[40,222,223],{"class":42,"line":74},[40,224,78],{"class":77},[40,226,227,229,231],{"class":42,"line":81},[40,228,84],{"class":46},[40,230,51],{"class":50},[40,232,71],{"class":46},[18,234,235,205],{},[140,236,237],{},"メリット",[93,239,240,243,246],{},[96,241,242],{},"確実にスタイルが適用される",[96,244,245],{},"ビルド時の依存がない",[96,247,248],{},"デバッグが容易",[18,250,251,205],{},[140,252,253],{},"デメリット",[93,255,256],{},[96,257,258],{},"Tailwindのユーティリティクラスの一貫性から外れる",[27,260,262],{"id":261},"_2-tailwind設定の確認","2. Tailwind設定の確認",[18,264,265,268,269,271],{},[22,266,267],{},"tailwind.config.js"," の ",[22,270,157],{}," 設定を確認：",[31,273,277],{"className":274,"code":275,"language":276,"meta":36,"style":36},"language-javascript shiki shiki-themes vitesse-light vitesse-light","export default {\n  content: [\n    './components/**/*.{js,vue,ts}',\n    './layouts/**/*.vue',\n    './pages/**/*.vue',\n    './plugins/**/*.{js,ts}',\n    './app.vue',\n    './error.vue',\n  ],\n  // ...\n}\n","javascript",[22,278,279,290,300,314,326,338,350,362,374,380,387],{"__ignoreMap":36},[40,280,281,284,287],{"class":42,"line":43},[40,282,283],{"class":50},"export",[40,285,286],{"class":50}," default",[40,288,289],{"class":46}," {\n",[40,291,292,295,297],{"class":42,"line":74},[40,293,294],{"class":201},"  content",[40,296,205],{"class":46},[40,298,299],{"class":46}," [\n",[40,301,302,305,308,311],{"class":42,"line":81},[40,303,304],{"class":61},"    '",[40,306,307],{"class":65},"./components/**/*.{js,vue,ts}",[40,309,310],{"class":61},"'",[40,312,313],{"class":46},",\n",[40,315,317,319,322,324],{"class":42,"line":316},4,[40,318,304],{"class":61},[40,320,321],{"class":65},"./layouts/**/*.vue",[40,323,310],{"class":61},[40,325,313],{"class":46},[40,327,329,331,334,336],{"class":42,"line":328},5,[40,330,304],{"class":61},[40,332,333],{"class":65},"./pages/**/*.vue",[40,335,310],{"class":61},[40,337,313],{"class":46},[40,339,341,343,346,348],{"class":42,"line":340},6,[40,342,304],{"class":61},[40,344,345],{"class":65},"./plugins/**/*.{js,ts}",[40,347,310],{"class":61},[40,349,313],{"class":46},[40,351,353,355,358,360],{"class":42,"line":352},7,[40,354,304],{"class":61},[40,356,357],{"class":65},"./app.vue",[40,359,310],{"class":61},[40,361,313],{"class":46},[40,363,365,367,370,372],{"class":42,"line":364},8,[40,366,304],{"class":61},[40,368,369],{"class":65},"./error.vue",[40,371,310],{"class":61},[40,373,313],{"class":46},[40,375,377],{"class":42,"line":376},9,[40,378,379],{"class":46},"  ],\n",[40,381,383],{"class":42,"line":382},10,[40,384,386],{"class":385},"sxvE3","  // ...\n",[40,388,390],{"class":42,"line":389},11,[40,391,392],{"class":46},"}\n",[27,394,396],{"id":395},"_3-開発サーバーの再起動","3. 開発サーバーの再起動",[18,398,399],{},"キャッシュの問題の場合、開発サーバーを完全に再起動：",[31,401,405],{"className":402,"code":403,"language":404,"meta":36,"style":36},"language-bash shiki shiki-themes vitesse-light vitesse-light","# プロセスを終了\ntaskkill //F //PID \u003CPID>\n\n# .nuxtディレクトリを削除（オプション）\nrm -rf .nuxt\n\n# 再起動\npnpm dev\n","bash",[22,406,407,412,434,440,445,457,461,466],{"__ignoreMap":36},[40,408,409],{"class":42,"line":43},[40,410,411],{"class":385},"# プロセスを終了\n",[40,413,414,417,420,423,426,429,432],{"class":42,"line":74},[40,415,416],{"class":193},"taskkill",[40,418,419],{"class":65}," //F",[40,421,422],{"class":65}," //PID",[40,424,425],{"class":212}," \u003C",[40,427,428],{"class":65},"PI",[40,430,431],{"class":77},"D",[40,433,71],{"class":212},[40,435,436],{"class":42,"line":81},[40,437,439],{"emptyLinePlaceholder":438},true,"\n",[40,441,442],{"class":42,"line":316},[40,443,444],{"class":385},"# .nuxtディレクトリを削除（オプション）\n",[40,446,447,450,454],{"class":42,"line":328},[40,448,449],{"class":193},"rm",[40,451,453],{"class":452},"snbK4"," -rf",[40,455,456],{"class":65}," .nuxt\n",[40,458,459],{"class":42,"line":340},[40,460,439],{"emptyLinePlaceholder":438},[40,462,463],{"class":42,"line":352},[40,464,465],{"class":385},"# 再起動\n",[40,467,468,471],{"class":42,"line":364},[40,469,470],{"class":193},"pnpm",[40,472,473],{"class":65}," dev\n",[27,475,477],{"id":476},"_4-カスタムクラスとして定義","4. カスタムクラスとして定義",[18,479,480,481,483],{},"頻繁に使用する場合は、",[22,482,267],{}," でカスタムクラスとして定義：",[31,485,487],{"className":274,"code":486,"language":276,"meta":36,"style":36},"theme: {\n  extend: {\n    height: {\n      'chart': '600px',\n    }\n  }\n}\n",[22,488,489,498,507,516,536,541,546],{"__ignoreMap":36},[40,490,491,494,496],{"class":42,"line":43},[40,492,493],{"class":193},"theme",[40,495,205],{"class":46},[40,497,289],{"class":46},[40,499,500,503,505],{"class":42,"line":74},[40,501,502],{"class":193},"  extend",[40,504,205],{"class":46},[40,506,289],{"class":46},[40,508,509,512,514],{"class":42,"line":81},[40,510,511],{"class":193},"    height",[40,513,205],{"class":46},[40,515,289],{"class":46},[40,517,518,521,524,526,528,530,532,534],{"class":42,"line":316},[40,519,520],{"class":61},"      '",[40,522,523],{"class":65},"chart",[40,525,310],{"class":61},[40,527,101],{"class":77},[40,529,310],{"class":61},[40,531,115],{"class":65},[40,533,310],{"class":61},[40,535,313],{"class":46},[40,537,538],{"class":42,"line":328},[40,539,540],{"class":46},"    }\n",[40,542,543],{"class":42,"line":340},[40,544,545],{"class":46},"  }\n",[40,547,548],{"class":42,"line":352},[40,549,392],{"class":46},[31,551,553],{"className":33,"code":552,"language":35,"meta":36,"style":36},"\u003Cdiv class=\"relative h-chart w-full\">\n  \u003Ccanvas ref=\"canvasRef\">\u003C/canvas>\n\u003C/div>\n",[22,554,555,574,578],{"__ignoreMap":36},[40,556,557,559,561,563,565,567,570,572],{"class":42,"line":43},[40,558,47],{"class":46},[40,560,51],{"class":50},[40,562,55],{"class":54},[40,564,58],{"class":46},[40,566,62],{"class":61},[40,568,569],{"class":65},"relative h-chart w-full",[40,571,62],{"class":61},[40,573,71],{"class":46},[40,575,576],{"class":42,"line":74},[40,577,78],{"class":77},[40,579,580,582,584],{"class":42,"line":81},[40,581,84],{"class":46},[40,583,51],{"class":50},[40,585,71],{"class":46},[14,587,588],{"id":588},"推奨される対応",[18,590,591],{},"プロジェクトの状況に応じて選択：",[93,593,594,600,606],{},[96,595,596,599],{},[140,597,598],{},"単発の使用",": インラインスタイル",[96,601,602,605],{},[140,603,604],{},"複数箇所で使用",": カスタムクラス定義",[96,607,608,611],{},[140,609,610],{},"動的な値",": インラインスタイル + 変数",[14,613,614],{"id":614},"関連情報",[93,616,617,626],{},[96,618,619],{},[620,621,625],"a",{"href":622,"rel":623},"https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values",[624],"nofollow","Tailwind CSS - Arbitrary values",[96,627,628],{},[620,629,632],{"href":630,"rel":631},"https://tailwindcss.nuxtjs.org/",[624],"Nuxt Tailwind CSS Module",[634,635,636],"style",{},"html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}",{"title":36,"searchDepth":74,"depth":74,"links":638},[639,642,643,649,650],{"id":16,"depth":74,"text":16,"children":640},[641],{"id":29,"depth":81,"text":29},{"id":130,"depth":74,"text":130},{"id":161,"depth":74,"text":161,"children":644},[645,646,647,648],{"id":164,"depth":81,"text":165},{"id":261,"depth":81,"text":262},{"id":395,"depth":81,"text":396},{"id":476,"depth":81,"text":477},{"id":588,"depth":74,"text":588},{"id":614,"depth":74,"text":614},null,"Vueコンポーネント内でTailwind CSSの任意値（h-[600px]など）が正しく適用されない問題とその解決方法","md",{},"/tailwind-arbitrary-values-issue",false,"2025-11-22T00:00:00.000Z",{"title":5,"description":652},"2025-11/2025-11-22/tailwind-arbitrary-values-issue",[661,662,663,664],"Nuxt3","Tailwind CSS","トラブルシューティング","Vue","RfB70A_2Ep1JpC_cQ1aBZ0qE6ovaJI5GwZj8r-llcus",[],[668,672,676,680,684],{"title":669,"path":670,"publishedAt":671},"React TSXの掛け算スライドショーをVue.jsに移植した記録","/multiplication-slideshow-vue","2026-03-22T00:00:00.000Z",{"title":673,"path":674,"publishedAt":675},"プロジェクトタイムラインビューアの構築 - ガントチャート風レイアウトで開発ログを俯瞰する","/project-timeline-viewer-2026-02-22","2026-02-22T00:00:00.000Z",{"title":677,"path":678,"publishedAt":679},"小学理科の学習コンテンツをMiller Column UIで一気に構築した話","/science-content-development-2026-02-13","2026-02-13T00:00:00.000Z",{"title":681,"path":682,"publishedAt":683},"LP改善 - サムネイル共通コンポーネント化・デプロイスクリプト・UTF-8 BOM問題","/tax-lp-thumbnail-deploy-improvements","2026-02-10T00:00:00.000Z",{"title":685,"path":686,"publishedAt":687},"税理士LP - 複数のデザインテンプレートを複数業種に一括適用した開発記録","/tax-lp-design-templates-2026-02-08","2026-02-08T00:00:00.000Z","https://log.eurekapu.com/og/blog/tailwind-arbitrary-values-issue.png?v=2025-11-22T00%3A00%3A00.000Z&title=Nuxt%203%E3%81%A7Tailwind%20CSS%E3%81%AE%E4%BB%BB%E6%84%8F%E5%80%A4%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C%E3%81%A8%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95&author=Kei%20Komatsu&sig=f4499e16244daf6c",1785654663781]