01.tailwind概念

tailwind 官方介绍为 无需离开HTML即可快速构建现代网站 ，那么这句话怎么解读呢？

具体来说就是 ： tailwind 提供了很多的具体类名，每一个类名背后都代表着 一段 css 的内容。之前我们需要 template 中完成 html，style 中完成  css 。那么在现在我们就可以把 css 变成 对应的类名 直接添加到 html 的 class 中。

所以我们就不需要再去切换到 style 区域，直接在 html 区域来完成对应的样式了。

02.tailwind使用

举个简单的例子

实现给一个div设置背景颜色，文字颜色 常规写法如下

<div style="background-color: #ffffff; color: #333333;">
    我是一个div
</div>

用tailwind实现

<div class="bg-white text-zinc-800">我是一个div</div>

03.tailwind自定义配置

当然tailwind官方提供许多样式，但是要自己定义样式可以在tailwind.config.js文件中配置

举例

用自己定义的colors

export default {
  content: [],
  theme: {
    extend: {
     colors: {
        red: "#FF0000"
      },
    },
  },
  plugins: [],
}

<div class="bg-red w-10 h-10"></div>

这个例子就实现了一个红色背景的div