{"id":26617,"date":"2025-12-05T21:44:25","date_gmt":"2025-12-05T21:44:25","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=26617"},"modified":"2025-12-05T21:44:25","modified_gmt":"2025-12-05T21:44:25","slug":"tsconfig-%e3%82%84-tailwindcss-%e3%81%aa%e3%81%a9%e3%81%ae%e8%a8%ad%e5%ae%9a%e3%82%92-nuxtlayer-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e5%85%b1%e9%80%9a%e5%8c%96%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/26617\/","title":{"rendered":"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b"},"content":{"rendered":"\n<\/p>\n<div>\n<p><span itemscope=\"\" itemtype=\"http:\/\/schema.org\/Photograph\"><img decoding=\"async\" src=\"https:\/\/cdn-ak.f.st-hatena.com\/images\/fotolife\/h\/hacomono-tech\/20251204\/20251204221827.png\" width=\"1200\" height=\"675\" loading=\"lazy\" title=\"\" class=\"hatena-fotolife\" style=\"width:800px\" itemprop=\"image\"\/><\/span><\/p>\n<blockquote>\n<p>\u3053\u306e\u8a18\u4e8b\u306f\u00a0<a target=\"_blank\" href=\"https:\/\/qiita.com\/advent-calendar\/2025\/hacomono\">hacomono Advent Calendar 2025<\/a>\u00a0\u306e6\u65e5\u76ee\u306e\u8a18\u4e8b\u3067\u3059<\/p>\n<\/blockquote>\n<p><a target=\"_blank\" href=\"https:\/\/bento.me\/mewton\">\u307f\u3085\u30fc\u3068\u3093<\/a>\u3067\u3059. \u30a2\u30c9\u30ab\u30ec 6\u65e5\u76ee\u3067\u3059.<br \/>hacomono \u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc\u3067\u306f\u4eca\u56de 3 \u56de\u306e\u30ce\u30eb\u30de\u304c\u3042\u308b\u306e\u3067\u9811\u5f35\u308a\u307e\u3059.<\/p>\n<p>\u73fe\u5728 hacomono \u3067\u306f\u65b0\u898f\u958b\u767a\u5411\u3051\u306e\u57fa\u76e4\u3068\u3057\u3066 Nuxt Layer \u3092\u7528\u3044\u3066, \u69d8\u3005\u306a nuxt \u3084\u3089 \u8a00\u8a9e\u8a2d\u5b9a\u3084\u3089\u3092\u5171\u901a\u5316\u3059\u308b\u52d5\u304d\u3092\u3057\u3066\u3044\u307e\u3059.\u305d\u306e\u4e00\u7aef\u3092\u7d39\u4ecb\u3067\u304d\u308c\u3070\u3068\u601d\u3044\u307e\u3059.<\/p>\n<h2 id=\"\u306f\u3058\u3081\u306b\">\u306f\u3058\u3081\u306b<\/h2>\n<h4 id=\"Nuxt-Layer-\u3068\u306f-\">Nuxt Layer \u3068\u306f ?<\/h4>\n<p>\u516c\u5f0f\u30ac\u30a4\u30c9\u306f\u3053\u3061\u3089<br \/><iframe src=\"https:\/\/hatenablog-parts.com\/embed?url=https%3A%2F%2Fnuxt.com%2Fdocs%2F4.x%2Fgetting-started%2Flayers\" title=\"Layers \u00b7 Get Started with Nuxt v4\" class=\"embed-card embed-webcard\" scrolling=\"no\" frameborder=\"0\" style=\"display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;\" loading=\"lazy\"><\/iframe><br \/>\n<br \/>\u3056\u3063\u304f\u308a\u3044\u3048\u3070 Nuxt \u306e\u65e2\u5b58\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u7d99\u627f\u30fb\u62e1\u5f35\u3057\u305f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u308b\u6a5f\u80fd\u3067\u3059.<br \/>Nuxt \u306e\u30d9\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5b9f\u88c5\u3057\u3066\u3042\u308b, components, composables \u7b49\u3092\u5f15\u304d\u7d99\u3044\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059.<\/p>\n<pre class=\"code lang-javascript\" data-lang=\"javascript\" data-unlink=\"\"><span class=\"synIdentifier\">defineNuxtConfig<\/span><span class=\"synSpecial\">({<\/span>\n  <span class=\"synIdentifier\">extends<\/span><span class=\"synStatement\">:<\/span> <span class=\"synSpecial\">[<\/span>  <span class=\"synSpecial\">]<\/span>\n<span class=\"synSpecial\">})<\/span>\n<\/pre>\n<p>\u307e\u305f, \u516c\u5f0f\u3088\u308a\u672c\u6a5f\u80fd\u306e\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3068\u8aac\u660e\u3055\u308c\u3066\u3044\u307e\u3059.<\/p>\n<ul>\n<li>\u518d\u5229\u7528\u53ef\u80fd\u306a\u8a2d\u5b9a\u30d7\u30ea\u30bb\u30c3\u30c8 (<code>nuxt.config<\/code> <code>app.config<\/code> ) \u3092\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u9593\u3067\u5171\u6709<\/li>\n<li><code>app\/components<\/code> \u914d\u4e0b\u306e\u5171\u901a\u5316\u306b\u3088\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4f5c\u6210<\/li>\n<li><code>app\/composables<\/code> <code>app\/utils<\/code> \u914d\u4e0b\u306e\u5171\u901a\u5316\u306b\u3088\u308b\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u30fb\u30b3\u30f3\u30dd\u30fc\u30b6\u30d6\u30eb\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4f5c\u6210<\/li>\n<li>Nuxt Module \u306e\u30d7\u30ea\u30bb\u30c3\u30c8\u306e\u7528\u610f<\/li>\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u9593\u3067\u306e\u6a19\u6e96\u8a2d\u5b9a\u306e\u5171\u6709<\/li>\n<li>Nuxt \u306e\u30c6\u30fc\u30de\u4f5c\u6210<\/li>\n<li>\u30e2\u30b8\u30e5\u30e9\u30fc\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u30b3\u30fc\u30c9\u69cb\u6210\u3092\u5f37\u5316\u3057\u3001\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u304a\u3051\u308b\u30c9\u30e1\u30a4\u30f3\u99c6\u52d5\u958b\u767a\u30d1\u30bf\u30fc\u30f3\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b<\/li>\n<\/ul>\n<p>Nuxt Layer \u3092\u4f7f\u3046\u30e2\u30b8\u30e5\u30e9\u30fc\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u95a2\u3057\u3066\u306f, \u5916\u90e8\u306e\u30d6\u30ed\u30b0\u8a18\u4e8b\u7b49\u3067\u7d39\u4ecb\u3055\u308c\u3066\u3044\u307e\u3059.<br \/><iframe src=\"https:\/\/hatenablog-parts.com\/embed?url=https%3A%2F%2Fzenn.dev%2Fsterashima78%2Farticles%2F07bcf398f0a02a\" title=\"Nuxt \u306e Layers \u3092\u7528\u3044\u3066\u30e2\u30b8\u30e5\u30e9\u30e2\u30ce\u30ea\u30b9\u69cb\u9020\u3092\u4f5c\u308b\" class=\"embed-card embed-webcard\" scrolling=\"no\" frameborder=\"0\" style=\"display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;\" loading=\"lazy\"><\/iframe><br \/>\n<\/p>\n<h2 id=\"Nuxt-Layer-\u4f7f\u3063\u3066\u307f\u305f\u30b5\u30f3\u30d7\u30eb\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\">Nuxt Layer \u4f7f\u3063\u3066\u307f\u305f\u30b5\u30f3\u30d7\u30eb\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb<\/h2>\n<p>\u30e2\u30b8\u30e5\u30e9\u30fc\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u95a2\u3057\u3066\u306f\u8a00\u308f\u305a\u3082\u304c\u306a\u3067\u306f\u3042\u308a\u307e\u3059\u304c, \u305d\u308c\u4ee5\u5916\u306e\u7d30\u304b\u3044\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u306b\u3064\u3044\u3066, \u3044\u304f\u3064\u304b\u5b9f\u969b\u306b\u8a66\u3057\u305f\u3082\u306e\u3092\u7d39\u4ecb\u3057\u307e\u3059<\/p>\n<h4 id=\"tsconfig-\u306e\u53b3\u5bc6\u5316--\u5171\u901a\u5316\">tsconfig \u306e\u53b3\u5bc6\u5316 &amp; \u5171\u901a\u5316<\/h4>\n<p>\u305f\u3068\u3048\u3070 typescript \u306e\u8a2d\u5b9a\u3092\u30d9\u30fc\u30b9\u306b\u7528\u610f\u3057\u3066\u307f\u307e\u3059. \u3053\u3053\u3067\u306f, \u8d85\u53b3\u5bc6\u306a\u578b\u30eb\u30fc\u30eb\u3092\u5b9a\u7fa9\u3057\u305f\u304f, <code>@tsconfig\/strictest<\/code> \u3092\u30d9\u30fc\u30b9\u306b tsconfig \u3092\u4f5c\u3063\u3066\u3044\u307e\u3059.<\/p>\n<pre class=\"code lang-typescript\" data-lang=\"typescript\" data-unlink=\"\">\n<span class=\"synSpecial\">import<\/span> config <span class=\"synSpecial\">from<\/span> <span class=\"synConstant\">'@tsconfig\/strictest\/tsconfig.json'<\/span> <span class=\"synIdentifier\">assert<\/span> <span class=\"synIdentifier\">{<\/span> <span class=\"synStatement\">type<\/span>: <span class=\"synConstant\">'json'<\/span> <span class=\"synIdentifier\">}<\/span>\n<span class=\"synSpecial\">import<\/span> defu <span class=\"synSpecial\">from<\/span> <span class=\"synConstant\">'defu'<\/span>\n<span class=\"synIdentifier\">const<\/span> fixedTsConfig = defu(\n  <span class=\"synIdentifier\">{<\/span>\n    <span class=\"synStatement\">compilerOptions<\/span>: <span class=\"synIdentifier\">{<\/span>\n      \n      <span class=\"synStatement\">exactOptionalPropertyTypes<\/span>: <span class=\"synConstant\">false<\/span>,\n    <span class=\"synIdentifier\">}<\/span>,\n  <span class=\"synIdentifier\">}<\/span>,\n  tsConfig,\n)\n<span class=\"synSpecial\">export<\/span> <span class=\"synStatement\">default<\/span> defineNuxtConfig(<span class=\"synIdentifier\">{<\/span>\n  <span class=\"synStatement\">typescript<\/span>: <span class=\"synIdentifier\">{<\/span>\n    <span class=\"synStatement\">tsConfig<\/span>: fixedTsConfig,\n  <span class=\"synIdentifier\">}<\/span>\n<span class=\"synIdentifier\">}<\/span>)\n<\/pre>\n<pre class=\"code lang-typescript\" data-lang=\"typescript\" data-unlink=\"\">\n<span class=\"synSpecial\">export<\/span> <span class=\"synStatement\">default<\/span> defineNuxtConfig(<span class=\"synIdentifier\">{<\/span>\n  <span class=\"synStatement\">extends<\/span>: <span class=\"synIdentifier\">[<\/span><span class=\"synConstant\">'..\/base'<\/span><span class=\"synIdentifier\">]<\/span>\n<span class=\"synIdentifier\">}<\/span>)\n<\/pre>\n<p>\u3053\u306e\u69cb\u6210\u3067 project \u5074\u306e <code>.nuxt<\/code> \u914d\u4e0b\u306e tsconfig \u3092\u898b\u3066\u307f\u308b\u3068\u4ee5\u4e0b\u306e\u901a\u308a\u751f\u6210\u3055\u308c\u3066\u3044\u307e\u3059.<\/p>\n<pre class=\"code lang-typescript\" data-lang=\"typescript\" data-unlink=\"\"><span class=\"synIdentifier\">{<\/span>\n  <span class=\"synConstant\">\"compilerOptions\"<\/span>: <span class=\"synIdentifier\">{<\/span>\n    \n    <span class=\"synConstant\">\"esModuleInterop\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"skipLibCheck\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"target\"<\/span>: <span class=\"synConstant\">\"ESNext\"<\/span>,\n    <span class=\"synConstant\">\"allowJs\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"resolveJsonModule\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"moduleDetection\"<\/span>: <span class=\"synConstant\">\"force\"<\/span>,\n    <span class=\"synConstant\">\"isolatedModules\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"verbatimModuleSyntax\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"strict\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"noUncheckedIndexedAccess\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"forceConsistentCasingInFileNames\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"noImplicitOverride\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"module\"<\/span>: <span class=\"synConstant\">\"preserve\"<\/span>,\n    <span class=\"synConstant\">\"noEmit\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"lib\"<\/span>: <span class=\"synIdentifier\">[<\/span>\n      <span class=\"synConstant\">\"ESNext\"<\/span>,\n      <span class=\"synConstant\">\"dom\"<\/span>,\n      <span class=\"synConstant\">\"dom.iterable\"<\/span>,\n      <span class=\"synConstant\">\"webworker\"<\/span>\n    <span class=\"synIdentifier\">]<\/span>,\n    <span class=\"synConstant\">\"jsx\"<\/span>: <span class=\"synConstant\">\"preserve\"<\/span>,\n    <span class=\"synConstant\">\"jsxImportSource\"<\/span>: <span class=\"synConstant\">\"vue\"<\/span>,\n    <span class=\"synConstant\">\"types\"<\/span>: <span class=\"synIdentifier\">[]<\/span>,\n    <span class=\"synConstant\">\"moduleResolution\"<\/span>: <span class=\"synConstant\">\"Bundler\"<\/span>,\n    <span class=\"synConstant\">\"useDefineForClassFields\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"noImplicitThis\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"allowSyntheticDefaultImports\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"allowUnusedLabels\"<\/span>: <span class=\"synConstant\">false<\/span>,\n    <span class=\"synConstant\">\"allowUnreachableCode\"<\/span>: <span class=\"synConstant\">false<\/span>,\n    <span class=\"synConstant\">\"exactOptionalPropertyTypes\"<\/span>: <span class=\"synConstant\">false<\/span>,\n    <span class=\"synConstant\">\"noFallthroughCasesInSwitch\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"noImplicitReturns\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"noPropertyAccessFromIndexSignature\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"noUnusedLocals\"<\/span>: <span class=\"synConstant\">true<\/span>,\n    <span class=\"synConstant\">\"noUnusedParameters\"<\/span>: <span class=\"synConstant\">true<\/span>\n  <span class=\"synIdentifier\">}<\/span>\n<span class=\"synIdentifier\">}<\/span>\n<\/pre>\n<p>\u3061\u306a\u307f\u306b, tsconfig \u306e\u8a2d\u5b9a\u306a\u3057\u3068\u6bd4\u8f03\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u901a\u308a\u3067, <code>@tsconfig\/strictest<\/code> \u7531\u6765\u306e\u8a2d\u5b9a\u304c\u3057\u3063\u304b\u308a\u53cd\u6620\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u308f\u304b\u308a\u307e\u3059.<\/p>\n<pre class=\"code lang-diff\" data-lang=\"diff\" data-unlink=\"\"> {\n   \"compilerOptions\": {\n     \/\/ ...\n     \"esModuleInterop\": true,\n     \"skipLibCheck\": true,\n     \"target\": \"ESNext\",\n     \"allowJs\": true,\n     \"resolveJsonModule\": true,\n     \"moduleDetection\": \"force3\",\n     \"isolatedModules\": true,\n     \"verbatimModuleSyntax\": true,\n     \"strict\": true,\n     \"noUncheckedIndexedAccess\": true,\n     \"forceConsistentCasingInFileNames\": true,\n     \"noImplicitOverride\": true,\n     \"module\": \"preserve\",\n     \"noEmit\": true,\n     \"lib\": [\n       \"ESNext\",\n       \"dom\",\n       \"dom.iterable\",\n       \"webworker\"\n     ],\n     \"jsx\": \"preserve\",\n     \"jsxImportSource\": \"vue\",\n     \"types\": [],\n     \"moduleResolution\": \"Bundler\",\n     \"useDefineForClassFields\": true,\n     \"noImplicitThis\": true,\n     \"allowSyntheticDefaultImports\": true\n<span class=\"synIdentifier\">+    \"allowUnusedLabels\": false,<\/span>\n<span class=\"synIdentifier\">+    \"allowUnreachableCode\": false,<\/span>\n<span class=\"synIdentifier\">+    \"exactOptionalPropertyTypes\": false,<\/span>\n<span class=\"synIdentifier\">+    \"noFallthroughCasesInSwitch\": true,<\/span>\n<span class=\"synIdentifier\">+    \"noImplicitReturns\": true,<\/span>\n<span class=\"synIdentifier\">+    \"noPropertyAccessFromIndexSignature\": true,<\/span>\n<span class=\"synIdentifier\">+    \"noUnusedLocals\": true,<\/span>\n<span class=\"synIdentifier\">+    \"noUnusedParameters\": true<\/span>\n   },\n }\n<\/pre>\n<p>\u3053\u306e\u3088\u3046\u306a\u5909\u66f4\u3092\u52a0\u3048\u308b\u306e\u306f Nuxt Module \u3067\u3082\u304a\u305d\u3089\u304f\u53ef\u80fd\u3067\u3059\u304c, nuxt config \u306e\u8a2d\u5b9a\u3092\u7d99\u627f\u3059\u308b\u65b9\u91dd\u306e\u307b\u3046\u304c, \u76f4\u611f\u7684\u3067\u3057\u3087\u3046.<br \/>\u4f3c\u305f\u3088\u3046\u306a\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u3067, <code>@nuxt\/eslint<\/code> \u306a\u3069\u306e\u30c4\u30fc\u30eb\u30c1\u30a7\u30fc\u30f3\u8a2d\u5b9a\u306e\u5171\u901a\u5316\u306b\u3082\u5f79\u7acb\u3066\u305d\u3046\u3067\u3059.<\/p>\n<h4 id=\"TailwindCSS-\u8a2d\u5b9a\u306e\u5171\u901a\u5316\">TailwindCSS \u8a2d\u5b9a\u306e\u5171\u901a\u5316<\/h4>\n<p>\u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3084\u30ec\u30a4\u30a2\u30a6\u30c8\u30b7\u30b9\u30c6\u30e0\u3092\u5171\u901a\u3067\u5b9a\u7fa9\u3057\u305f\u3044\u6642, TailwindCSS \u3092\u5229\u7528\u3059\u308b\u5834\u5408\u304c\u591a\u3044\u3068\u601d\u3044\u307e\u3059.<\/p>\n<p>\u3053\u3053\u3067\u306e\u60f3\u5b9a\u306f, \u5171\u901a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068, \u305d\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u306b TailwindCSS (v4) \u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u5834\u5408\u3068\u3057\u3066, \u30d9\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u69cb\u6210\u306b\u306a\u3063\u3066\u3044\u308b\u3068\u3057\u307e\u3059.<\/p>\n<pre class=\"code text\" data-lang=\"text\" data-unlink=\"\">\/base-project\n\u251c \/app\n\u2502  \u251c \/assets\n\u2502  \u2502  \u251c \/css\/tailwind.css  .. tailwindcss \u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\n\u2502  \u251c \/components           .. \u5171\u901a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n\u251c nuxt.config.ts<\/pre>\n<p>NuxtLayer \u3067\u3082 \u5171\u901a\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u7528\u610f\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u3059\u304c, TailwindCSS (v4) \u306e\u5834\u5408\u306f\u4ee5\u4e0b\u306e\u554f\u984c\u304c\u3042\u308a\u307e\u3057\u305f.<\/p>\n<ul>\n<li>\/assets \u914d\u4e0b\u306f Nuxt Layer \u306e\u4ed5\u7d44\u307f\u3067\u306f\u7d99\u627f\u5bfe\u8c61\u306b\u306a\u3089\u306a\u3044<\/li>\n<li>TailwindCSS v4 \u304b\u3089\u306f css first configuration \u304c\u30e1\u30a4\u30f3\u306b\u306a\u3063\u3066\u304a\u308a, \u305d\u3082\u305d\u3082\u30b3\u30f3\u30d5\u30a3\u30b0\u7528\u306e js \u3092\u6975\u529b\u4f5c\u308b\u3079\u304d\u3067\u306f\u306a\u3044<\/li>\n<li><code>@import \"tailwindcss\"<\/code> \u306e\u3088\u3046\u306a\u8a2d\u5b9a\u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u8a18\u8f09\u3059\u308b\u304c, \u3053\u308c\u306f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30eb\u30fc\u30c8\u914d\u4e0b\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306b\u5bfe\u3057\u3066\u9759\u7684\u89e3\u6790\u3092\u3059\u308b\u65b9\u5f0f\u306b\u306a\u308b. node_modules \u914d\u4e0b\u306f\u5bfe\u8c61\u306b\u306a\u3089\u306a\u3044<\/li>\n<\/ul>\n<p>\u3064\u307e\u308b\u3068\u3053\u308d, \u30d9\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e TailwindCSS \u306e\u8a2d\u5b9a\u306f\u7d99\u627f\u3055\u308c\u305a, npm \u30d1\u30c3\u30b1\u30fc\u30b8\u3068\u3057\u3066\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u3055\u3089\u306b, TailwindCSS \u306e\u89e3\u6790\u5bfe\u8c61\u306b\u306a\u3089\u306a\u3044, \u3068\u3044\u3046\u554f\u984c\u304c\u3042\u308a\u307e\u3059. \u3068\u306f\u3044\u3048 npm \u30d1\u30c3\u30b1\u30fc\u30b8\u5316\u3057\u3066\u304a\u3044\u305f\u307b\u3046\u304c, \u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u306e\u7ba1\u7406\u306e\u5bb9\u6613\u6027\u306a\u3069, \u306a\u306b\u304b\u3068\u5229\u7528\u6642\u306b\u4fbf\u5229\u3067\u3042\u308b\u305f\u3081, \u3046\u3061\u3067\u306f\u907f\u3051\u3066\u901a\u308c\u306a\u3044\u554f\u984c\u306b\u306a\u3063\u3066\u3044\u307e\u3057\u305f.<\/p>\n<p>\u307e\u305a\u7406\u60f3\u3068\u3057\u3066 TailwindCSS \u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3068\u306a\u308b css \u30d5\u30a1\u30a4\u30eb\u304c\u3069\u3046\u3042\u308b\u3079\u304d\u304b\u3092\u5148\u306b\u63d0\u793a\u3057\u307e\u3059.<\/p>\n<pre class=\"code lang-css\" data-lang=\"css\" data-unlink=\"\">\/\/ (current-project)\/app\/assets\/css\/tailwind<span class=\"synIdentifier\">.css<\/span>\n\/\/ \u9759\u7684\u89e3\u6790\u5bfe\u8c61\u306e\u30d1\u30b9\u3092\u660e\u793a\u7684\u306b\u6307\u5b9a\u3059\u308b\u305f\u3081<span class=\"synSpecial\">,<\/span> <span class=\"synStatement\">source<\/span>(none) \u3068\u3059\u308b\n<span class=\"synPreProc\">@import <\/span><span class=\"synConstant\">\"tailwindcss\"<\/span><span class=\"synPreProc\"> source(none)<\/span>; \n\/\/ \u30e1\u30a4\u30f3\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3078\u306e\u30d1\u30b9\n@<span class=\"synStatement\">source<\/span> <span class=\"synConstant\">\"\/Users\/mewton\/Workspace\/current-project\/app\"<\/span>;\n\/\/ \u30d9\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30d1\u30b9\n@<span class=\"synStatement\">source<\/span> <span class=\"synConstant\">\"\/Users\/mewton\/Workspace\/current-project\/node_modules\/base-project\/app\"<\/span>;\n\/\/ \u3053\u3053\u304b\u3089\u5148\u306f @theme \u306a\u3069\u306e\u4ed6\u306e\u8a2d\u5b9a\u304c\u8a18\u8f09\u3055\u308c\u308b\n<\/pre>\n<p>\u5bfe\u5fdc\u3059\u3079\u304d\u65b9\u91dd\u306f\u4ee5\u4e0b\u306e\u901a\u308a<\/p>\n<ul>\n<li>TailwindCSS \u304c\u9759\u7684\u89e3\u6790\u306e\u5bfe\u8c61\u3068\u3059\u308b\u30d1\u30b9\u3092\u52d5\u7684\u306b, <code>@source<\/code> \u3068\u3057\u3066\u6307\u5b9a\u3059\u308b.<\/li>\n<li>\u52d5\u7684\u306b\u751f\u6210\u3057\u305f css \u30d5\u30a1\u30a4\u30eb\u3092 nuxt \u306e\u8a2d\u5b9a\u306b\u7d44\u307f\u8fbc\u3080.<\/li>\n<\/ul>\n<p>\u3053\u308c\u306b\u5bfe\u5fdc\u3059\u3079\u304f, \u30d9\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e nuxt.config.ts \u306f\u4ee5\u4e0b\u306e\u901a\u308a\u306b\u3057\u3066\u3044\u307e\u3059. \u52d5\u7684\u306a\u51e6\u7406\u306b\u95a2\u3057\u3066\u306f\u3069\u3046\u3057\u3066\u3082 Nuxt Layer \u3067\u306f\u306a\u304f Nuxt Module \u3092\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u306d.<\/p>\n<pre class=\"code lang-javascript\" data-lang=\"javascript\" data-unlink=\"\">\n<span class=\"synPreProc\">import<\/span> <span class=\"synSpecial\">{<\/span> readFile <span class=\"synSpecial\">}<\/span> <span class=\"synPreProc\">from<\/span> <span class=\"synConstant\">'node:fs\/promises'<\/span>\n<span class=\"synPreProc\">import<\/span> <span class=\"synSpecial\">{<\/span> dirname<span class=\"synStatement\">,<\/span> resolve <span class=\"synSpecial\">}<\/span> <span class=\"synPreProc\">from<\/span> <span class=\"synConstant\">'node:path'<\/span>\n<span class=\"synPreProc\">import<\/span> <span class=\"synSpecial\">{<\/span> fileURLToPath <span class=\"synSpecial\">}<\/span> <span class=\"synPreProc\">from<\/span> <span class=\"synConstant\">'node:url'<\/span>\n<span class=\"synPreProc\">import<\/span> <span class=\"synSpecial\">{<\/span> addTemplate<span class=\"synStatement\">,<\/span> defineNuxtModule <span class=\"synSpecial\">}<\/span> <span class=\"synPreProc\">from<\/span> <span class=\"synConstant\">'@nuxt\/kit'<\/span>\n<span class=\"synPreProc\">import<\/span> tailwindcss <span class=\"synPreProc\">from<\/span> <span class=\"synConstant\">'@tailwindcss\/vite'<\/span>\n<span class=\"synPreProc\">import<\/span> <span class=\"synSpecial\">{<\/span> defineNuxtConfig <span class=\"synSpecial\">}<\/span> <span class=\"synPreProc\">from<\/span> <span class=\"synConstant\">'nuxt\/config'<\/span>\n<span class=\"synType\">const<\/span> currentDir <span class=\"synStatement\">=<\/span> <span class=\"synIdentifier\">dirname<\/span><span class=\"synSpecial\">(<\/span><span class=\"synIdentifier\">fileURLToPath<\/span><span class=\"synSpecial\">(<\/span>import<span class=\"synStatement\">.<\/span>meta<span class=\"synStatement\">.<\/span>url<span class=\"synSpecial\">))<\/span>\n\n\n\n<span class=\"synStatement\">function<\/span> <span class=\"synIdentifier\">extractImports<\/span><span class=\"synSpecial\">(<\/span>css: string<span class=\"synSpecial\">)<\/span>: <span class=\"synSpecial\">{<\/span>\n  <span class=\"synIdentifier\">result<\/span><span class=\"synStatement\">:<\/span> string\n  <span class=\"synIdentifier\">importedModules<\/span><span class=\"synStatement\">:<\/span> string<span class=\"synSpecial\">[]<\/span>\n<span class=\"synSpecial\">}<\/span> <span class=\"synSpecial\">{<\/span>\n  \n\n\n  <span class=\"synType\">const<\/span> importRegex <span class=\"synStatement\">=<\/span> <span class=\"synSpecial\">\/<\/span><span class=\"synConstant\">@import<\/span><span class=\"synType\">\\s<\/span><span class=\"synStatement\">+<\/span><span class=\"synConstant\">\"<\/span><span class=\"synType\">([<\/span><span class=\"synStatement\">^<\/span><span class=\"synConstant\">\"<\/span><span class=\"synType\">]<\/span><span class=\"synStatement\">+<\/span><span class=\"synType\">)<\/span><span class=\"synConstant\">\"<\/span><span class=\"synType\">(?:\\s<\/span><span class=\"synStatement\">*<\/span><span class=\"synConstant\">.<\/span><span class=\"synStatement\">*<\/span><span class=\"synType\">)<\/span><span class=\"synStatement\">?<\/span><span class=\"synConstant\">;<\/span><span class=\"synSpecial\">\/<\/span><span class=\"synType\">g<\/span>\n  <span class=\"synType\">const<\/span> matches <span class=\"synStatement\">=<\/span> css<span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">match<\/span><span class=\"synSpecial\">(<\/span>importRegex<span class=\"synSpecial\">)<\/span>\n  <span class=\"synStatement\">if<\/span> <span class=\"synSpecial\">(<\/span>matches<span class=\"synSpecial\">)<\/span> <span class=\"synSpecial\">{<\/span>\n    <span class=\"synType\">const<\/span> importedModules <span class=\"synStatement\">=<\/span> matches<span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">map<\/span><span class=\"synSpecial\">((<\/span>match<span class=\"synSpecial\">)<\/span> <span class=\"synStatement\">=&gt;<\/span>\n      match<span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">replace<\/span><span class=\"synSpecial\">(<\/span><span class=\"synConstant\">'@import \"'<\/span><span class=\"synStatement\">,<\/span> <span class=\"synConstant\">''<\/span><span class=\"synSpecial\">)<\/span><span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">replace<\/span><span class=\"synSpecial\">(<\/span><span class=\"synConstant\">'\"'<\/span><span class=\"synStatement\">,<\/span> <span class=\"synConstant\">''<\/span><span class=\"synSpecial\">)<\/span><span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">replace<\/span><span class=\"synSpecial\">(<\/span><span class=\"synConstant\">';'<\/span><span class=\"synStatement\">,<\/span> <span class=\"synConstant\">''<\/span><span class=\"synSpecial\">)<\/span><span class=\"synStatement\">,<\/span>\n    <span class=\"synSpecial\">)<\/span>\n    <span class=\"synStatement\">return<\/span> <span class=\"synSpecial\">{<\/span> <span class=\"synIdentifier\">result<\/span><span class=\"synStatement\">:<\/span> css<span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">replace<\/span><span class=\"synSpecial\">(<\/span>importRegex<span class=\"synStatement\">,<\/span> <span class=\"synConstant\">''<\/span><span class=\"synSpecial\">)<\/span><span class=\"synStatement\">,<\/span> importedModules <span class=\"synSpecial\">}<\/span>\n  <span class=\"synSpecial\">}<\/span>\n  <span class=\"synStatement\">return<\/span> <span class=\"synSpecial\">{<\/span> <span class=\"synIdentifier\">result<\/span><span class=\"synStatement\">:<\/span> css<span class=\"synStatement\">,<\/span> <span class=\"synIdentifier\">importedModules<\/span><span class=\"synStatement\">:<\/span> <span class=\"synSpecial\">[]<\/span> <span class=\"synSpecial\">}<\/span>\n<span class=\"synSpecial\">}<\/span>\n\n\n\n<span class=\"synType\">const<\/span> tailwindCustomModule <span class=\"synStatement\">=<\/span> <span class=\"synIdentifier\">defineNuxtModule<\/span><span class=\"synSpecial\">(<\/span><span class=\"synStatement\">async<\/span> <span class=\"synSpecial\">(<\/span>_opt<span class=\"synStatement\">,<\/span> nuxt<span class=\"synSpecial\">)<\/span> <span class=\"synStatement\">=&gt;<\/span> <span class=\"synSpecial\">{<\/span>\n  <span class=\"synType\">const<\/span> baseStyle <span class=\"synStatement\">=<\/span> <span class=\"synStatement\">await<\/span> <span class=\"synIdentifier\">readFile<\/span><span class=\"synSpecial\">(<\/span>\n    <span class=\"synConstant\">`<\/span><span class=\"synSpecial\">${<\/span>currentDir<span class=\"synSpecial\">}<\/span><span class=\"synConstant\">\/app\/assets\/css\/tailwind.css`<\/span><span class=\"synStatement\">,<\/span>\n    <span class=\"synConstant\">'utf-8'<\/span><span class=\"synStatement\">,<\/span>\n  <span class=\"synSpecial\">)<\/span>\n  <span class=\"synType\">const<\/span> <span class=\"synSpecial\">{<\/span> result<span class=\"synStatement\">:<\/span> fixedBaseStyle<span class=\"synStatement\">,<\/span> importedModules <span class=\"synSpecial\">}<\/span> <span class=\"synStatement\">=<\/span> <span class=\"synIdentifier\">extractImports<\/span><span class=\"synSpecial\">(<\/span>baseStyle<span class=\"synSpecial\">)<\/span>\n  \n\n\n  <span class=\"synType\">const<\/span> tailwindAdditionalModules <span class=\"synStatement\">=<\/span> importedModules<span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">filter<\/span><span class=\"synSpecial\">(<\/span>\n    <span class=\"synSpecial\">(<\/span><span class=\"synConstant\">module<\/span><span class=\"synSpecial\">)<\/span> <span class=\"synStatement\">=&gt;<\/span> <span class=\"synConstant\">module<\/span> <span class=\"synStatement\">!<\/span>== <span class=\"synConstant\">'tailwindcss'<\/span><span class=\"synStatement\">,<\/span>\n  <span class=\"synSpecial\">)<\/span>\n  \n\n\n  <span class=\"synType\">const<\/span> allLayersAppDir: string<span class=\"synSpecial\">[]<\/span> = nuxt<span class=\"synStatement\">.<\/span>options<span class=\"synStatement\">.<\/span>_layers<span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">map<\/span><span class=\"synSpecial\">(<\/span>\n    <span class=\"synSpecial\">({<\/span> config <span class=\"synSpecial\">})<\/span> <span class=\"synStatement\">=&gt;<\/span> config<span class=\"synStatement\">.<\/span>srcDir<span class=\"synStatement\">,<\/span>\n  <span class=\"synSpecial\">)<\/span>\n  \n\n\n  <span class=\"synType\">const<\/span> cssAsset <span class=\"synStatement\">=<\/span> <span class=\"synIdentifier\">addTemplate<\/span><span class=\"synSpecial\">({<\/span>\n    <span class=\"synIdentifier\">filename<\/span><span class=\"synStatement\">:<\/span> <span class=\"synConstant\">'layers\/base-project-name\/tailwind.css'<\/span><span class=\"synStatement\">,<\/span>\n    <span class=\"synIdentifier\">getContents<\/span><span class=\"synStatement\">:<\/span> <span class=\"synSpecial\">()<\/span> <span class=\"synStatement\">=&gt;<\/span> <span class=\"synConstant\">`<\/span>\n<span class=\"synConstant\">@import \"tailwindcss\" source(none);<\/span>\n<span class=\"synConstant\">${tailwindAdditionalModules.map((module) =&gt; `<\/span>@import <span class=\"synConstant\">\"${module}\"<\/span>;`).<span class=\"synIdentifier\">join<\/span><span class=\"synSpecial\">(<\/span>'\\n'<span class=\"synSpecial\">)}<\/span>\n$<span class=\"synSpecial\">{<\/span>allLayersAppDir<span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">map<\/span><span class=\"synSpecial\">((<\/span>source<span class=\"synSpecial\">)<\/span> <span class=\"synStatement\">=&gt;<\/span> <span class=\"synConstant\">`@source \"<\/span><span class=\"synSpecial\">${<\/span>source<span class=\"synSpecial\">}<\/span><span class=\"synConstant\">\";`<\/span><span class=\"synSpecial\">)<\/span><span class=\"synStatement\">.<\/span><span class=\"synIdentifier\">join<\/span><span class=\"synSpecial\">(<\/span><span class=\"synConstant\">'\\n'<\/span><span class=\"synSpecial\">)}<\/span>\n$<span class=\"synSpecial\">{<\/span>fixedBaseStyle<span class=\"synSpecial\">}<\/span><span class=\"synConstant\">`,<\/span>\n<span class=\"synConstant\">    write: true,<\/span>\n<span class=\"synConstant\">  })<\/span>\n<span class=\"synConstant\">  \/**<\/span>\n<span class=\"synConstant\">   * nuxt \u306e\u8a2d\u5b9a\u306b, \u52d5\u7684\u751f\u6210\u3055\u308c\u305f css \u3092\u8ffd\u52a0\u3059\u308b<\/span>\n<span class=\"synConstant\">   *\/<\/span>\n<span class=\"synConstant\">  nuxt.options.css.unshift(cssAsset.dst)<\/span>\n<span class=\"synConstant\">})<\/span>\n<span class=\"synConstant\">export default defineNuxtConfig({<\/span>\n<span class=\"synConstant\">  vite: {<\/span>\n<span class=\"synConstant\">    plugins: [tailwindcss()],<\/span>\n<span class=\"synConstant\">  },<\/span>\n<span class=\"synConstant\">  modules: [tailwindCustomModule],<\/span>\n<span class=\"synConstant\">})<\/span>\n<\/pre>\n<p>\u5229\u7528\u5074\u306f tailwind \u306b\u95a2\u3059\u308b\u8a2d\u5b9a\u3092\u610f\u8b58\u3059\u308b\u3053\u3068\u306a\u304f, \u5171\u901a\u8a2d\u5b9a\u306b\u3088\u308b class \u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059. \u30c7\u30b6\u30a4\u30f3\u30b7\u30b9\u30c6\u30e0\u3084\u30ec\u30a4\u30a2\u30a6\u30c8\u30b7\u30b9\u30c6\u30e0\u306a\u3069, \u5171\u901a\u306e\u30c8\u30f3\u30de\u30ca\u3092\u63c3\u3048\u305f\u3044\u5834\u5408\u306b, \u304b\u306a\u308a\u4fbf\u5229\u3067\u3059\u306d.<\/p>\n<h2 id=\"\u307e\u3068\u3081\">\u307e\u3068\u3081<\/h2>\n<p>Nuxt Layer \u3092\u4f7f\u3063\u3066\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u8a2d\u5b9a\u5171\u901a\u5316\u3057\u3066\u3044\u308b\u30b5\u30f3\u30d7\u30eb\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3057\u305f.<br \/>\u3082\u3063\u3068\u8a70\u3081\u308c\u3070, Nuxt \u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u7acb\u3061\u4e0a\u3052\u3092\u7206\u901f\u306b\u3067\u304d\u305d\u3046\u3067, \u5922\u304c\u5e83\u304c\u308b\u611f\u3058\u304c\u3057\u307e\u3059.<\/p>\n<p>\u307e\u3060\u8a66\u305b\u3066\u306a\u3044\u3067\u3059\u304c, sentry \u306e\u8a2d\u5b9a\u5171\u901a\u5316\u3084, biome \u306a\u3069\u306e\u9759\u7684\u89e3\u6790\u30c4\u30fc\u30eb\u306e\u5171\u901a\u5316\u306a\u3069, \u69d8\u3005\u306a\u624b\u6bb5\u304c\u3068\u308c\u305d\u3046\u3067\u3059\u306d.<\/p>\n<\/div>\n<p><script>(function(d, s, id) {\n  var js, fjs = d.getElementsByTagName(s)[0];\n  if (d.getElementById(id)) return;\n  js = d.createElement(s); js.id = id;\n  js.src = \"\/\/connect.facebook.net\/ja_JP\/sdk.js#xfbml=1&appId=719729204785177&version=v17.0\";\n  fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));<\/script><br \/>\n<br \/>\n<br \/><a href=\"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000\">\u5143\u306e\u8a18\u4e8b\u3092\u78ba\u8a8d\u3059\u308b <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u3053\u306e\u8a18\u4e8b\u306f\u00a0hacomono Advent Calendar 2025\u00a0\u306e6\u65e5\u76ee\u306e\u8a18\u4e8b\u3067\u3059 \u307f\u3085\u30fc\u3068\u3093\u3067\u3059. \u30a2\u30c9\u30ab\u30ec 6\u65e5\u76ee\u3067\u3059.hacomono \u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc\u3067\u306f\u4eca\u56de 3 \u56de\u306e\u30ce\u30eb\u30de\u304c\u3042\u308b\u306e\u3067\u9811\u5f35\u308a\u307e\u3059. \u73fe [&hellip;]","protected":false},"author":1,"featured_media":26618,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-26617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-company-tec"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"og:description\" content=\"\u3053\u306e\u8a18\u4e8b\u306f\u00a0hacomono Advent Calendar 2025\u00a0\u306e6\u65e5\u76ee\u306e\u8a18\u4e8b\u3067\u3059 \u307f\u3085\u30fc\u3068\u3093\u3067\u3059. \u30a2\u30c9\u30ab\u30ec 6\u65e5\u76ee\u3067\u3059.hacomono \u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc\u3067\u306f\u4eca\u56de 3 \u56de\u306e\u30ce\u30eb\u30de\u304c\u3042\u308b\u306e\u3067\u9811\u5f35\u308a\u307e\u3059. \u73fe [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000\" \/>\n<meta property=\"og:site_name\" content=\"\u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-05T21:44:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/12\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1300\" \/>\n\t<meta property=\"og:image:height\" content=\"731\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"info@pokecon.jp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"info@pokecon.jp\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/26617\\\/\"},\"author\":{\"name\":\"info@pokecon.jp\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"headline\":\"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b\",\"datePublished\":\"2025-12-05T21:44:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/26617\\\/\"},\"wordCount\":78,\"image\":{\"@id\":\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png\",\"articleSection\":[\"\u4f01\u696d\u30c6\u30c3\u30af\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/26617\\\/\",\"url\":\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000\",\"name\":\"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png\",\"datePublished\":\"2025-12-05T21:44:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000#primaryimage\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png\",\"contentUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png\",\"width\":1300,\"height\":731},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/techblog.hacomono.jp\\\/entry\\\/2025\\\/12\\\/06\\\/000000#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\",\"name\":\"\u30dd\u30b1\u30b3\u30f3\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\",\"name\":\"info@pokecon.jp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"caption\":\"info@pokecon.jp\"},\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/author\\\/infopokecon-jp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000","og_locale":"ja_JP","og_type":"article","og_title":"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3","og_description":"\u3053\u306e\u8a18\u4e8b\u306f\u00a0hacomono Advent Calendar 2025\u00a0\u306e6\u65e5\u76ee\u306e\u8a18\u4e8b\u3067\u3059 \u307f\u3085\u30fc\u3068\u3093\u3067\u3059. \u30a2\u30c9\u30ab\u30ec 6\u65e5\u76ee\u3067\u3059.hacomono \u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc\u3067\u306f\u4eca\u56de 3 \u56de\u306e\u30ce\u30eb\u30de\u304c\u3042\u308b\u306e\u3067\u9811\u5f35\u308a\u307e\u3059. \u73fe [&hellip;]","og_url":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000","og_site_name":"\u30dd\u30b1\u30b3\u30f3","article_published_time":"2025-12-05T21:44:25+00:00","og_image":[{"width":1300,"height":731,"url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/12\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png","type":"image\/png"}],"author":"info@pokecon.jp","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"info@pokecon.jp","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"2\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000#article","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/26617\/"},"author":{"name":"info@pokecon.jp","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"headline":"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b","datePublished":"2025-12-05T21:44:25+00:00","mainEntityOfPage":{"@id":"https:\/\/pokecon.jp\/job\/26617\/"},"wordCount":78,"image":{"@id":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/12\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png","articleSection":["\u4f01\u696d\u30c6\u30c3\u30af"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/pokecon.jp\/job\/26617\/","url":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000","name":"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/#website"},"primaryImageOfPage":{"@id":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000#primaryimage"},"image":{"@id":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/12\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png","datePublished":"2025-12-05T21:44:25+00:00","author":{"@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"breadcrumb":{"@id":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000#primaryimage","url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/12\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png","contentUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/12\/https3A2F2Fcdn-ak.f.st-hatena.com2Fimages2Ffotolife2Fh2Fhacomono-tech2F202512042F2025120422.png","width":1300,"height":731},{"@type":"BreadcrumbList","@id":"https:\/\/techblog.hacomono.jp\/entry\/2025\/12\/06\/000000#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/pokecon.jp\/job\/"},{"@type":"ListItem","position":2,"name":"tsconfig \u3084 TailwindCSS \u306a\u3069\u306e\u8a2d\u5b9a\u3092 NuxtLayer \u3092\u4f7f\u3063\u3066\u5171\u901a\u5316\u3059\u308b"}]},{"@type":"WebSite","@id":"https:\/\/pokecon.jp\/job\/#website","url":"https:\/\/pokecon.jp\/job\/","name":"\u30dd\u30b1\u30b3\u30f3","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pokecon.jp\/job\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997","name":"info@pokecon.jp","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","caption":"info@pokecon.jp"},"url":"https:\/\/pokecon.jp\/job\/author\/infopokecon-jp\/"}]}},"_links":{"self":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/26617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/comments?post=26617"}],"version-history":[{"count":1,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/26617\/revisions"}],"predecessor-version":[{"id":26619,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/26617\/revisions\/26619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media\/26618"}],"wp:attachment":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media?parent=26617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/categories?post=26617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/tags?post=26617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}