CSS – Tailwind CSS

前言

很多时候 CSS 未必是需要管理的, 比如做网站, Landing Page (类似宣传单). 很多时候做了 > 用了 > 丢 > 再做新的.

它没有 "维护" 的必要. 所以也就不需要搞什么 Sass 去做代码管理之类的.

反而需要的是快速开发. 而快速开发最快的方式就是只写 HTML 不写 CSS. 少写一样东西自然就快了丫.

你可能会想, 这说的不是 Bootstrap 吗? 没错, 但是 Bootstrap 把设计封装的太上层了. 连不会 CSS 的人都可以使用. 这对我们会 CSS 的人不就是个鄙视吗? 

于是 Tailwind CSS 横空出世. 它的目的和 Bootstrap 一样都是要加快开发速度 (针对不需要维护的项目, 用了就丢那种), 但它又给了开发人员使用 CSS 的能力.

简单说就是让你在 HTML 写 CSS. 类似写 inline style 但又不那么肮脏. 

总结, 对于前端开发, 尤其是做 marketing 项目, 网站, Landing Page 之类的. 个人觉得 Tailwind CSS 绝对是必须要的利器. 

 

参考:

官方网站

由于官网写的太好了, 这篇只会记入一些链接, 和概念而已.

去官网 Crtl + K search 就可以了.

 

安装

Webpack

请看这篇: Webpack 学习笔记 Tailwind CSS and PostCSS 的部分

Tailwind CLI

参考: Get started with Tailwind CSS

如果使用 CLI 的话建议配上 Headwind 插件. 

但我个人倾向于搭配 Webpack 使用.

 

Purge

Bootstrap 的使用方式是在 HTML 插入一个 CSS Link, 这个 CSS 包含了许多定义好 class.

我们在 HTML 添加 class 就可以使用了. 一个很大的问题就是这个 CSS Link 体积可能不小, 必须全部加载哪怕最终没有用到.

Tailwind 不同之处就在这里, 因为它有一个 compile 的过程 (前端工程化的体现丫). 

首先它会通过 tailwind.config.js 里的 content path 去扫描 html, scss, js 文档. 从里面发现 tailwind 的 utility class.

然后把有用到的 ultility class 的 style 动态写入到一个 css 里, 再把它写入有调用 @tailwind utilities 的地方.

 

@apply, @layer base, utilities, components

参考: 

Youtube – Using @apply with Complex Classes – What's new in Tailwind CSS

Tailwind docs – Functions & Directives

HTML 布满 utility 是很恐怖的, 尤其是遇到那种重复性很多的 class, 比如做一个 image overlay.

这时就可以通过扩展 Tailwind 的 utilities 来做封装.

@apply

@apply 允许我们在 css file 中使用 Tailwind 的 utilities class.

h1 {
  @apply text-7xl uppercase;
}

note: @apply 默认会去除所有 class 的 important. 而且 for Sass 要用特色语法才可以写进去哦.

@layer base

base 让我们可以定义全局 style, 比如 reset CSS, font-family, 等等. 

@layer base {
  body {
    @apply text-8xl;
  }
}

@layer utilities

Tailwind 的 utilities 就是一堆 class, 我们当然也可以用同样的方式扩展它

@layer utilities {
  .h1-super-big {
    @apply text-7xl uppercase;
  }
}

使用

<h1 class="h1-super-big">Hello world!!!!</h1>

@layer components

component 的玩法和 utilities 是一样的, utilities 范围小, atom 嘛 components 范围比较大.

@layer components {
  .btn-base {
    @apply h1;
  }
  .btn-blue {
    @apply btn-base rounded bg-blue-500 py-2 px-4 font-bold hover:bg-blue-700;
  }
}

@appy 里面可以使用 utilities 和 其它的 component class 哦

 

theme & screen function

参考: Functions & Directives

通过 theme function 可以获取到 config 的值

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

通过 screen function 可以获得 breakpoint 的值

@media screen(sm) {
  /* ... */
}