面试 - tailwind css样式库的使用

简介

集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
tailwind 能够快速将样式添加到 HTML 元素中，并提供了大量的开箱即用的设计样式

举例

在index.html的div标签上使用了flex这个类名，tailwind编译之后会生成flex的样式并将内容输出到output.css文件中

// index.html
<div class="flex">hello world</div>
​
// output.css
.flex {
    display: flex;
}

但这跟在项目中直接全局写类名然后使用，有什么区别呢？

其实我们在搭建tailwind的项目过程中就可以发现，tailwind存在于JIT引擎（Just-In-Time），就是在编译过程才去扫描我们的html文件，在这个过程中去识别使用了哪些类名，然后才生成对应的样式。

相比于预先直接全局写好大量的类名，JIT机制的优点在于精简紧凑，样式所占用的空间较小，因为用到了才会生成。

上手

安装依赖

• 步骤一：新建一个test-tailwindcss文件夹，然后输入以下命令：

# 初始化package.json文件
npm init -y
​
# 安装tailwind
npm install -D tailwindcss
​
# 创建tailwind.config.js
npx tailwindcss init

----------------------------------------------------------
# 最后一行生成了文件tailwind.config.js,内容如下：

module.exports = {
  content: ["./src/**/*.{html,js}"],//让他能够定位到项目中的html文件的位置
  theme: {
    extend: {},
  },
  plugins: [],
}

• 步骤二：新建index.html和input.css文件
  在input.css文件里载入tailwind的三大部件

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

• 最后一步，使用tailwindcss对当前项目进行编译然后输出css文件

npx tailwindcss -i ./src/input.css -o ./dist/output.css

---

运行完以上的命令之后，我们就可以看到在dist文件夹内多出了一个output.css文件，这个文件的末尾几行便是我们在index.html文件中用到的例如flex、font-bold类的样式：

使用tailwind之后，我们再也不需要写样式了，直接使用tailwind预先约定好的类名即可。这样极大地提升了我们的开发效率