{"id":1292,"date":"2025-04-30T15:00:11","date_gmt":"2025-04-30T06:00:11","guid":{"rendered":"https:\/\/shinke1987.net\/?p=1292"},"modified":"2025-10-10T21:31:16","modified_gmt":"2025-10-10T12:31:16","slug":"tailwindcss%e3%81%a7%e3%81%ae%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%83%e3%82%af","status":"publish","type":"post","link":"https:\/\/shinke1987.net\/?p=1292","title":{"rendered":"TailwindCSS\u3067\u306e\u30c7\u30b6\u30a4\u30f3\u30b9\u30c8\u30c3\u30af"},"content":{"rendered":"\n<p>CodePen\u697d\u3057\u3044\u3002<\/p>\n\n\n\n<h2 id=\"toc0\" class=\"wp-block-heading\">TailwindCSS\u306e\u307f<\/h2>\n\n\n\n<h3 id=\"toc1\" class=\"wp-block-heading\">\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\uff08\u30d5\u30a9\u30fc\u30ab\u30b9\u6642\u30e9\u30d9\u30eb\u304c\u67a0\u7dda\u4e0a\u306b\u79fb\u52d5\uff09<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"azdwLOb\" data-pen-title=\"TextBox(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/azdwLOb\">\n  TextBox(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h3 id=\"toc2\" class=\"wp-block-heading\">\u5439\u304d\u51fa\u3057<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"KwwvQzZ\" data-pen-title=\"Tooltip(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/KwwvQzZ\">\n  Tooltip(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h3 id=\"toc3\" class=\"wp-block-heading\">\u3075\u308f\u3063\u3068\u6d88\u3048\u308b<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"qEEXjep\" data-pen-title=\"Animation_GraduallyDisapperBox(TailwindCssV4)\" data-preview=\"true\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/qEEXjep\">\n  Animation_GraduallyDisapperBox(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h3 id=\"toc4\" class=\"wp-block-heading\">\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"emmvBXd\" data-pen-title=\"CheckBox(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/emmvBXd\">\n  CheckBox(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h3 id=\"toc5\" class=\"wp-block-heading\">\u30bf\u30d6<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"XJJpPRQ\" data-pen-title=\"Tab(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/XJJpPRQ\">\n  Tab(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h2 id=\"toc6\" class=\"wp-block-heading\">TailwindCSS + React(TS)<\/h2>\n\n\n\n<h3 id=\"toc7\" class=\"wp-block-heading\">\u30d1\u30b9\u30ef\u30fc\u30c9\u5165\u529b\u7528\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"azzwQWp\" data-pen-title=\"InputPassword(TS)(React)(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/azzwQWp\">\n  InputPassword(TS)(React)(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h3 id=\"toc8\" class=\"wp-block-heading\">\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"azzJxNP\" data-pen-title=\"SelectBox(TS)(React)(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/azzJxNP\">\n  SelectBox(TS)(React)(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h2 id=\"toc9\" class=\"wp-block-heading\">TailwindCSS + VanillaJS<\/h2>\n\n\n\n<h3 id=\"toc10\" class=\"wp-block-heading\">\u78ba\u8a8d\u7528\u30e2\u30fc\u30c0\u30eb<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"zxxoEyp\" data-pen-title=\"ConfirmModal_Simple(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/zxxoEyp\">\n  ConfirmModal_Simple(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h3 id=\"toc11\" class=\"wp-block-heading\">\u901a\u77e5\u7528\u30e2\u30fc\u30c0\u30eb<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"YPPGywX\" data-pen-title=\"MessageModal_Simple_(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/YPPGywX\">\n  MessageModal_Simple_(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<h3 id=\"toc12\" class=\"wp-block-heading\">\u30d8\u30c3\u30c0\u30fc\u30e1\u30cb\u30e5\u30fc<\/h3>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"WbbGvQQ\" data-pen-title=\"HeaderMenu(TailwindCssV4)\" data-user=\"shinke1987\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shinke1987\/pen\/WbbGvQQ\">\n  HeaderMenu(TailwindCssV4)<\/a> by shinke1987 (<a href=\"https:\/\/codepen.io\/shinke1987\">@shinke1987<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>CodePen\u697d\u3057\u3044\u3002 TailwindCSS\u306e\u307f \u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\uff08\u30d5\u30a9\u30fc\u30ab\u30b9\u6642\u30e9\u30d9\u30eb\u304c\u67a0\u7dda\u4e0a\u306b\u79fb\u52d5\uff09 See the Pen TextBox(TailwindCssV4) by shinke1987 (@shinke [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,104],"tags":[105,107],"class_list":["post-1292","post","type-post","status-publish","format-standard","hentry","category-javascript","category-react","tag-react","tag-tailwindcss"],"_links":{"self":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1292"}],"version-history":[{"count":7,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1292\/revisions"}],"predecessor-version":[{"id":1397,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1292\/revisions\/1397"}],"wp:attachment":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}