使用tailwindcss创建一个全屏模式对话框

Sun, 09 Aug 2020 10:42:00 +0000

最开始用的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>
&lt;div className="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"&gt;
  &lt;div className="modal-content py-4 text-left px-6"&gt;
    &lt;div className="flex justify-between items-center pb-3"&gt;
      &lt;p className="text-2xl font-bold"&gt;Simple Modal!&lt;/p&gt;
      &lt;div className="modal-close cursor-pointer z-50"&gt;
        &lt;svg className="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"&gt;
          &lt;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"&gt;&lt;/path&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;p&gt;Modal content can go here&lt;/p&gt;
    &lt;p&gt;...&lt;/p&gt;
    &lt;p&gt;...&lt;/p&gt;
    &lt;p&gt;...&lt;/p&gt;
    &lt;p&gt;...&lt;/p&gt;

    &lt;div className="flex justify-end pt-2"&gt;
      &lt;button className="btn btn-green m-2"&gt;Action&lt;/button&gt;
      &lt;button className="modal-close btn btn-green m-2"&gt;Close&lt;/button&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;

</div>

Css on kamuszhou's blog

使用tailwindcss创建一个全屏模式对话框