什么是Tailwind CSS？
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，支持 hover 和 focus 样式，它们能直接在脚本标记语言中组合起来，构建出任何设计。
是否需要Tailwind Css
Tailwind Css 它是一个高度可定制化的低级 CSS 框架。对我们日常使用Vue或React开发来说，是一个有益的补充。比如常用的margin、padding、text-align以及hover样式的定义可以直接使用，当然不止于这些，还有更多快捷和高级用法，有兴趣的可以查看【官方文档】
如何引入
1、通过 npm 安装 Tailwind
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
2、创建配置文件
npx tailwindcss init -p
这将会在您的工程根目录创建 tailwind.config.js 和 postcss.config.js 两个配置文件
// tailwind.config.js
module.exports = {
prefix: 'tw-', // 前缀
content: ['./src/**/*.vue'],
theme: {
extend: {},
textColor: {
danger: '#ff5733'
}
},
plugins: []
};
可以在【配置文档】中查看详细参数设置
作为 PostCSS 插件来添加 Tailwind
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
3、包含 Tailwind 到CSS 中
如果您尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：
/* /src/style/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
4、在你的main.js文件中导入新创建的tailwind.css文件:
// main.js
import './index.css'
在项目中使用
运行项目服务 ，在应用程序中使用 Tailwind Css
示例：
<button class="bg-red-500 hover:bg-blue-700 w-60 text-lg leading-6 px-4 py-4 hover:tw-bg-light-blue-400">Hover me</button>
效果如下：
hover效果：
样式解析：
总结
- Tailwind CSS 体积小不会对我们现有环境产生副作用，
- 可以作为我们日常开发一个有利补充，提高前端开发样式灵活性
- 统一的规范也可以让团队协作保持一致性
