Tailwind Component

作者: JunChow520 | 来源:发表于2020-05-29 03:11 被阅读0次

Tailwind Component
使用React和Tailwind CSS搭建项目框架
使用SASS模仿TailwindCSS生成常用CSS样式
Tailwind Table
Tailwind Base
Tailwind Effects
Tailwind SVG
Tailwind Transform
CSS Tailwind
Tailwind Login

按钮（button）

button

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

<body>
  <div class="m-12 tracking-wide leading-loose text-gray-darkest">
    <div class="m-4">
      <button class="w-full px-3 py-2 bg-grey-lighter border border-gray rounded font-bold text-gray-darkest hover:bg-grey-lightest">按钮</button>
    </div>
    <div class="m-4">
      <button class="w-full px-3 py-2 bg-indigo-500 rounded text-white text-sm focus:outline-none">按钮</button>
    </div>
  </div>
</body>

inline-flex button

<button class="inline-flex px-6 py-2 bg-indigo-500 rounded border-0 text-lg text-white hover:outline-none hover:bg-indigo-600">按钮</button>

<button class="inline-flex px-6 py-2 bg-gray-200 rounded border-0 text-lg text-gray-700 hover:outline-none hover:bg-gray-300">按钮</button>

带符号的按钮

icon button

<button class="inline-flex items-center px-6 py-2 bg-gray-200 border-0 rounded text-base hover:outline-none hover:bg-gray-300">
    按钮
    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
        <path d="M5 12h14M12 5l7 7-7 7"></path>
    </svg>
</button>

输入框（input）

普通输入框

text input

<input type="text" class="w-full px-4 py-2 border border-gray-400 bg-gray-100 rounded text-base hover:outline-none hover:border-indigo-600" placeholder="请填写..."/>

邮箱输入框

email input

<input type="email" class="w-full px-4 py-2 mb-4 bg-white border border-gray-400 rounded text-base focus:outline-none focus:border-indigo-500" placeholder="邮箱"/>

文本域（textarea）

textarea

<textarea class="w-full px-4 py-2 mb-4 resize-none bg-white border border-gray-400 rounded text-base focus:outline-none focus:border-indigo-500" placeholder="message"></textarea>

搜索框（search bar）

searchbar

<div class="relative ml-auto flex-1 sm:block hidden">
  <input placeholder="Search" type="text" class="w-full h-full pl-4 pr-8 py-2 border border-gray-400 rounded  text-gray-700 text-sm text-gray-500 focus:outline-none">
  <svg class="absolute right-0 top-0 w-4 h-4 mt-3 mr-2 text-gray-500" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"></circle>
    <path d="M21 21l-4.35-4.35"></path>
  </svg>
</div>

下拉按钮（dropdown）

dropdown

<style>
.dropdown:hover .dropdown-menu{display:block;}
</style>
<div class="dropdown relative inline-block">
  <button class="px-3 py-2 rounded border border-gray inline-flex items-center text-gray-800">
    <span class="mr-1">下拉按钮</span>
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
  </button>
  <ul class="dropdown-menu absolute rounded-t border border-gray divide-y hidden">
    <li class=""><a href="" class="block px-4 py-2 whitespace-no-wrap hover:bg-gray-100">菜单项</a></li>
    <li><a href="" class="block px-4 py-2 whitespace-no-wrap hover:bg-gray-100">菜单项菜单项</a></li>
    <li><a href="" class="block px-4 py-2 whitespace-no-wrap hover:bg-gray-100">菜单项菜单项菜单项</a></li>
  </ul>
</div>

图片（image）

随机图片API

http://source.unsplash.com/widthxheight/?=category,category

https://unsplash.it/width/height

https://picsum.photos/width/height/?random

占位图API

https://dummyimage.com/widthxheight/bgcolor/color

圆框图片

rounded

<img src="https://dummyimage.com/84x84/edf2f7/a5afbd" alt="" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" />

卡片布局

联系人卡片布局

card

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

<div class="bg-gray-200 mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="px-6 py-4 sm:flex sm:items-center">
    <img src="http://source.unsplash.com/100x100" class="block mx-auto mb-4 rounded-full sm:mb-0 sm:mr-4 sm-ml-0"/>
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">姓名</p>
        <p class="text-sm leading-tight text-gray-dark">职位职称</p>
      </div>
      <div>
        <button class="text-sm rounded-full px-4 py-1 leading-normal bg-white border border-red hover:bg-red hover:text-white">关注</button>
      </div>
    </div>
  </div>
</div>

卡片布局

自适应自图文卡片布局

vertical

horizontal

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

<div class="container mx-auto m-4 p-4 flex items-center justify-center">
  <div class="max-w-lg shadow-lg rounded overflow-hidden m-4 sm:flex bg-gray-100">
    <div class="flex-none text-center overflow-hidden">
      <img src="https://unsplash.it/400/400" class="object-cover sm:h-auto md:w-64 sm:w-48 w-full">
    </div>
    <div class="px-6 py-4">
      <h2 class="mb-2 font-black">标题文本</h2>
      <p class="mb-4 text-sm text-grey-dark">
        多行段落文本多行段落文本多行段落文本多行段落文本多行段落文本多行段落文本多行段落文本多行段落文本
      </p>
      <button class="px-3 py-1 border border-dark bg-white text-dark ">按钮</button>
    </div>
  </div>
