2 篇博文 含有标签「tailwindcss」

前言​

tailwindcss 使得不用离开 html 界面就可以完成 css coding。常见的样式多写几次自然就记住了，如果不会的，还可以查文档，但是遇到布局相关的 flex 和 grid，需要一定的知识。

flex​

在菜鸟教程的基础上，做一点总结。

基本组成，flex container 和 flex item。他们可以分别设置属性。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

所以想到 flex 布局，应该在脑海中想起的画面是：一个容器内有两条轴，一条横轴从左到右，一条竖轴从上到下。项目也是按上述顺序排列。

flex 容器的属性​

• flex-direction：决定主轴是哪一条及其方向
• flex-wrap：主轴空间不够时是否换行
• flex-flow：flex-direction 和 flex-flow 一起设置
• justify-content：主轴的对齐方式
• align-items：交叉轴的对齐方式
• align-content：align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

这里对 align-content 做出一点说明。所谓的多根轴线，是指在元素较多，形成换行后，每一行元素所在的轴，而不是指主轴和交叉轴：

如图，每一根红线都是一个轴。也就是说，align-content 定义了多行元素的整体对齐方式。作为对比，align-items 的对象是当行元素：

换句话说，多行元素用 align-content，单行元素用 align-items。

flex 项目属性​

去除掉不常用的 order，有五个属性：

• flex-grow：当有剩余空间时，项目放大比例
• flex-shrink：空间不足时，缩小比例
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）
• flex：上述三个属性的快捷设置
• align-self：对单个项目脱离 align-items 的对齐方式

关键是理解剩余空间。首先空间都是针对主轴来说的。

grid​

grid 适合设置多行多列的，目前我遇到的情况是，设置好几个列，还有列之间的间隔，然后确定实际的一个元素占几列，就可以完成绝大部分任务了。

flex 和 grid 的 tailwindcss 写法​

flex​

<div class="flex 主轴对齐 交叉轴对齐 元素间距">
    ...
</div>

grid​

<div class="max-w-7xl mx-auto(居中) grid grid-cols-n gap-n">
    <div class="col-span-x">
    ...
    </div>
    <div class="col-span-n-x">
    ...
    </div>
</div>

前言​

一个准备实现的 django 项目中用到了 tailwindcss。年初我曾接触过 tcss，但是由于文档对我来说有点看不懂，配置了很久还是失败了，所以搁置了下来。今天，经过良久的尝试，将成功的经验记录下来。

cdn​

cdn 是最快尝试 tcss 的方法。它是通过在线引入 tcss 的 stylesheet 来实现的。

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

通过 CDN 引入的显著缺点是，每一次更改样式都要请求网络，如果网络不好或者断网，就会带来不好的开发体验。官网文档还给出了一些缺点：

Tailwind CLI​

利用脚手架工具，可以生成一个定制的 css 文件，里面预定义了一大堆样式，比如 mt-5 等，正是我们在 html 文件中用到的 tcss 类名。不仅可以离线开发，而且可以添加自定义样式。操作方式如下：

首先，创建一个/src/tcss.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

<!-- your style -->
@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

可以看出，tcss 有三个层次，base 层起到清除浏览器的初始默认样式，比如一些 margin 和 padding。components 负责将一些重复使用的样式组提取出来，单独取一个名字，比如上面代码的 btn-blue。最后是 utilities，就是最熟悉的 tcss 自带类，也可以自定义。

创建好上面的源 tcss 文件后，进行解析：

npx tailwindcss-cli build src/tailwind.css -o tailwind.css

上述命令竟然是我从别的教学视频里得到的，官方文档给出的命令只能得到 500 多行的解析文件，只包含了 base 层。不得不说，tcss 文档写的很烂。正常来说，上面命令运行后生成的文件含有 18 多万行代码。

在 index.html 中，header 部分引入生成的tailwind.css:

<link href="/tailwind.css" rel="stylesheet">

可以开始愉快地使用 tcss 了。