[{"data":1,"prerenderedAt":998},["ShallowReactive",2],{"navigation_docs":3,"-frontend-css-tailwind":190,"-frontend-css-tailwind-surround":993},[4,136,150,183],{"title":5,"path":6,"stem":7,"children":8},"Frontend","\u002Ffrontend","1.frontend",[9,13,39,76,109,130],{"title":10,"path":6,"stem":11,"order":12},"フロントエンド ガイドライン","1.frontend\u002Findex",1,{"title":14,"path":15,"stem":16,"children":17},"HTML","\u002Ffrontend\u002Fhtml","1.frontend\u002F1.html\u002Findex",[18,19,23,27,31,35],{"title":14,"path":15,"stem":16},{"title":20,"path":21,"stem":22},"コードスタイル","\u002Ffrontend\u002Fhtml\u002Fcode-style","1.frontend\u002F1.html\u002Fcode-style",{"title":24,"path":25,"stem":26},"見出しタグ","\u002Ffrontend\u002Fhtml\u002Fheading","1.frontend\u002F1.html\u002Fheading",{"title":28,"path":29,"stem":30},"img タグ","\u002Ffrontend\u002Fhtml\u002Fimg","1.frontend\u002F1.html\u002Fimg",{"title":32,"path":33,"stem":34},"パスとリンク","\u002Ffrontend\u002Fhtml\u002Flink","1.frontend\u002F1.html\u002Flink",{"title":36,"path":37,"stem":38},"品質管理","\u002Ffrontend\u002Fhtml\u002Fquality","1.frontend\u002F1.html\u002Fquality",{"title":40,"path":41,"stem":42,"children":43},"CSS","\u002Ffrontend\u002Fcss","1.frontend\u002F2.css\u002Findex",[44,45,49,52,56,60,64,68,72],{"title":40,"path":41,"stem":42},{"title":46,"path":47,"stem":48},"命名規則・コンポーネント設計","\u002Ffrontend\u002Fcss\u002Farchitecture","1.frontend\u002F2.css\u002Farchitecture",{"title":20,"path":50,"stem":51},"\u002Ffrontend\u002Fcss\u002Fcode-style","1.frontend\u002F2.css\u002Fcode-style",{"title":53,"path":54,"stem":55},"Web フォント","\u002Ffrontend\u002Fcss\u002Ffonts","1.frontend\u002F2.css\u002Ffonts",{"title":57,"path":58,"stem":59},"記述順番","\u002Ffrontend\u002Fcss\u002Forder","1.frontend\u002F2.css\u002Forder",{"title":61,"path":62,"stem":63},"プロパティのルール","\u002Ffrontend\u002Fcss\u002Fproperties","1.frontend\u002F2.css\u002Fproperties",{"title":65,"path":66,"stem":67},"Tailwind CSS","\u002Ffrontend\u002Fcss\u002Ftailwind","1.frontend\u002F2.css\u002Ftailwind",{"title":69,"path":70,"stem":71},"値のルール","\u002Ffrontend\u002Fcss\u002Fvalues","1.frontend\u002F2.css\u002Fvalues",{"title":73,"path":74,"stem":75},"CSS 変数（カスタムプロパティ）","\u002Ffrontend\u002Fcss\u002Fvariables","1.frontend\u002F2.css\u002Fvariables",{"title":77,"path":78,"stem":79,"children":80},"JavaScript","\u002Ffrontend\u002Fjs","1.frontend\u002F3.js\u002Findex",[81,82,85,89,93,97,101,105],{"title":77,"path":78,"stem":79},{"title":20,"path":83,"stem":84},"\u002Ffrontend\u002Fjs\u002Fcode-style","1.frontend\u002F3.js\u002Fcode-style",{"title":86,"path":87,"stem":88},"エラーハンドリング","\u002Ffrontend\u002Fjs\u002Ferror-handling","1.frontend\u002F3.js\u002Ferror-handling",{"title":90,"path":91,"stem":92},"ライブラリの利用","\u002Ffrontend\u002Fjs\u002Flibraries","1.frontend\u002F3.js\u002Flibraries",{"title":94,"path":95,"stem":96},"HTML への読み込み","\u002Ffrontend\u002Fjs\u002Floading","1.frontend\u002F3.js\u002Floading",{"title":98,"path":99,"stem":100},"モジュール","\u002Ffrontend\u002Fjs\u002Fmodule-structure","1.frontend\u002F3.js\u002Fmodule-structure",{"title":102,"path":103,"stem":104},"命名規則","\u002Ffrontend\u002Fjs\u002Fnaming","1.frontend\u002F3.js\u002Fnaming",{"title":106,"path":107,"stem":108},"パフォーマンス最適化","\u002Ffrontend\u002Fjs\u002Fperformance","1.frontend\u002F3.js\u002Fperformance",{"title":110,"path":111,"stem":112,"children":113},"画像・メディアリソースガイドライン","\u002Ffrontend\u002Fmedia","1.frontend\u002F4.media\u002Findex",[114,115,119,123,127],{"title":110,"path":111,"stem":112},{"title":116,"path":117,"stem":118},"アクセシビリティ","\u002Ffrontend\u002Fmedia\u002Faccessibility","1.frontend\u002F4.media\u002Faccessibility",{"title":120,"path":121,"stem":122},"画像フォーマット","\u002Ffrontend\u002Fmedia\u002Fformats","1.frontend\u002F4.media\u002Fformats",{"title":124,"path":125,"stem":126},"ファイル命名規則","\u002Ffrontend\u002Fmedia\u002Fnaming","1.frontend\u002F4.media\u002Fnaming",{"title":106,"path":128,"stem":129},"\u002Ffrontend\u002Fmedia\u002Foptimization","1.frontend\u002F4.media\u002Foptimization",{"title":131,"path":132,"stem":133,"children":134},"開発環境テンプレート","\u002Ffrontend\u002Fenvironment","1.frontend\u002F5.environment\u002Findex",[135],{"title":131,"path":132,"stem":133},{"title":137,"path":138,"stem":139,"children":140,"page":149},"Deploy Release","\u002Fdeploy-release","2.deploy-release",[141,145],{"title":142,"path":143,"stem":144},"デプロイ","\u002Fdeploy-release\u002Fdeploy","2.deploy-release\u002Fdeploy",{"title":146,"path":147,"stem":148},"リリース","\u002Fdeploy-release\u002Frelease","2.deploy-release\u002Frelease",false,{"title":151,"path":152,"stem":153,"children":154},"Git","\u002Fgit","3.git",[155,159,163,167,171,175,179],{"title":156,"path":152,"stem":157,"order":158},"Git ガイドライン","3.git\u002Findex",3,{"title":160,"path":161,"stem":162},"ブランチ戦略","\u002Fgit\u002Fbranch","3.git\u002Fbranch",{"title":164,"path":165,"stem":166},"CI\u002FCD運用","\u002Fgit\u002Fcicd","3.git\u002Fcicd",{"title":168,"path":169,"stem":170},"コミットメッセージとタグ","\u002Fgit\u002Fmessage","3.git\u002Fmessage",{"title":172,"path":173,"stem":174},"Pull Request運用","\u002Fgit\u002Fpull-request","3.git\u002Fpull-request",{"title":176,"path":177,"stem":178},"リポジトリ運用","\u002Fgit\u002Frepository","3.git\u002Frepository",{"title":180,"path":181,"stem":182},"GitHub権限・セキュリティ","\u002Fgit\u002Fsecurity","3.git\u002Fsecurity",{"title":184,"path":185,"stem":186,"children":187,"order":189},"AI 利用ガイドライン","\u002Fai","4.ai\u002Findex",[188],{"title":184,"path":185,"stem":186,"order":189},4,{"id":191,"title":65,"body":192,"description":987,"extension":988,"links":989,"meta":990,"navigation":332,"path":66,"seo":991,"stem":67,"__hash__":992},"docs\u002F1.frontend\u002F2.css\u002Ftailwind.md",{"type":193,"value":194,"toc":972},"minimark",[195,199,203,233,245,252,254,258,263,267,271,275,295,454,459,508,514,518,524,694,697,733,737,743,830,836,850,853,857,864,901,938,943,947,950,968],[196,197,198],"h2",{"id":198},"導入方法",[200,201,202],"p",{},"本番環境では、以下のいずれかの方法で Tailwind CSS v4 を導入してください。",[204,205,206,217,225],"ul",{},[207,208,209,213,216],"li",{},[210,211,212],"strong",{},"PostCSS プラグイン",[214,215],"br",{},"\n既存のビルドプロセスに統合する場合",[207,218,219,222,224],{},[210,220,221],{},"Tailwind CLI",[214,223],{},"\nスタンドアロンで CSS を生成する場合",[207,226,227,230,232],{},[210,228,229],{},"フレームワーク固有の統合",[214,231],{},"\nNext.js、Vite、Nuxt などのフレームワークが提供する統合方法",[200,234,235,236,240,241,244],{},"v4 では、",[237,238,239],"code",{},"tailwind.config.js"," は不要になり、CSS ファイル内の ",[237,242,243],{},"@theme"," ディレクティブでテーマを定義します。",[246,247,248,249,251],"caution",{},"本番環境での CDN 利用禁止\nPlay CDN は開発・プロトタイプ用途に限定されています。",[214,250],{},"\n本番環境では、PostCSS や Tailwind CLI を使用してビルド済みの CSS ファイルを生成し、使用してください。",[196,253,20],{"id":20},[255,256,257],"h3",{"id":257},"クラス順序",[259,260,262],"note",{"to":261},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Feditor-setup#class-sorting","\nTailwind クラスは、公式で推奨されている推奨順序に従って記述してください。\n",[259,264,266],{"to":265},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Fprettier-plugin-tailwindcss","\nPrettier Plugin for Tailwind CSS を導入することで、クラスの順序を自動的にソートし、コードの可読性と保守性を向上させることができます。\n",[196,268,270],{"id":269},"カスタムテーマデザイントークンの運用","カスタムテーマ・デザイントークンの運用",[255,272,274],{"id":273},"theme-ディレクティブの使用","@theme ディレクティブの使用",[200,276,277,278,280,281,283,284,289,290,294],{},"Tailwind CSS v4 では、",[237,279,243],{}," ディレクティブを使用してテーマ変数を定義します。",[214,282],{},"\n既存の ",[285,286,288],"a",{"href":287},".\u002Fvariables","CSS 変数"," や ",[285,291,293],{"href":292},".\u002Ffonts","フォント設定"," を Tailwind のテーマ変数として統合できます。",[296,297,302],"pre",{"className":298,"code":299,"language":300,"meta":301,"style":301},"language-css shiki shiki-themes github-light material-theme material-theme-palenight","@import \"tailwindcss\";\n\n@theme {\n  \u002F* カラー *\u002F\n  --color-primary: #0070f3;\n  --color-secondary: #555;\n  --color-bg: #fff;\n\n  \u002F* スペーシング *\u002F\n  --spacing-sm: 0.5rem;\n  --spacing-md: 1.5rem;\n  --spacing-lg: 2rem;\n\n  \u002F* フォント *\u002F\n  --font-family-sans: \"Helvetica Neue\", Arial, sans-serif;\n}\n","css","",[237,303,304,327,334,341,347,364,377,388,393,399,405,411,417,422,428,448],{"__ignoreMap":301},[305,306,308,312,316,320,323],"span",{"class":307,"line":12},"line",[305,309,311],{"class":310},"sktmp","@import",[305,313,315],{"class":314},"ssQ5U"," \"",[305,317,319],{"class":318},"scigg","tailwindcss",[305,321,322],{"class":314},"\"",[305,324,326],{"class":325},"sN50r",";\n",[305,328,330],{"class":307,"line":329},2,[305,331,333],{"emptyLinePlaceholder":332},true,"\n",[305,335,336,338],{"class":307,"line":158},[305,337,243],{"class":310},[305,339,340],{"class":325}," {\n",[305,342,343],{"class":307,"line":189},[305,344,346],{"class":345},"su8Ar","  \u002F* カラー *\u002F\n",[305,348,350,354,358,362],{"class":307,"line":349},5,[305,351,353],{"class":352},"sKuZN","  --color-primary: ",[305,355,357],{"class":356},"sr34e","#",[305,359,361],{"class":360},"sES47","0070f3",[305,363,326],{"class":352},[305,365,367,370,372,375],{"class":307,"line":366},6,[305,368,369],{"class":352},"  --color-secondary: ",[305,371,357],{"class":356},[305,373,374],{"class":360},"555",[305,376,326],{"class":352},[305,378,380,383,385],{"class":307,"line":379},7,[305,381,382],{"class":352},"  --color-bg: ",[305,384,357],{"class":356},[305,386,387],{"class":360},"fff;\n",[305,389,391],{"class":307,"line":390},8,[305,392,333],{"emptyLinePlaceholder":332},[305,394,396],{"class":307,"line":395},9,[305,397,398],{"class":345},"  \u002F* スペーシング *\u002F\n",[305,400,402],{"class":307,"line":401},10,[305,403,404],{"class":352},"  --spacing-sm: 0.5rem;\n",[305,406,408],{"class":307,"line":407},11,[305,409,410],{"class":352},"  --spacing-md: 1.5rem;\n",[305,412,414],{"class":307,"line":413},12,[305,415,416],{"class":352},"  --spacing-lg: 2rem;\n",[305,418,420],{"class":307,"line":419},13,[305,421,333],{"emptyLinePlaceholder":332},[305,423,425],{"class":307,"line":424},14,[305,426,427],{"class":345},"  \u002F* フォント *\u002F\n",[305,429,431,434,437,440,442,446],{"class":307,"line":430},15,[305,432,433],{"class":352},"  --font-family-sans: \"Helvetica Neue\"",[305,435,436],{"class":325},",",[305,438,439],{"class":352}," Arial",[305,441,436],{"class":325},[305,443,445],{"class":444},"sQfh6"," sans-serif",[305,447,326],{"class":352},[305,449,451],{"class":307,"line":450},16,[305,452,453],{"class":352},"}\n",[200,455,456,458],{},[237,457,243],{}," ディレクティブで定義した変数は、自動的にユーティリティクラスとして利用可能になります。",[296,460,464],{"className":461,"code":462,"language":463,"meta":301,"style":301},"language-html shiki shiki-themes github-light material-theme material-theme-palenight","\u003C!-- テーマ変数から生成されたユーティリティクラスを使用 -->\n\u003Cdiv class=\"bg-primary text-white p-md\">コンテンツ\u003C\u002Fdiv>\n","html",[237,465,466,471],{"__ignoreMap":301},[305,467,468],{"class":307,"line":12},[305,469,470],{"class":345},"\u003C!-- テーマ変数から生成されたユーティリティクラスを使用 -->\n",[305,472,473,476,480,484,487,489,492,494,497,500,503,505],{"class":307,"line":329},[305,474,475],{"class":325},"\u003C",[305,477,479],{"class":478},"sF3G6","div",[305,481,483],{"class":482},"sAjK8"," class",[305,485,486],{"class":325},"=",[305,488,322],{"class":314},[305,490,491],{"class":318},"bg-primary text-white p-md",[305,493,322],{"class":314},[305,495,496],{"class":325},">",[305,498,499],{"class":352},"コンテンツ",[305,501,502],{"class":325},"\u003C\u002F",[305,504,479],{"class":478},[305,506,507],{"class":325},">\n",[259,509,510,511,513],{},"テーマ変数の推奨\nプロジェクト全体で一貫して使用する値は、",[237,512,243],{}," ディレクティブでテーマ変数として定義してください。",[255,515,517],{"id":516},"css-変数との統合","CSS 変数との統合",[200,519,520,521,523],{},"既存の CSS 変数を ",[237,522,243],{}," ディレクティブで参照することで、CSS 変数と Tailwind テーマを統合できます。",[296,525,527],{"className":298,"code":526,"language":300,"meta":301,"style":301},"@import \"tailwindcss\";\n\n\u002F* 既存の CSS 変数を定義 *\u002F\n:root {\n  --color-primary: #0070f3;\n  --color-bg: #fff;\n}\n\n\u002F* Tailwind テーマ変数として参照 *\u002F\n@theme {\n  --color-primary: var(--color-primary);\n  --color-bg: var(--color-bg);\n}\n\n\u002F* ダークモードのテーマ切り替え *\u002F\n:root[data-theme=\"dark\"] {\n  --color-primary: #66bee7;\n  --color-bg: #222;\n}\n",[237,528,529,541,545,550,561,578,592,596,600,605,611,616,621,625,629,634,661,675,689],{"__ignoreMap":301},[305,530,531,533,535,537,539],{"class":307,"line":12},[305,532,311],{"class":310},[305,534,315],{"class":314},[305,536,319],{"class":318},[305,538,322],{"class":314},[305,540,326],{"class":325},[305,542,543],{"class":307,"line":329},[305,544,333],{"emptyLinePlaceholder":332},[305,546,547],{"class":307,"line":158},[305,548,549],{"class":345},"\u002F* 既存の CSS 変数を定義 *\u002F\n",[305,551,552,556,559],{"class":307,"line":189},[305,553,555],{"class":554},"sjROF",":",[305,557,558],{"class":482},"root",[305,560,340],{"class":325},[305,562,563,567,569,573,576],{"class":307,"line":349},[305,564,566],{"class":565},"s3AGf","  --color-primary",[305,568,555],{"class":325},[305,570,572],{"class":571},"s56lG"," #",[305,574,361],{"class":575},"s_GZX",[305,577,326],{"class":325},[305,579,580,583,585,587,590],{"class":307,"line":366},[305,581,582],{"class":565},"  --color-bg",[305,584,555],{"class":325},[305,586,572],{"class":571},[305,588,589],{"class":575},"fff",[305,591,326],{"class":325},[305,593,594],{"class":307,"line":379},[305,595,453],{"class":325},[305,597,598],{"class":307,"line":390},[305,599,333],{"emptyLinePlaceholder":332},[305,601,602],{"class":307,"line":395},[305,603,604],{"class":345},"\u002F* Tailwind テーマ変数として参照 *\u002F\n",[305,606,607,609],{"class":307,"line":401},[305,608,243],{"class":310},[305,610,340],{"class":325},[305,612,613],{"class":307,"line":407},[305,614,615],{"class":352},"  --color-primary: var(--color-primary);\n",[305,617,618],{"class":307,"line":413},[305,619,620],{"class":352},"  --color-bg: var(--color-bg);\n",[305,622,623],{"class":307,"line":419},[305,624,453],{"class":325},[305,626,627],{"class":307,"line":424},[305,628,333],{"emptyLinePlaceholder":332},[305,630,631],{"class":307,"line":430},[305,632,633],{"class":345},"\u002F* ダークモードのテーマ切り替え *\u002F\n",[305,635,636,638,640,643,646,649,651,654,656,659],{"class":307,"line":450},[305,637,555],{"class":554},[305,639,558],{"class":482},[305,641,642],{"class":325},"[",[305,644,645],{"class":482},"data-theme",[305,647,486],{"class":648},"sSBoF",[305,650,322],{"class":314},[305,652,653],{"class":318},"dark",[305,655,322],{"class":314},[305,657,658],{"class":325},"]",[305,660,340],{"class":325},[305,662,664,666,668,670,673],{"class":307,"line":663},17,[305,665,566],{"class":565},[305,667,555],{"class":325},[305,669,572],{"class":571},[305,671,672],{"class":575},"66bee7",[305,674,326],{"class":325},[305,676,678,680,682,684,687],{"class":307,"line":677},18,[305,679,582],{"class":565},[305,681,555],{"class":325},[305,683,572],{"class":571},[305,685,686],{"class":575},"222",[305,688,326],{"class":325},[305,690,692],{"class":307,"line":691},19,[305,693,453],{"class":325},[200,695,696],{},"これにより、CSS 変数の変更が自動的に Tailwind のユーティリティクラスに反映されます。",[296,698,700],{"className":461,"code":699,"language":463,"meta":301,"style":301},"\u003C!-- テーマ変数から生成されたユーティリティクラスを使用 -->\n\u003Cdiv class=\"bg-bg text-primary\">コンテンツ\u003C\u002Fdiv>\n",[237,701,702,706],{"__ignoreMap":301},[305,703,704],{"class":307,"line":12},[305,705,470],{"class":345},[305,707,708,710,712,714,716,718,721,723,725,727,729,731],{"class":307,"line":329},[305,709,475],{"class":325},[305,711,479],{"class":478},[305,713,483],{"class":482},[305,715,486],{"class":325},[305,717,322],{"class":314},[305,719,720],{"class":318},"bg-bg text-primary",[305,722,322],{"class":314},[305,724,496],{"class":325},[305,726,499],{"class":352},[305,728,502],{"class":325},[305,730,479],{"class":478},[305,732,507],{"class":325},[196,734,736],{"id":735},"apply-ディレクティブの使用","@apply ディレクティブの使用",[200,738,739,742],{},[237,740,741],{},"@apply"," ディレクティブは、繰り返し使用されるユーティリティクラスの組み合わせをコンポーネントクラスに抽出する場合に使用します。",[296,744,746],{"className":298,"code":745,"language":300,"meta":301,"style":301},"\u002F* ✅ 良い例：繰り返し使用されるパターンを @apply で抽出 *\u002F\n.button {\n  @apply px-4 py-2 rounded font-medium;\n}\n\n.button--primary {\n  @apply bg-blue-500 text-white;\n}\n",[237,747,748,753,764,792,796,800,809,826],{"__ignoreMap":301},[305,749,750],{"class":307,"line":12},[305,751,752],{"class":345},"\u002F* ✅ 良い例：繰り返し使用されるパターンを @apply で抽出 *\u002F\n",[305,754,755,758,762],{"class":307,"line":329},[305,756,757],{"class":554},".",[305,759,761],{"class":760},"s3jxQ","button",[305,763,340],{"class":325},[305,765,766,769,772,775,778,781,784,787,790],{"class":307,"line":158},[305,767,768],{"class":352},"  @",[305,770,771],{"class":575},"apply",[305,773,774],{"class":575}," px-",[305,776,777],{"class":352},"4 ",[305,779,780],{"class":575},"py-",[305,782,783],{"class":352},"2 ",[305,785,786],{"class":575},"rounded",[305,788,789],{"class":575}," font-medium",[305,791,326],{"class":325},[305,793,794],{"class":307,"line":189},[305,795,453],{"class":325},[305,797,798],{"class":307,"line":349},[305,799,333],{"emptyLinePlaceholder":332},[305,801,802,804,807],{"class":307,"line":366},[305,803,757],{"class":554},[305,805,806],{"class":760},"button--primary",[305,808,340],{"class":325},[305,810,811,813,815,818,821,824],{"class":307,"line":379},[305,812,768],{"class":352},[305,814,771],{"class":575},[305,816,817],{"class":575}," bg-blue-",[305,819,820],{"class":352},"500 ",[305,822,823],{"class":575},"text-white",[305,825,326],{"class":325},[305,827,828],{"class":307,"line":390},[305,829,453],{"class":325},[200,831,832,833,835],{},"ただし、",[237,834,741],{}," の多用は避け、以下の場合にのみ使用してください。",[204,837,838,841,844,847],{},[207,839,840],{},"フレームワーク等でコンポーネント化できない場合（WordPress 等）",[207,842,843],{},"コンポーネントとして再利用される場合",[207,845,846],{},"同じユーティリティクラスの組み合わせが 3 回以上繰り返される",[207,848,849],{},"プロジェクト全体で一貫したスタイルが必要",[196,851,852],{"id":852},"ユーティリティクラス利用ポリシー",[255,854,856],{"id":855},"arbitrary-values-の使用を控える","Arbitrary values の使用を控える",[200,858,859,860,863],{},"Tailwind のクラス名をむやみに増やさないため、",[237,861,862],{},"text-[◯◯]"," のような Arbitrary values（任意値）はなるべく使わないでください。",[296,865,867],{"className":461,"code":866,"language":463,"meta":301,"style":301},"\u003C!-- ❌ 悪い例：Arbitrary values を多用 -->\n\u003Cdiv class=\"text-[#0070f3] text-[16px]\">コンテンツ\u003C\u002Fdiv>\n",[237,868,869,874],{"__ignoreMap":301},[305,870,871],{"class":307,"line":12},[305,872,873],{"class":345},"\u003C!-- ❌ 悪い例：Arbitrary values を多用 -->\n",[305,875,876,878,880,882,884,886,889,891,893,895,897,899],{"class":307,"line":329},[305,877,475],{"class":325},[305,879,479],{"class":478},[305,881,483],{"class":482},[305,883,486],{"class":325},[305,885,322],{"class":314},[305,887,888],{"class":318},"text-[#0070f3] text-[16px]",[305,890,322],{"class":314},[305,892,496],{"class":325},[305,894,499],{"class":352},[305,896,502],{"class":325},[305,898,479],{"class":478},[305,900,507],{"class":325},[296,902,904],{"className":461,"code":903,"language":463,"meta":301,"style":301},"\u003C!-- ✅ 良い例：テーマ変数や標準のユーティリティクラスを使用 -->\n\u003Cdiv class=\"text-primary text-base\">コンテンツ\u003C\u002Fdiv>\n",[237,905,906,911],{"__ignoreMap":301},[305,907,908],{"class":307,"line":12},[305,909,910],{"class":345},"\u003C!-- ✅ 良い例：テーマ変数や標準のユーティリティクラスを使用 -->\n",[305,912,913,915,917,919,921,923,926,928,930,932,934,936],{"class":307,"line":329},[305,914,475],{"class":325},[305,916,479],{"class":478},[305,918,483],{"class":482},[305,920,486],{"class":325},[305,922,322],{"class":314},[305,924,925],{"class":318},"text-primary text-base",[305,927,322],{"class":314},[305,929,496],{"class":325},[305,931,499],{"class":352},[305,933,502],{"class":325},[305,935,479],{"class":478},[305,937,507],{"class":325},[259,939,940,941,513],{},"@theme ディレクティブの利用\nArbitrary values を使用する場合は、できる限り ",[237,942,243],{},[255,944,946],{"id":945},"従来の-css-に残すべき場面","従来の CSS に残すべき場面",[200,948,949],{},"以下の場合は、従来の CSS で記述しても構いません。",[204,951,952,960],{},[207,953,954,957,959],{},[210,955,956],{},"複雑なアニメーション",[214,958],{},"\n複数のキーフレームや複雑なトランジションが必要な場合",[207,961,962,965,967],{},[210,963,964],{},"コンポーネント固有のスタイル",[214,966],{},"\n再利用可能なコンポーネントのスタイル定義（BEM クラスを使用）",[969,970,971],"style",{},"html pre.shiki code .sktmp, html code.shiki .sktmp{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .ssQ5U, html code.shiki .ssQ5U{--shiki-light:#032F62;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .scigg, html code.shiki .scigg{--shiki-light:#032F62;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sN50r, html code.shiki .sN50r{--shiki-light:#24292E;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .su8Ar, html code.shiki .su8Ar{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sKuZN, html code.shiki .sKuZN{--shiki-light:#24292E;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sr34e, html code.shiki .sr34e{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:inherit}html pre.shiki code .sES47, html code.shiki .sES47{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:inherit;--shiki-dark:#BABED8;--shiki-dark-font-style:inherit}html pre.shiki code .sQfh6, html code.shiki .sQfh6{--shiki-light:#22863A;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sF3G6, html code.shiki .sF3G6{--shiki-light:#22863A;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sAjK8, html code.shiki .sAjK8{--shiki-light:#6F42C1;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sjROF, html code.shiki .sjROF{--shiki-light:#6F42C1;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s3AGf, html code.shiki .s3AGf{--shiki-light:#E36209;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s56lG, html code.shiki .s56lG{--shiki-light:#005CC5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s_GZX, html code.shiki .s_GZX{--shiki-light:#005CC5;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sSBoF, html code.shiki .sSBoF{--shiki-light:#D73A49;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s3jxQ, html code.shiki .s3jxQ{--shiki-light:#6F42C1;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":301,"searchDepth":329,"depth":329,"links":973},[974,975,978,982,983],{"id":198,"depth":329,"text":198},{"id":20,"depth":329,"text":20,"children":976},[977],{"id":257,"depth":158,"text":257},{"id":269,"depth":329,"text":270,"children":979},[980,981],{"id":273,"depth":158,"text":274},{"id":516,"depth":158,"text":517},{"id":735,"depth":329,"text":736},{"id":852,"depth":329,"text":852,"children":984},[985,986],{"id":855,"depth":158,"text":856},{"id":945,"depth":158,"text":946},"Tailwind CSS v4の導入方法、@themeディレクティブ、ユーティリティクラス利用ポリシー","md",null,{},{"title":65,"description":987},"x5CoMTuyBrybkVZhV-PYHkJGSOC7TqSggxbrB-2trxw",[994,996],{"title":61,"path":62,"stem":63,"description":995,"children":-1},"transitionとz-indexの使用ルールと禁止事項",{"title":69,"path":70,"stem":71,"description":997,"children":-1},"数値、font-size、font-weightの指定方法",1780099578459]