</div>

卡片布局

card

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-12 bg-gray-100">
  <div class="flex flex-wrap -mx-1 lg:-mx-4">
    <articale class="overflow-hidden rounded-lg shadow-lg">
      <a href="#">
        <img src="https://picsum.photos/600/400/?random" class="block w-full h-auto" alt="placeholder" />
      </a>
      <header class="flex items-center justify-between leading-tight p-2 md:p-4">
        <h1 class="text-lg"><a href="#" class="text-black no-underline hover:underline">标题文本</a></h1>
        <p class="text-sm text-grey-darker">YYYY-MM-DD</p>
      </header>
      <footer class="flex items-center justify-between leading-none p-2 md:p-4">
        <a href="" class="flex items-center no-underline text-black hover:underline">
          <img src="https://picsum.photos/32/32/?random" class="block rounded-full"/>
          <p class="ml-2 text-sm">姓名</p>
        </a>
        <a href="" class="no-underline text-grey-darker hover:text-red-dark">
          <span class="hidden">link</span>
          <i class="fa fa-heart"></i>
        </a>
      </footer>
    </articale>
  </div>
</div>

排行榜（ranklist）

ranklist

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-12 bg-gray-100">
  <div class="flex flex-col text-grey-dark">
    <article class="flex flex-row justify-between items-center p-4 rounded font-bold text-center text-grey-dark">
      <div class="w-1/5 flex">标题</div>
      <div class="w-1/5">标题</div>
      <div class="w-1/5">标题</div>
      <div class="w-1/5">标题</div>
      <div class="w-1/5">标题</div>
    </article>
    <article class="my-2 p-4 flex flex-row justify-between items-center bg-white shadow rounded cursor-move text-center">
      <div class="w-1/5 flex flex-row items-center">
        <img src="http://source.unsplash.com/100x100" class="rounded-full object-cover object-center w-8 h-8"/>
        <p class="ml-2">昵称</p>
      </div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
    </article>
    <article class="my-2 p-4 flex flex-row justify-between items-center bg-white shadow rounded cursor-move text-center">
      <div class="w-1/5 flex flex-row items-center">
        <img src="http://source.unsplash.com/100x100" class="rounded-full object-cover object-center w-8 h-8"/>
        <p class="ml-2">昵称</p>
      </div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
    </article>
    <article class="my-2 p-4 flex flex-row justify-between items-center bg-white shadow rounded cursor-move text-center">
      <div class="w-1/5 flex flex-row items-center">
        <img src="http://source.unsplash.com/100x100" class="rounded-full object-cover object-center w-8 h-8"/>
        <p class="ml-2">昵称</p>
      </div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
      <div class="w-1/5">10</div>
    </article>
  </div>
</div>

导航栏

移动端导航栏

mobile nav

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto min-h-screen w-full bg-gray-100 flex items-center justify-center">
  <nav class="w-full p-4 rounded bg-gray-900 text-white">
    <div class="relative flex items-center justify-between">
      <div class="flex items-center justify-center">
        <i class="fa fa-bars text-2xl"></i>
      </div>
      <div class="absolute inset-y-0 font-bold" style="left:50%; transform:translateX(-50%);">标题</div>
      <div class="flex items-center justify-center">
        <i class="fa fa-user text-2x1"></i>
        <i class="fa fa-qrcode text-2x1 ml-4"></i>
      </div>
    </div>
  </nav>
</div>

Tailwind Component
按钮（button）带符号的按钮输入框（input）普通输入框邮箱输入框文本域（textarea）搜索...
使用React和Tailwind CSS搭建项目框架
众所周知，Tailwind CSS框架越来越流行，所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模...
使用SASS模仿TailwindCSS生成常用CSS样式
最近维护MPX小程序项目发现没有基础样式库，由于MPX版本比较老不兼容tailwind库，用惯了tailwind后...
Tailwind Table
表格样式工具类表格布局table layout CSS中table-layout属性用于设置表格布局的类型，即用...
Tailwind Base
添加基础样式 - 使用Tailwind添加全局的基础样式全局基础样式是样式表开头的样式，用于为基础HTML元素设...
Tailwind Effects
Tailwind特效阴影shadow 不透明度opacity 阴影shadow 这里的阴影特指CSS3中新增的b...
Tailwind SVG
什么是SVG呢？ SVG（Scalable Vector Graphics）是一种可伸缩矢量图形 SVG基于可扩展...
Tailwind Transform
CSS3中transform（变形）属性用于设置元素在2D或3D上的旋转、缩放、移动和倾斜坐标系 transfo...
CSS Tailwind
一般的UI中CSS框架都是内建各种预设的组件，比如按钮、卡片、警告框等，当需要通过定制化设计时，组件的高度耦合性则...
Tailwind Login
登录界面登录界面第三方登录与按钮的数量此处由于数量固定处理的并不灵活