{"id":11556,"date":"2026-10-04T12:29:57","date_gmt":"2026-10-04T03:29:57","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=11556"},"modified":"2026-10-04T14:02:05","modified_gmt":"2026-10-04T05:02:05","slug":"webui-tailwind-nextjs-form-3","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/10\/04\/webui-tailwind-nextjs-form-3\/","title":{"rendered":"[WebUI]Tailwind + nextjs(form) \u2013 3"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \uae00\uc4f0\uae30 \ud560 \ub54c \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \ud3fc \ubd80\ubd84\uc758 UI\ub514\uc790\uc778\uc785\ub2c8\ub2e4.
Below is the UI design for the form section frequently used when writing.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb tailwind\ub294 \uc544\ub798\uc758 \uc6f9\uc0ac\uc774\ud2b8\uc758 \uac80\uc0c9\uc744 \ud1b5\ud574\uc11c \uc790\uc138\ud55c \ub0b4\uc6a9\uc744 \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can find detailed information about Tailwind by searching on the website below.<\/p>\n\n\n\n

\u2714\ufe0f npm run dev\ub85c \uc11c\ubc84\uc2e4\ud589 \ud6c4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000\/form-tailwind \ub610\ub294 http:\/\/localhost:3000\/form-css \ub85c \ub514\uc790\uc778\uc744 \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
After starting the server with npm run dev<\/code>, you can view the design in your browser at http:\/\/localhost:3000\/form-tailwind<\/code> or http:\/\/localhost:3000\/form-css<\/code>.<\/p>\n\n\n\n

https:\/\/tailwindcss.com\/docs\/installation\/using-vite<\/a><\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc804\uccb4 \ucf54\ub4dc\ub294 \uae43\ud5c8\ube0c\uc5d0\uc11c \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can find the full code on GitHub.<\/p>\n\n\n\n

https:\/\/github.com\/gideonslife01\/flm-webui<\/a><\/p>\n\n\n\n

\n\n\n\n

\ud83d\udcc1 main<\/p>\n\n\n\n

\u2714\ufe0f \ucf54\ub4dc \uc81c\uc77c \uc717\ubd80\ubd84\uc73c\ub85c \ub808\uc774\uc544\uc6c3\uacfc \ubc30\uacbd\uc0c9\ub4f1\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.
Configure settings such as the layout and background color at the very top of the code.<\/p>\n\n\n\n

\u2714\ufe0f \ucf54\ub4dc \/ Code<\/p>\n\n\n\n

# Tailwind\n<main className=\"min-h-screen flex items-center justify-center bg-gray-50 p-4\"> \n... ...\n<\/main>\n\n# CSS\n <main className=\"form-page\"> ... ... <\/main>\n      <style>{`\n        \/* \uc804\uccb4 \ud654\uba74 \uac00\uc6b4\ub370 \/ flex center *\/\n        .form-page {\n          min-height: 100vh;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background-color: #f9fafb;\n          padding: 16px;\n        } ... ...\n      <\/style><\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc124\uba85 \/ Description<\/p>\n\n\n\n
— Tailwind<\/p>\n\n\n\n
1)item-center()\uc640 justify-center()\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c flex\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
Use flex to utilize item-center()<\/code> and justify-center()<\/code>.<\/p>\n\n\n\n
2)bg-gray-50\uc740 \ubc31\uadf8\ub77c\uc6b4\ub4dc \uceec\ub7ec p-4\ub294 main\ud0dc\uadf8 \ud328\ub529\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.
bg-gray-50<\/code> applies the background color, and p-4<\/code> applies padding to the main<\/code> tag.<\/p>\n\n\n\n
3)min-h-screen\ub294 \ucd5c\uc18c\ub192\uc774\ub85c \ud654\uba74 \ub192\uc774\ub9cc\ud07c\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.
min-h-screen<\/code> sets the minimum height to the height of the screen.<\/p>\n\n\n\n
— CSS<\/p>\n\n\n\n
1) Tailwind\uc640 \ub3d9\uc77c\ud55c \uc694\uc18c\ub294  display: flext;, align-itmes: center;justify-content : center; \uc785\ub2c8\ub2e4.
The elements equivalent to Tailwind are display: flex;, align-items: center;, and justify-content: center;.<\/p>\n\n\n\n
2) CSS\uc5d0\uc11c \ud328\ub529\uc740 padding:16px, \ubc30\uacbd\uc0c9\uc740 background-color: #f9fafb;
In CSS, the padding is padding: 16px;<\/code> and the background color is background-color: #f9fafb;<\/code>.<\/p>\n\n\n\n
3)CSS\uc5d0\uc11c min-h-screen\uc740 min-height: 100vh; \uc785\ub2c8\ub2e4. 
In CSS, min-h-screen<\/code> corresponds to min-height: 100vh;<\/code>.<\/p>\n\n\n\n
\ud83d\udcc1 input<\/p>\n\n\n\n
\u2714\ufe0f \ud3fc \uc694\uc18c\ub85c \uc774\ub984 \uc774\uba54\uc77c \ubd80\ubd84\uc785\ub2c8\ub2e4.
These are the name and email form elements.<\/p>\n\n\n\n
\u2714\ufe0f \ucf54\ub4dc \/ Code<\/p>\n\n\n\n
 # Tailwind        \n     {\/* \uc774\ub984 \/ Name Input *\/}\n            <input\n              value={form.name}\n              onChange={(e) => setForm({...form, name: e.target.value})}\n              placeholder=\"\ud64d\uae38\ub3d9\/John Doe\"\n              className=\"w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all\"\n            \/>\n\n          {\/* \uc774\uba54\uc77c \/ Email Input *\/}\n            <input\n              type=\"email\"\n              value={form.email}\n              onChange={(e) => setForm({...form, email: e.target.value})}\n              placeholder=\"example@email.com\"\n              className=\"w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all\"\n            \/>\n          <\/div>\n\n# CSS\n       {\/* \uc774\ub984 \/ Name Input *\/}\n              <input\n                value={form.name}\n                onChange={(e) => setForm({...form, name: e.target.value})}\n                placeholder=\"\ud64d\uae38\ub3d9\/John Doe\"\n                className=\"input\"\n              \/>\n\n       {\/* \uc774\uba54\uc77c \/ Email Input *\/}\n              <input\n                type=\"email\"\n                value={form.email}\n                onChange={(e) => setForm({...form, email: e.target.value})}\n                placeholder=\"example@email.com\"\n                className=\"input\"\n              \/>\n\n      <style>{` ... ...\n        \/* \uc785\ub825\uce78 \/ input *\/\n        .input {\n          width: 100%;\n          padding: 12px 16px;\n          background-color: #f9fafb;\n          border: 1px solid #e5e7eb;\n          border-radius: 12px;\n          font-size: 14px;\n          outline: none;\n          transition: all 0.2s;\n          box-sizing: border-box;\n        }\n        .input:focus {\n          background-color: white;\n          border-color: #3b82f6;\n          box-shadow: 0 0 0 2px rgba(59,130,246,0.3);\n        }\n\n    ... ... `}<\/style><\/code><\/pre>\n\n\n\n
