class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathanp>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.p>
      div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Messagebutton>
      div>
    div>
  div>
div>

可以直接添加cdn文件

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

就可以看到效果了！

+++

一些简单问答：

　　---说了半天，Tailwind CSS和内联样式有什么区别？

　　Tailwind CSS是把所有样式写在class里面。内联样式是把所有样式写在style里面，所以会让很多人造成一个印象：Tailwind CSS和内联样式差不多，大同小异。

　　其实是有很大的区别，Tailwind CSS相比于内联样式，有以下几点特点：

　　有约束的设计。

　　使用内联样式，每个值都是一个随便填写的数字。使用Tailwind CSS类，你要从预先定义好的设计系统中选择样式，这样你开发出来的页面，视觉上会保持一致，不会乱七八糟。

　　响应式设计。

　　您不能在内联样式中使用媒体查询，但您可以使用Tailwind的响应式类来轻松开发完全响应式界面。比如你可以在class里写一个`sm:text-left`,代表的是，在小屏幕上，文字居中的方式是居左显示。但是你在内联样式是不可能做到这些的。

　　可以直接写鼠标滑过，点击等其他状态的样式。

　　比如你可以在class里面写一个`hover:text-white` ,代表的是鼠标滑过的时候，文本是白色。

　　其他的很多特点，比如可维护性等等。

　　---Tailwind CSS有什么缺点？

　　类名很长

　　正如Tailwind CSS官网首页的口号一样，从此让你写样式不再离开html页面。Tailwind CSS将HTML与CSS高度解耦，把本来CSS的一些工作转嫁给了HTML。好处是使用Tailwind CSS你可以从此不再写css。但坏处是你的html标签的类名会很长很长。比如

　　<a href="#" class="text-sm font-medium bg-purple-600 rounded-full py-4 px-11 text-white inline-block border border-solid shadow hover:text-purple-600 hover:bg-white hover:border-purple-600 transition duration-300" role="button">Start Ticketing</a>

　　虽然Tailwind CSS也支持把很多属性提取成一个组件，但是对于不会再次复用的class。提取组件也没什么必要。

　　所以类名很多是我目前遇到的不太舒服的问题。

　　---熟悉使用有成本

　　这一点逃避不了，所有的新技术，所有的css框架都有熟悉成本。Tailwind CSS也一样。比如你想做一个圆角，那你得知道Tailwind CSS里面的圆角属性怎么写，边框怎么写，边框样式怎么写等等。你需要不断的去看文档。

　　我对Tailwind的文档进行了翻译，中文文档见：Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

　　所以一开始使用Tailwind CSS，特别是第一个项目，你会用起来比较痛苦。很多不喜欢Tailwind CSS的人可能从第一个项目就会放弃了。

　　但是只要你用Tailwind CSS做一两个项目，基本明确的告诉你，你以后很难再回到手写css的时候了。大多人都会觉得"很香"。

　　另外是，Tailwind CSS的作者针对这个问题，开发了一个专门用于vscode的Tailwind CSS代码提示插件。会有效的提高开发效率。

　　---那我要不要学习Tailwind CSS？

　　当然，这是必须的。作为一个新兴css框架。在这一两年之内，Tailwind CSS框架的上升率已经稳居第一了。而且这种写法，在目前看来，优越与其他的任何css框架，目前看来这也是趋势。除非以后再出来什么奇葩的玩意儿。

　　建议对技术有追求的人最好学习一下。所有的新技术，都是学起来费劲，但用起来简单。

　　---要不要对以前的项目用Tailwind CSS进行重构？