{"id":1672,"date":"2020-08-09T18:42:00","date_gmt":"2020-08-09T10:42:00","guid":{"rendered":"http:\/\/ykyi.net\/?p=1672"},"modified":"2020-08-09T18:42:00","modified_gmt":"2020-08-09T10:42:00","slug":"%e4%bd%bf%e7%94%a8tailwindcss%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%85%a8%e5%b1%8f%e6%a8%a1%e5%bc%8f%e5%af%b9%e8%af%9d%e6%a1%86","status":"publish","type":"post","link":"https:\/\/ykyi.net\/?p=1672","title":{"rendered":"\u4f7f\u7528tailwindcss\u521b\u5efa\u4e00\u4e2a\u5168\u5c4f\u6a21\u5f0f\u5bf9\u8bdd\u6846"},"content":{"rendered":"

\u6700\u5f00\u59cb\u7528\u7684css UI\u5e93\u662f\u6700\u5e38\u7528\uff0c\u5386\u53f2\u6700\u60a0\u4e45\u7684bootstrap\u3002 \u540e\u6765\u53c8\u63a5\u89e6\u4e86bulma\uff0cbulma\u4e5f\u505a\u5f97\u5f88\u6f02\u4eae\uff0c\u4e0d\u8fc7\u6211\u6ca1\u6709\u628abulma\u7528\u5728\u5b9e\u6218\u4e2d\u3002\u524d\u6bb5\u65f6\u95f4\u6253\u7b97\u6539\u7248\u6211\u7684\u7ca4\u8bed\u7f51\u7ad9https:\/\/ykyi.net<\/a>, \u8c03\u7814\u4e86\u591a\u79cd\u6280\u672f\u65b9\u6848\uff0c\u6700\u7ec8\u9009\u4e2d\u4e86nextjs<\/a>\u3002\u8bfbnextjs\u5b98\u65b9\u6587\u6863\u65f6\u53d1\u73b0tailwind\u662fnextjs\u9ed8\u8ba4\u914d\u597d\u7684css\u5e93\u3002\u8fd9\u662f\u7b2c\u4e00\u6b21\u63a5\u89e6\u5230tailwindcss<\/a>\u3002\u8f83\u4e4bBulma\u548cbootstrap\u8fd9\u4e9bUI\u5e93\u7ed9\u4e86\u5f00\u7bb1\u5373\u7528\u7684\u5f88\u591a\u63a7\u4ef6\uff0ctailwind\u53ea\u662f\u63d0\u4f9b\u4e86\u5f88\u591acss\u5de5\u5177(css\u7c7b)\uff0c\u7528\u6237\u9700\u8981\u7528\u8fd9\u4e9b\u5de5\u5177\u81ea\u5df1\u521b\u5efa\u6700\u7ec8\u4f7f\u7528\u7684\u63a7\u4ef6\u3002\u4e00\u5f00\u59cb\u4f1a\u8ba9\u4eba\u6709\u70b9\u754f\u60e7\uff0c\u5b9e\u9645\u4f7f\u7528\u4e4b\u540e\uff0c\u5176\u5b9e\u5b8c\u5168\u81ea\u5df1\u521b\u5efa\u7f8e\u89c2\u7684UI\u63a7\u4ef6\u4e5f\u5e76\u975e\u6709\u90a3\u4e48\u56f0\u96be\u3002<\/p>\n

\u4eca\u5929\u7528tailwind\u505a\u4e86\u4e00\u4e2a\u5168\u5c4f\u7684\u6a21\u5f0f\u5bf9\u8bdd\u6846Modal Dialog\u3002\u4ee3\u7801\u5b9e\u9645\u4e0a\u662f\u4ece\u7f51\u4e0a\u6284\u4e0b\u6765\u7684\u3002\u5929\u4e0b\u4ee3\u7801\u6211\u6284\u4f60\uff0c\u4f60\u6284\u6211\u561b\uff5e\uff5e
\nHTML\u4ee3\u7801\u5982\u4e0b\u3002<\/p>\n

<div className=\"bg-gray-200 flex items-center justify-center h-screen\">\n    <button className=\"modal-open btn btn-green\">Open Modal<\/button>\n\n  <div className=\"modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center\">\n    <div className=\"modal-overlay absolute w-full h-full bg-gray-900 opacity-50\"><\/div>\n\n    <div className=\"modal-container bg-white w-11\/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto\">\n      <div className=\"modal-content py-4 text-left px-6\">\n        <div className=\"flex justify-between items-center pb-3\">\n          <p className=\"text-2xl font-bold\">Simple Modal!<\/p>\n          <div className=\"modal-close cursor-pointer z-50\">\n            <svg className=\"fill-current text-black\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\">\n              <path d=\"M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z\"><\/path>\n            <\/svg>\n          <\/div>\n        <\/div>\n\n        <p>Modal content can go here<\/p>\n        <p>...<\/p>\n        <p>...<\/p>\n        <p>...<\/p>\n        <p>...<\/p>\n\n        <div className=\"flex justify-end pt-2\">\n          <button className=\"btn btn-green m-2\">Action<\/button>\n          <button className=\"modal-close btn btn-green m-2\">Close<\/button>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/code><\/pre>\n
\u5bf9\u5e94\u7684Javascript\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
var openmodal = document.querySelectorAll('.modal-open')\nfor (var i = 0; i < openmodal.length; i++) {\nopenmodal[i].addEventListener('click', function(event){\nevent.preventDefault()\ntoggleModal()\n})\n}\n\nvar overlay = document.querySelector('.modal-overlay')\noverlay.addEventListener('click', toggleModal)\n\nvar closemodal = document.querySelectorAll('.modal-close')\nfor (var i = 0; i < closemodal.length; i++) {\nclosemodal[i].addEventListener('click', toggleModal)\n}\n\ndocument.onkeydown = function(evt) {\nevt = evt || window.event\nvar isEscape = false\nif (\"key\" in evt) {\nisEscape = (evt.key === \"Escape\" || evt.key === \"Esc\")\n} else {\nisEscape = (evt.keyCode === 27)\n}\nif (isEscape && document.body.classList.contains('modal-active')) {\ntoggleModal()\n}\n};\n\n\nfunction toggleModal () {\nconst body = document.querySelector('body')\nconst modal = document.querySelector('.modal')\nmodal.classList.toggle('opacity-0')\nmodal.classList.toggle('pointer-events-none')\nbody.classList.toggle('modal-active')\n}\n<\/code><\/pre>\n
\u8ba9\u6211\u6709\u70b9\u5403\u60ca\u7684\u65f6\uff0c\u6a21\u5f0f\u5bf9\u8bdd\u6846\u5e76\u975e\u4f7f\u7528display:hide\u8fbe\u5230\u9690\u85cf\u7684\u6548\u679c\u3002\u800c\u662f\u4f7f\u7528opacity:0\uff08tailwind\u7684opacity-0\u7c7b\uff09\uff0c\u5373\u4e0d\u4f7f\u7528\u6a21\u5f0f\u5bf9\u8bdd\u6846\u65f6\uff0c\u6a21\u5f0f\u5bf9\u8bdd\u6846\u5728\u4e00\u4e2a\u5168\u900f\u660e\u7684div\u91cc\u9762\uff0c\u8fbe\u5230\u9690\u85cf\u7684\u6548\u679c\u3002\u5f53\u9700\u8981\u5c55\u793a\u7684\u65f6\u5019\uff0c\u5220\u9664opacity-0\u7c7b\uff0c\u5373\u5b8c\u5168\u4e0d\u900f\u660e\uff0c\u6b64\u65f6\u6a21\u5f0f\u5bf9\u8bdd\u6846\u5c31\u5c55\u793a\u51fa\u6765\u4e86\u3002<\/p>\n
Tailwind\u8fd9\u4e2acss\u5de5\u5177\u5e93\u8fd8\u662f\u4e0d\u9519\uff01\u591a\u7528\u4e86\u51e0\u6b21\u4ee5\u540e\uff0c\u6211\u89c9\u5f97\u53ef\u4ee5\u629b\u5f03bootstrap\u4e86\u3002\u60f3\u8981\u4e00\u4e2a\u4ec0\u4e48UI\u63a7\u4ef6\u7684\u65f6\u5019\uff0c\u7528tailwind\u52a0\u63a7\u4ef6\u540d\u641c\u7d22\u4e00\u4e0b\uff0c\u5df2\u7ecf\u6709\u7f51\u53cb\u8d21\u732e\u4e86\u73b0\u6210\u7684\u4ee3\u7801\u3002\u62ff\u8fc7\u6765\u7406\u89e3\u4ee5\u540e\uff0c\u66f4\u65b9\u4fbf\u5b9a\u5236\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6700\u5f00\u59cb\u7528\u7684css UI\u5e93\u662f\u6700\u5e38\u7528\uff0c\u5386\u53f2\u6700\u60a0\u4e45\u7684bootstrap\u3002 \u540e\u6765\u53c8\u63a5\u89e6\u4e86bulma\uff0cbulma\u4e5f\u505a\u5f97\u5f88\u6f02\u4eae\uff0c\u4e0d\u8fc7\u6211\u6ca1\u6709\u628abulma\u7528\u5728\u5b9e\u6218\u4e2d\u3002\u524d\u6bb5\u65f6\u95f4\u6253\u7b97\u6539\u7248\u6211\u7684\u7ca4\u8bed\u7f51\u7ad9https:\/\/ykyi.net, \u8c03\u7814\u4e86\u591a\u79cd\u6280\u672f\u65b9\u6848\uff0c\u6700\u7ec8\u9009\u4e2d\u4e86nextjs\u3002\u8bfbnextjs\u5b98\u65b9\u6587\u6863\u65f6\u53d1\u73b0tailwind\u662fnextjs\u9ed8\u8ba4\u914d\u597d\u7684css\u5e93\u3002\u8fd9\u662f\u7b2c\u4e00\u6b21\u63a5\u89e6\u5230tailwindcss\u3002\u8f83\u4e4bBulma\u548cbootstrap\u8fd9\u4e9bUI\u5e93\u7ed9\u4e86\u5f00\u7bb1\u5373\u7528\u7684\u5f88\u591a\u63a7\u4ef6\uff0ctailwind\u53ea\u662f\u63d0\u4f9b\u4e86\u5f88\u591acss\u5de5\u5177(css\u7c7b)\uff0c\u7528\u6237\u9700\u8981\u7528\u8fd9\u4e9b\u5de5\u5177\u81ea\u5df1\u521b\u5efa\u6700\u7ec8\u4f7f\u7528\u7684\u63a7\u4ef6\u3002\u4e00\u5f00\u59cb\u4f1a\u8ba9\u4eba\u6709\u70b9\u754f\u60e7\uff0c\u5b9e\u9645\u4f7f\u7528\u4e4b\u540e\uff0c\u5176\u5b9e\u5b8c\u5168\u81ea\u5df1\u521b\u5efa\u7f8e\u89c2\u7684UI\u63a7\u4ef6\u4e5f\u5e76\u975e\u6709\u90a3\u4e48\u56f0\u96be\u3002 \u4eca\u5929\u7528tailwind\u505a\u4e86\u4e00\u4e2a\u5168\u5c4f\u7684\u6a21\u5f0f\u5bf9\u8bdd\u6846Modal Dialog\u3002\u4ee3\u7801\u5b9e\u9645\u4e0a\u662f\u4ece\u7f51\u4e0a\u6284\u4e0b\u6765\u7684\u3002\u5929\u4e0b\u4ee3\u7801\u6211\u6284\u4f60\uff0c\u4f60\u6284\u6211\u561b\uff5e\uff5e HTML\u4ee3\u7801\u5982\u4e0b\u3002 <div className=”bg-gray-200 flex items-center justify-center h-screen”> <button className=”modal-open btn btn-green”>Open Modal<\/button> <div className=”modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center”> <div className=”modal-overlay absolute w-full h-full bg-gray-900 opacity-50″><\/div> <div className=”modal-container bg-white w-11\/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto”> <div className=”modal-content py-4 text-left px-6″> <div className=”flex justify-between … Continue reading “\u4f7f\u7528tailwindcss\u521b\u5efa\u4e00\u4e2a\u5168\u5c4f\u6a21\u5f0f\u5bf9\u8bdd\u6846”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[22,75],"class_list":["post-1672","post","type-post","status-publish","format-standard","hentry","category-tech_articles","tag-css","tag-tailwind"],"_links":{"self":[{"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/posts\/1672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ykyi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1672"}],"version-history":[{"count":0,"href":"https:\/\/ykyi.net\/index.php?rest_route=\/wp\/v2\/posts\/1672\/revisions"}],"wp:attachment":[{"href":"https:\/\/ykyi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ykyi.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ykyi.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}