\u2714\ufe0f \uc124\uba85 \/ Description<\/p>\n\n\n\n
— Tailwind & CSS<\/p>\n\n\n\n
1) \ud06c\uae30\uc640 \uc5ec\ubc31 \/ Size & Spacing<\/p>\n\n\n\n
    \n
  • w-full width: 100% 
    — \ubd80\ubaa8 \ub108\ube44 \uaf49 \ucc44\uc6b0\uae30 \/ Fill parent width<\/li>\n\n\n\n
  • px-4 = padding-left: 16px; padding-right: 16px 
    — \uc88c\uc6b0 \uc548\ucabd \uc5ec\ubc31 \/ left and right inner margins<\/li>\n\n\n\n
  • py-3 = padding-top: 12px; padding-bottom: 12px 
    — \uc704 \uc544\ub798 \uc548\ucabd \uc5ec\ubc31 \/ Top and bottom inner margins<\/li>\n<\/ul>\n\n\n\n
    2) \uc0c9\uacfc \ud14c\ub450\ub9ac \/ Color & Border<\/p>\n\n\n\n
      \n
    • bg-gray-50 = background: #f9fafb 
      — \uac70\uc758 \ud770\uc0c9\uc5d0 \uac00\uae4c\uc6b4 \uc5f0\ud55c \ud68c\uc0c9  \/ Light gray bordering on white<\/li>\n\n\n\n
    • border = border-width: 1px
      — \ud14c\ub450\ub9ac \ucf1c\uae30 \/ Turn on border<\/li>\n\n\n\n
    • border-gray-200 = border-color: #e5e7eb
      — \ud14c\ub450\ub9ac \uc0c9 \uc5f0\ud55c \ud68c\uc0c9 \/ Light gray border color<\/li>\n\n\n\n
    • rounded-xl = border-radius: 12px
      — \ubaa8\uc11c\ub9ac \ub465\uae00\uac8c \/ Round the corners<\/li>\n\n\n\n
    • text-sm = font-size: 14px
      — \uae00\uc790 \uc791\uac8c \/ Smaller text<\/li>\n<\/ul>\n\n\n\n
      3) \ud3ec\ucee4\uc2a4 – \uae00\uc4f0\uae30 \uc704\ud574\uc11c input box\ub97c \ud074\ub9ad \ud588\uc744 \ub54c
      Focus \u2013 When clicking the input box to type<\/p>\n\n\n\n
        \n
      • focus:outline-none 
        — \ud074\ub9ad\ud560 \ub54c \ub098\uc624\ub294 \uac80\uc740 \ud14c\ub450\ub9ac \uc5c6\uc560\uae30 \/  Remove the black border that appears when clicking<\/li>\n\n\n\n
      • focus:ring-2 
        –\ud30c\ub780\uc0c9 \ube5b\ub098\ub294 \ud14c\ub450\ub9ac 2px \uc0dd\uae30\uae30 \/ Add a 2px glowing blue border.<\/li>\n\n\n\n
      • focus:ring-blue-500
        — \uadf8 \ube5b\ub098\ub294 \ud14c\ub450\ub9ac \uc0c9\uc744 \ud30c\ub780\uc0c9\uc73c\ub85c \uc124\uc815 \/ Set the glowing border color to blue.<\/li>\n\n\n\n
      • focus:bg-white
        — \ud074\ub9ad\ud558\uba74 \uc124\uc815\ub41c \ud68c\uc0c9 \ubc30\uacbd\uc0c9\uc0c1\uc778 \ud68c\uc0c9\uc5d0\uc11c  input box\ubc30\uacbd\uc0c9\uc774 \ud770\uc0c9\uc73c\ub85c \ubc14\ub01c
        When clicked, the input box background color changes from the preset gray to white.<\/li>\n<\/ul>\n\n\n\n
        4)\uc560\ub2c8\uba54\uc774\uc158 \/ Animation<\/p>\n\n\n\n
          \n
        • transition-all = transition: all 0.15s  
          — \uc0c9\uacfc \ub9c1\uc774 \ubd80\ub4dc\ub7fd\uac8c \uc804\ud658\ub418\uac8c \uc124\uc815 \/ Set the color and ring to transition smoothly.<\/li>\n\n\n\n
        • <\/li>\n<\/ul>\n\n\n\n
          \ud83d\udcc1 textarea<\/p>\n\n\n\n
          \u2714\ufe0f \ud3fc \uc694\uc18c\ub85c \uae00 \uc791\uc131 \ubd80\ubd84\uc785\ub2c8\ub2e4.
          This is the section for writing posts using form elements.<\/p>\n\n\n\n
          \u2714\ufe0f \ucf54\ub4dc \/ Code<\/p>\n\n\n\n
          # Tailwind\n            <textarea\n              value={form.message}\n              onChange={(e) => setForm({...form, message: e.target.value})}\n              placeholder=\"\uba54\uc2dc\uc9c0\ub97c \uc785\ub825\ud558\uc138\uc694\/Please enter your message...\"\n              rows={4}\n              className=\"w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all resize-none\"\n            \/>\n\n# CSS\n              <textarea\n                value={form.message}\n                onChange={(e) => setForm({...form, message: e.target.value})}\n                placeholder=\"\uba54\uc2dc\uc9c0\ub97c \uc785\ub825\ud558\uc138\uc694\/Please enter your message...\"\n                rows={4}\n                className=\"input textarea\"\n              \/>\n\n      <style>{` ... ...\n        \/* \uc785\ub825\uce78 \/ input *\/\n        .input {\n          width: 100%;\n          padding: 12px 16px;\n          background-color: #f9fafb;\n          border: 1px solid #e5e7eb;\n          border-radius: 12px;\n          font-size: 14px;\n          outline: none;\n          transition: all 0.2s;\n          box-sizing: border-box;\n        }\n        .input:focus {\n          background-color: white;\n          border-color: #3b82f6;\n          box-shadow: 0 0 0 2px rgba(59,130,246,0.3);\n        }\n        .textarea {\n          resize: none;\n        } ... ...\n      `}<\/style>\n<\/code><\/pre>\n\n\n\n
          \u2714\ufe0f \uc124\uba85 \/ Description<\/p>\n\n\n\n
          — Tailwind & CSS<\/p>\n\n\n\n
          1)resize-none<\/code> = resize: none;<\/code>\uc744 \uc81c\uc678\ud558\uace4 input \uacfc \uac19\uc2b5\ub2c8\ub2e4.
          resize-none<\/code> is the same as input<\/code>, except for resize: none;<\/code>.<\/p>\n\n\n\n
          2)resize-none<\/code> = resize: none;<\/code>\ub294 textarea\uc758  \ud06c\uae30\ub97c \ub9c8\uc6b0\uc2a4\ub85c \uc870\uc808\ud560 \uc218 \uc5c6\uac8c \uc7a0\uadf8\ub294 \uae30\ub2a5\uc785\ub2c8\ub2e4.
          resize-none<\/code> (or resize: none;<\/code>) is a feature that locks a textarea’s size, preventing it from being adjusted with the mouse.<\/p>\n\n\n\n
          \ud83d\udcc1 Label<\/p>\n\n\n\n
          \u2714\ufe0f \uc774\ub984,\uc774\uba54\uc77c \ubd80\ubd84\uc73c\ub85c \uac01 \uc694\uc18c\uc5d0 \ud14d\uc2a4\ud2b8 \ub77c\ubca8\uc744 \ud45c\uc2dc\ud569\ub2c8\ub2e4. 
          Display text labels for each element, such as “Name” and “Email.”<\/p>\n\n\n\n
          \u2714\ufe0f \ucf54\ub4dc \/ Code<\/p>\n\n\n\n
          # Tailwind\n<label className=\"text-sm font-bold text-gray-700\">\uc774\ub984\/Name<\/label>\n\n# CSS\n<label className=\"label\">\uc774\ub984\/Name<\/label>\n<style>{` ... ...\n        .label {\n          font-size: 14px;\n          font-weight: 700;\n          color: #374151;\n        }\n... ... `}\n<\/style><\/code><\/pre>\n\n\n\n
          \u2714\ufe0f \uc124\uba85 \/ Description<\/p>\n\n\n\n
          — Tailwind & CSS<\/p>\n\n\n\n
          1)text-sm<\/code><\/p>\n\n\n\n
            \n
          • font-size: 14px<\/code><\/li>\n<\/ul>\n\n\n\n
            2)font-bold<\/p>\n\n\n\n
              \n
            • font-weight: 700<\/code><\/li>\n<\/ul>\n\n\n\n
              3. text-gray-700<\/code><\/p>\n\n\n\n
                \n
              • color: #374151<\/code><\/li>\n\n\n\n
              • <\/li>\n<\/ul>\n\n\n\n
                \ud83d\udcc1 \uc2a4\ud06c\ub9b0 \uc0f7 \/ ScreenShot<\/p>\n\n\n\n
                \n
                \"\"
                tailwind<\/figcaption><\/figure>\n\n\n\n
                \"\"
                CSS<\/figcaption><\/figure>\n<\/figure>\n\n\n\n
                \n
                \uc694\ud55c\ubcf5\uc74c 8\uc7a5 32\uc808 \/ John 8:32<\/p>\n\n\n\n
                “\uadf8\ub9ac\uace0 \ub108\ud76c\ub294 \uc9c4\ub9ac\ub97c \uc54c\uac8c \ub420 \uac83\uc774\uba70, \uc9c4\ub9ac\uac00 \ub108\ud76c\ub97c \uc790\uc720\ub86d\uac8c \ud560 \uac83\uc774\ub2e4.”<\/p>\n\n\n\n
                “Then you will know the truth ,and the truth will set you free”<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
                \ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \uae00\uc4f0\uae30 \ud560 \ub54c \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \ud3fc \ubd80\ubd84\uc758 UI\ub514\uc790\uc778\uc785\ub2c8\ub2e4.Below is the UI design for the form section frequently used when writing. \ud83d\udc49\ud83c\udffb tailwind\ub294 \uc544\ub798\uc758 \uc6f9\uc0ac\uc774\ud2b8\uc758 \uac80\uc0c9\uc744 \ud1b5\ud574\uc11c \uc790\uc138\ud55c \ub0b4\uc6a9\uc744 \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.You can find detailed information about Tailwind by searching on the website below. \u2714\ufe0f npm run dev\ub85c \uc11c\ubc84\uc2e4\ud589 \ud6c4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000\/form-tailwind \ub610\ub294 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,7,29],"tags":[],"class_list":["post-11556","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-website","category-webui","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/11556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=11556"}],"version-history":[{"count":40,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/11556\/revisions"}],"predecessor-version":[{"id":11600,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/11556\/revisions\/11600"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=11556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=11556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=11556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}