让人眼前一亮的CSS框架：TailwindCSS

今天我给大家来将介绍一个CSS框架TailwindCSS，它在GitHub的css-framework话题中排名前五，不过在介绍它之前我们先来谈一下传统的CSS框架，Bootstrap。

还记的当初Bootstrap刚刚开源的时候吗？无数前端开发者追捧，提供的封装好的组件让前端设计出的页面既美观有高效，是所有前端必须要了解的一个框架。但随着时间的推移，人们发现Bootstrap也不是万能的，因为如果要修改他的风格，进行定制的话，必须要手写CSS覆盖框架原生样式，暂且不看源码的多少，光是Bootstrap原生样式的复杂度就可能让你觉得很难定制。因为这些CSS框架的代码考虑了很多场景，如各种父级的不同情况，伪类，伪元素，哪怕一个小的组件，也没有覆盖到样式就达不到理想的效果。而覆盖样式最好的方式是框架本身提供变量，但定制能力依然是有限的。

有人说Bootstrap说一个成品库，想用什么组件直接拿来就用了，但也有人说，它做的太多了，限制了人的创新能力,于是TailwindCSS这个框架便诞生了。

Tailwind CSS(以下简称TW) 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。它并不提供预先设计好的内置组件,而是提供更为基础的工具类。

使用方面如下，

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

也可以使用CDN，但这个会不能使用很多特性,不能定制默认主题，不能使用任何装饰器，不能使用第三方插件。

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

来看下一个使用TW做的简单的例子，

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

这里的一些类 md:flex rounded-lg md:ml-6 都是TW提供的基础类，每一个基础类都设置一个CSS属性

md:flex设置了CSS属性，如果屏幕是768px以上，将display设置为flex
md:ml-6的作用是 margin-left: 1.5rem!important;
rounded-lg的作用是 border-radius: .5rem!important;

所有的类都具有很强的语义。只看类名你大概就能猜到类的作用。
改框架天生支持响应式布局，如果你觉得组装一个组件需要十几个类，才能完成，那么可以试试他们的提取组件的工具。天生可定制行，基于PostCSS开发，通过JavaScript代码进行配置，可完全发挥编程语言的能力。有人夸赞它 Tailwind 不仅仅是一个 CSS 框架，他更是构建设计系统的引擎。

其实TW的设计思想很像乐高，原子式。可组装。只提供你最基础的零件，想要什么你自己建造。也给你提供一些可以快速扩充零件的方式。目前TW已经提供了几十种模块的CSS,如主题定制，颜色，间距，容器，浮动，定位，flex，尺寸,这些基础类组合起来将产生巨大的效果。如果能熟练运用，完全可以组装一套自己的CSS框架。

下面是TW定制模块的配置

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

配置主题，变量

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      tablet: '768px',
      desktop: '1024px',
    },
    colors: {
      primary: {
        100: '#ebf8ff',
        300: '#90cdf4',
        500: '#4299e1',
        700: '#2b6cb0',
        900: '#2a4365',
      },
      secondary: {
        100: '#fffff0',
        300: '#faf089',
        500: '#ecc94b',
        700: '#b7791f',
        900: '#744210',
      },
    },
    extend: {
      boxShadow: {
        huge: '0 30px 60px -15px rgba(0, 0, 0, .25)'
      }
    }
  }
}

此框架后续很有可能会超过Bootstrap。但如果自己手残，不会配色设计，可以和Bootstap或其他带有组件库的框架搭配使用

官网链接
GitHub地址
国内官网