宝坻区建设路小学网站,网站建设绩效目标,园林景观在线设计平台,小视频网站开发什么是Tailwind CSS#xff1f;
Tailwind CSS 是一个功能类优先的 CSS 框架#xff0c;它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类#xff0c;支持 hover 和 focus 样式#xff0c;它们能直接在脚本标记语言中组合起来#xff0c;构建出任何设计。
…什么是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 tailwindcsslatest postcsslatest autoprefixerlatest2、创建配置文件
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 classbg-red-500 hover:bg-blue-700 w-60 text-lg leading-6 px-4 py-4 hover:tw-bg-light-blue-400Hover me/button效果如下 hover效果 样式解析
总结
Tailwind CSS 体积小不会对我们现有环境产生副作用可以作为我们日常开发一个有利补充提高前端开发样式灵活性统一的规范也可以让团队协作保持一致性
