什么是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 './style/tailwind.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 体积小不会对我们现有环境产生副作用,
- 可以作为我们日常开发一个有利补充,提高前端开发样式灵活性
- 统一的规范也可以让团队协作保持一致性