Tailwind教程之1 - 介绍及设置

下面介绍均以Tailwind 3.0.23为例。

介绍

Tailwind具有更大灵活性，Tailwind并没有像MUI那样规定Paper, Box等等，而是完全由使用者自己定义。

在Bootstrap中，应用样式到button上的代码类似于：

<button class="btn btn-primary">Submit</button>

也说是说，在Bootstrap，MUI中的一个class中对应了很多属性，但在Tailwind中，它的class非常多，但每个class只对应一个属性。它只定义底层的基本样式。

比如：可以这样定义一个类：

class="rounded shadow p-2 bg-white"

Tailwind为我们定义了最基本的单元，比如：rounded, shadow等，我们需要把这些基本单元组合在一起，以满足我们对样式的需求。

在使用自己的样式库的时候，随着项目的规模增大，样式库也会随之变得越来越大。但在Tailwind中就不存在这种可能，你的样式库一直是不变的。

Tailwind还能定义很多自适应的样式，比如：

<figure class="md:flex bg-gray-100 md:p-0">

上面样式意味着当屏幕尺寸大于medium时，会变为flex布局，同时padding为0。

Tailwind可以帮助我们构建一套设计系统，进而规范和约束我们的设计。比如：

• Sizing: 和大小相关
• Color: 和颜色相关，比如：bg-red-50
• Typography: 和字体相关的系统
• Shadows：和阴影相关

可以在现有Tailwind的基础上，增加额外的规范，比如对于宽度，可以增加w-57,w-58等定义来实现更细粒度的控制。

其工作流程为：

创建使用Tailwind的”非标准”CSS => Tailwind编译 => 标准css => 在htmlz中使用

Tailwind在线测试工具

如果不想安装的话就尝试tailwind功能的话，也可以使用官网提供的playground：https://play.tailwindcss.com/

在线tailwind样式库，在这里还有配好的样式：https://tailblocks.cc/

安装及测试

VS Code插件

强烈推荐安装VS Code插件：Tailwind CSS IntelliSense

创建项目并安装tailwind依赖库

mkdir tailwinddemo
cd tailwinddemo
npm -y init
npm install tailwindcss

tailwind.config.js

接下来创建Tailwind配置文件tailwind.config.js：

npx tailwindcss init

其内容为：

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

注意：

• 在项目的根目录下一定要有一个tailwind.config.js文件
• 一定要通过yarn/npm等安装tailwindcss这个插件

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

创建tailwind.css

手工创建tailwind.css

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

也可以运行如下命令生成一个css文件：

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

这样就会生成tailwind.css这个文件，后面就可以在html中引入这个文件了：

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

更新package.json

"scripts": {
  "buildcss": "tailwindcss build -i src/css/styles.css -o public/build/styles.css"
}

然后运行：

npm run buildcss

就会在public/build下生成styles.css这个文件，并把tailwind的一些预定义样式添加到这个文件中。

创建public/index.html

引入编译后的css:

<link rel="stylesheet" href="/build/styles.css"/>

测试

npm i -g live-server
live-server public

动态监测html文件变化并即时编译css

npx tailwindcss -i ./src/css/styles.css -o ./public/build/styles.css --watch