快速上手 tailwindcss

介绍

tailwindcss 是当前最流行的一款 CSS 样式库，它提供了大量的预设样式例如颜色、背景、大小、位置等，让人使用起来非常方便。同时支持自定义，开发者可以修改配置轻松就更改为自己喜欢的预设。并且其生态很繁华，包含大量开源的、优秀的 UI 框架，可以帮助开发者轻松创建好看的网站。

在做前端工程化项目（vue、react）时，使用 tailwindcss 仿佛已经成为了一种标配，很多开源项目、大型网站底层的 css 样式都是采用了它。

原子化 CSS

原子化 CSS(Atomic CSS) 是一种 CSS 架构方式，它倾向于采用小巧、单一的 class 类名，并且以看得到的效果（语义化）进行命名。

例如我们定义以下两个原子化预设样式

css

.text-red {
    color: red;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

那么只在 html 像下面这种形式使用就可以了

html


<div class="text-red text-2xl">正心全栈编程</div>

定义一些细粒度的 CSS 样式，要用的时候直接调用类名就可以实现了，这就是原子化 CSS。

使用原子化 CSS 的好处

使用原子化 CSS 可以不用死记硬背不够优雅的 CSS 属性，也不用考虑 div、span 标签起啥名，可以减少代码量并节约写代码的事件，利用 tree shaking 机制也可以使生成环境下的包体积大幅减小从而提升网页加载速度。关于其特点如下：

减少代码量：利用预设样式可以减少代码量。
提高可维护性、可重用性：预设样式的类名更易于理解、使用，大大提高可维护性。因为使用的是同一套规则，在网站的多个地方可以使用相同的预设。
改善开发效率：预设样式使用了语义化编程，在写代码的时候更符合人的直觉，大大提升开发效率。
响应式布局：预设样式中有专门为响应式布局做适配，可以很方便的开发出响应式布局网站。

Tailwind CSS 介绍

Tailwind CSS 是一款开源的原子化 CSS 样式库。它提供了很多的样式可以帮助开发者更快、更高效的搭建网站。并且提供了丰富的主题颜色、字体选项、灵活的响应式布局、夜间模式，并且支持 tree shaking 机制、支持自定义主题样式，可以让开发者轻松开发出自己喜欢的主题。

官网也提供了良好的文档教程，社区也十分繁荣有着大量的学习教程，生态也十分完善，有很多免费开源的主题 UI 可以使用。

快速上手

Tailwind CSS 大多数时候都是在 vue、react 集成使用，同时也可以使用 Tailwind CLI 模式在 Flask、Django 等后端框架中使用，关于使用教程直接参照官方文档安装配置即可。

如果想要快速体验，也可以直接访问 https://play.tailwindcss.com/ 进行调试。

使用 UI 框架

对于初学者来说，如果没有良好的 CSS 基础，入门就需要多花一些时间。比较建议先把官网的文档教程过一遍，多看一下别人是怎么做的，然后再自己多些几个 HTML 案例练习一下。

在学习过程中，可以参考一下别人的 UI 框架。

https://preline.co/ ： Preline UI 是一组基于实用程序优先的 Tailwind CSS 框架的预构建 UI 组件的开源。有丰富的样式、组件，并且有多个案例，并且提供 figma 文件。
https://daisyui.com/ ：最流行、免费、开源的顺风 CSS 组件库。
https://tailwindui.com/ ：官方打造的 UI 库，里面有一些免费的、付费的组件。
https://www.hyperui.dev/ ：免费的开源 UI 组件，主题比较卡通风。

还有一些其他的可以做选择

https://headlessui.com/ ：一套不需要写样式的 UI 库，可以用于 vue、react 项目。
https://ui.shadcn.com/ ：一套设计精美的组件，可以用于 react 项目。
https://tailkit.com/
https://sailboatui.com/
https://tailwind-elements.com/
https://tailblocks.cc/ ：用于快速搭建网站原型设计与开发。

Tailwind CSS 使用

在 tailwind 做开发的时候，非常推荐使用下面这个工具查阅一些预设样式。

预览预设样式： https://rogden.github.io/tailwind-config-viewer/

项目配置

在使用 tailwind css 之前，需要做项目配置。官方文档中有对应的教程，如果只是想快速预览，也可以访问 https://play.tailwindcss.com/ 进行调试。

在这个案例中，大部分内容可以直接在在线网站上进行调试，有部分内容必须在本地调试，我采用 flask + tailwind css 进行演示。配置方式如下

1、创建 flask 项目

shell

mkdir flask-tailwind
cd flask-tailwind
mkdir static
mkdir templates
touch app.py

创建 index.html、app.py 页面

templates/index.htmlapp.py

html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flask + tailwind</title>
</head>
<body>
<h1>
    正心全栈编程
</h1>
</body>
</html>

python

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

2、安装 tailwind css

安装

shell

npm install -D tailwindcss
npx tailwindcss init

3、配置模板文件的路径

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./templates/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

4、将加载 Tailwind 的指令添加到你的 CSS 文件中

在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

static/src/main.css

css

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

5、开启 Tailwind CLI 构建流程

运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。

shell

npx tailwindcss -i ./static/src/main.css -o ./static/css/main.css --watch

6、在你的 HTML 代码中使用 Tailwind 代码

templates/index.html

html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flask + tailwind</title>
    <link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
<h1 class="text-3xl font-bold underline">
    正心全栈编程
</h1>
</body>
</html>

文字

接下来我们从零开始写一个简单的案例，首先创建一个 div 标签，然后在里面填入 正心全栈编程 的文字内容。

html

<h1>
    正心全栈编程
</h1>

接下来我想使文字居中，当然我们也可以使用行内样式 style="text-align: center" 实现。但是我们已经开始学习 tailwind，那么最好是将之前学到的东西全部摒弃掉。如果目前对于这一块不是很熟悉，可以查看 Tailwind Text Align 关于文字的预设类名介绍。在这里我直接填入 class='text-center' 就可以了，class='text-center' 就等价于 style="text-align: center" 完成之后如下

html

<h1 class='text-center'>
    正心全栈编程
</h1>

然后再是设置文字的大小，关于文字的预设有 text-[xs,sm,base,lg,xl,2xl-9xl] 的选项，其中字体的单位是以 rem 为单位。

提示

px：绝对单位，代表屏幕中的「像素点」( pixel )。
em：相对单位，每个子元素通过「倍数」乘以父元素的 px 值。
rem：相对单位，每个子元素通过「倍数」乘以根元素的 px 值。
%：相对单位，每个子元素通过「百分比」乘以父元素的 px 值。

html

<h1 class='text-center text-lg'>
    正心全栈编程
</h1>

默认的字体颜色不是很好看，便可以使用预设的字体颜色进行修改。Tailwind CSS 提供了很多的预设颜色，只要通过 text-[颜色值]-[颜色程度 100-900] 就可以进行修改。

html

<h1 class='text-center text-lg text-green-400'>
    正心全栈编程
</h1>

上面给的是一个灰色，并且颜色程度比较低，你自己也可以尝试一下其他颜色，例如 text-blue-400 等。

盒子模型

除了设置字体，tailwind 还可以设置其他属性，例如背景（background）、颜色（color）、内边距（padding）、外边距（margin）、间距（spacing）。

接下来创建一个 div 标签，标签内包含一个 p 标签，里面给上文字内容并使其居中（text-center）并且加粗（font-bold）。在 div 标签内我们可以设置很多属性，

首先使其的宽度占满（w-full）、高度为 2.5 rem（h-10）。
设置背景色为紫色（bg-purple-200）
设置边框为圆角（rounded-md）
设置内边距为 p-2，左右外边距为 my-4

提示

宽高属性：https://tailwindcss.com/docs/width
边框属性：https://tailwindcss.com/docs/border-radius
边距属性：https://tailwindcss.com/docs/padding

html


<div class="w-full h-10 bg-purple-200 rounded-md p-2 my-4">
    <p class="text-center font-bold">正心</p>
</div>

JIT 即时生成样式

前面已经看到了很多的 tailwind 样式，但是对于我们最项目开发的时候，有些场景下还是不能满足需求。例如需要对一个盒子模型指定宽度与高度，需要指定字体大小、颜色值。我们可以预定义一些宽度、高度、字体大小、颜色值放在配置文件之中，但是这种方式也是有限，无法满足所有的需求。所以 tailwind 在 2.1 版本之后提供了新的编译器，使用 JIT 编译器允许我们即时生成样式。

例如我们需要自定义一个字体大小为 13px 的样式，这个 tailwind 默认是不提供的，那么我们就可以使用 JIT 编辑器的特殊语法 text-[13px] 进行动态生成，当然我们也可以将其改成任意你需要的字体大小值。同时这种语法不仅限与字体大小，也可以用于宽度、高度、外边距、内边距、颜色值等。

布局

布局（layout）是搭建网站是非常重要的一环，其中 flexbox 布局技术是使用最多的。

我们先介绍网页上内容是如何进行布局的。布局主要是通过不同的 CSS 属性对网页上的内容进行排版，例如长度、宽度、边框大小、浮动、定位、z-index 等等。在 tailwind css 中也提供了一些预设布局属性，例如 box sizing、float、position、overflow、z-index 等等。用的最多的是 display、position，overflow 有时候用的也会比较多。

接下来我们看一下如果在 html 使用 tailwind 预设来进行布局。

定位

首先接受一下 position，position 是对 HTML 内容进行定位，它可以使元素相对于之前的位置进行移动。可以相对之前的位置进行 相对定位（reactive） ，也可以固定在也页面上的某一个位置进行 绝对定位（absolute） ，还可以固定在视口（屏幕）的某一个位置不随着页面滑动进行变化进行 固定（fixd）。在 tailwind 中使用的时候非常方便，只要使用类似的类名就可以了。

首先创建一个 div 标签，然后给上宽高与背景颜色 h-10 w-10 bg-red-400，然后给上固定定位（fixed）与相对视口的位置（bottom-0）

html


<div class="h-10 w-10 bg-red-400 fixed bottom-0"></div>

当然也可以修改方位实现在页面中的不同位置固定。

flex 布局

接下来介绍 display 属性，display 属性可以控制元素的显示模式与布局方式，具有多种属性值，例如 block、inline、inline-block、none、flex 与 grid 。前面死中是显示模式，其中 none 属性是隐藏属性。后两种是控制布局方式，flex 布局与 grid（网格）布局。

例如我们可以先创建一个父元素 <div class='flex'></div> ，然后在其内部创建一个子元素 <div class="h-16 w-16 rounded-full bg-blue-400"></div> 。

html


<div class='flex'>
    <div class="h-16 w-16 rounded-full bg-blue-400"></div>
</div>

然后给父元素添加 justify- 的断点就可以控制子元素的对齐方式。最终给上 justify-center。

然后给将子元素复制一份，给其加上 space-x-[number] 的属性，就可以控制两个元素之间的距离。

html


<div class='flex justify-center space-x-6'>
    <div class="h-16 w-16 rounded-full bg-blue-400"></div>
    <div class="h-16 w-16 rounded-full bg-blue-400"></div>
</div>

如果对 flex 布局掌握的不够熟练，可以访问 https://flexboxfroggy.com/ 网址练习巩固一下。

官方文档

网格布局

网格布局也是使用比较多的布局方式，使用 grid 声明一个网格布局，grid-cols-5 声明一行中有五列，gap-2 声明列与列至今的间距。最后父元素为 <div class='grid grid-cols-5 gap-2'></div> ，然后在其内部添加五个 <div class="bg-cyan-400 h-12"></div> 子元素。

html


<div class="grid grid-cols-5 gap-2">
    <div class="bg-cyan-400 h-12"></div>
    <div class="bg-cyan-400 h-12"></div>
    <div class="bg-cyan-400 h-12"></div>
    <div class="bg-cyan-400 h-12"></div>
    <div class="bg-cyan-400 h-12"></div>
</div>

然后修改 grid-cols-[number] 查看效果。

参考：grid 布局 https://tailwindcss.com/docs/grid-template-columns

我们可以看出在 tailwind 中使用布局方式非常方便，比常规的定位、布局方式更加简单。如果你习惯用常规的 CSS 也很容易进行改写。

在我第一次接受 tailwind 的时候，我也并不是很喜欢它，但是知道我熟练之后，就感觉其他的 css 都不香了。他可以使我写更少的代码，并且不需要在 HTML 与 CSS 至今进行切换。

媒体查询

媒体查询是进行响应式布局的关键，tailwind 中的响应式布局是受 断点（break points） 启发，官网预设了 sm (640px)、md (768px)、lg (1024px)、xl (1280px)、2xl (1536px) 五种断点，可以用于控制在不同分辨率下的显示模式。如果你想要更多的预设断点，你也可以在主题配置当中进行添加。

当我们设置 <div class='hidden md:block'>在中等屏幕时显示</div> 时，在小于 768px 的屏幕下会进行影藏（hidden），大于等于 768px 的屏幕下会进行显示。

接下来演示一下小案例

html


<div class="hidden md:block">
    <p>屏幕大于 768px 时进行显示</p>
</div>
<div class="hidden max-md:block">
    <p>屏幕小于 768px 时进行显示</p>
</div>

当屏幕发送变化时，页面上显示的内容就会发送变化，使用起来非常方便。其中 max-md 是用于设置最大的显示分辨率，如果超出了这个范围就不生效。

提示

官方文档：https://tailwindcss.com/docs/container

伪类显示

如果你熟悉 CSS 的样式，例如 hover、active 等伪类属性，这些在做原生开发的时候编写起来非常麻烦，但是在 tailwind 下使用时非常的方便。

我们创建一个简单的按钮，给左右边距为 my-2，设置为大号圆角 rounded-lg，背景颜色为 bg-blue-500，左右边距为 px-4 ，边距为 py-2，字体颜色为 text-white，最终结果如下。

html


<button class="my-2 rounded-lg bg-blue-500 px-4 py-2 text-white">点赞</button>

当鼠标放在按钮上时，使其背景颜色变的更深，可以追加属性 hover:bg-blue-700，当鼠标再次放上去时，背景颜色就会发送变化。

如果当鼠标聚焦是有边框，可以使用 focus:outline-none 去除，然后使用 focus:ring 追加边框，使用 focus:ring-blue-300 添加自定义的淡色边框。使用 active:bg-blue-900 在鼠标点击按钮时使其颜色值更深。

深色主题

接下来我们谈谈深色模式设计，现代用户界面通常意味着以浅色和深色主题设计。与其他的预设样式一样，使用 tailwind 实现深色与浅色主题会比原生开发更加容易。

在使用之前需要定义一个切换按钮，并且需要修改默认的配置文件，追加暗色主题的配置类。直接在默认的配置文件中添加下面这一句即可

/** @type {import('tailwindcss').Config} */
export default {
  darkMode:'class',
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
}

然后添加默认的样式

html

<!-- dork mode -->
<div class="m-10 rounded-md bg-white px-6 py-8 ring-1 ring-slate-900/5 dark:bg-black">
    <h3 class="text-base tracking-widest text-slate-900 ">正心全栈编程</h3>
    <p class="mt-2 text-slate-500">如果你觉得视频对你有帮助，可以点赞、投币、关注</p>
    <button class="bg-blue-100  text-blue-900 rounded-lg mt-8 px-4 py-2 "
            onclick="document.body.classList.toggle('dark')">切换主题
    </button>
</div>

当点击按钮时，当前的组件就会变成暗色，因为文字没有适配暗色，所以还需要进行调整。

修改 h3 标签在暗色模式下为浅色 dark:text-white
追加 button 标签在暗色模式的的样式 dark:text-blue-100 dark:bg-blue-900

实际上对于暗色模式，一般会记录到浏览器，一般是通过 JavaScript 进行操作的。

html

// To showcase the demo of dark theme. )
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
        const toggleDark = document.getElementById('toggleDark')
        toggleDark.addEventListener('click', function() {
            if (document.documentElement.classList.includes('dark')) {
                document.documentElement.classList.remove('dark')
            } else {
                document.documentElement.classList.add('dark')
            }
            alert("click!")
        });
    });
</script>

快速上手 tailwindcss ​

介绍 ​

原子化 CSS ​

Tailwind CSS 介绍 ​

快速上手 ​

使用 UI 框架 ​

Tailwind CSS 使用 ​

项目配置 ​

文字 ​

盒子模型 ​

JIT 即时生成样式 ​

布局 ​

定位 ​

flex 布局 ​

网格布局 ​

媒体查询 ​

伪类显示 ​

深色主题 ​

快速上手 tailwindcss

介绍

原子化 CSS

Tailwind CSS 介绍

快速上手

使用 UI 框架

Tailwind CSS 使用

项目配置

文字

盒子模型

JIT 即时生成样式

布局

定位

flex 布局

网格布局

媒体查询

伪类显示

深色主题