使用tailwindcss创建一个全屏模式对话框
最开始用的css UI库是最常用，历史最悠久的bootstrap。 后来又接触了bulma，bulma也做得很漂亮，不过我没有把bulma用在实战中。前段时间打算改版我的粤语网站https://ykyi.net{.wp-editor-md-post-content-link}, 调研了多种技术方案，最终选中了nextjs{.wp-editor-md-post-content-link}。读nextjs官方文档时发现tailwind是nextjs默认配好的css库。这是第一次接触到tailwindcss{.wp-editor-md-post-content-link}。较之Bulma和bootstrap这些UI库给了开箱即用的很多控件，tailwind只是提供了很多css工具(css类)，用户需要用这些工具自己创建最终使用的控件。一开始会让人有点畏惧，实际使用之后，其实完全自己创建美观的UI控件也并非有那么困难。 今天用tailwind做了一个全屏的模式对话框Modal Dialog。代码实际上是从网上抄下来的。天下代码我抄你，你抄我嘛～～ HTML代码如下。 <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 items-center pb-3"> <p className="text-2xl font-bold">Simple Modal!</p> <div className="modal-close cursor-pointer z-50"> <svg className="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"> <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> </svg> </div> </div> <p>Modal content can go here</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <div className="flex justify-end pt-2"> <button className="btn btn-green m-2">Action</button> <button className="modal-close btn btn-green m-2">Close</button> </div> </div> </div> </div> ...