学习Vue3 第三十四章(Vue3集成Tailwind CSS)
Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的
官网地址Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站。
对于PostCSS的插件使用,我们再使用的过程中一般都需要如下步骤:
- PostCSS 配置文件 postcss.config.js,新增 tailwindcss 插件。
- TaiWindCss插件需要一份配置文件,比如:tailwind.config.js。
PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS 中文网
postCss 功能介绍
1.增强代码的可读性 (利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮你自动为 CSS 规则添加前缀。)
2.将未来的 CSS 特性带到今天!(PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法,并根据你的目标浏览器或运行时环境来确定你需要的 polyfills,此功能基于 cssdb 实现。)
3.终结全局 CSS(CSS 模块 能让你你永远不用担心命名太大众化而造成冲突,只要用最有意义的名字就行了。)
. 4.避免 CSS 代码中的错误(通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法,也包括类似 CSS 的语法,例如 SCSS 。)
postCss 处理 tailWind Css 大致流程
- 将CSS解析成抽象语法树(AST树)
- 读取插件配置,根据配置文件,生成新的抽象语法树
- 将AST树”传递”给一系列数据转换操作处理(变量数据循环生成,切套类名循环等)
- 清除一系列操作留下的数据痕迹
- 将处理完毕的AST树重新转换成字符串
安装
1.初始化项目
npm init vue@latest
2.安装 Tailwind 以及其它依赖项
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
3.生成配置文件
npx tailwindcss init -p
配置 - Tailwind CSS 中文文档
4.修改配置文件 tailwind.config.js
2.6版本
module.exports = {purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
}
3.0版本
module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
}
5.创建一个index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
在main.ts 引入
最后npm run dev 就可以使用啦
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl"><div class="md:flex"><div class="md:flex-shrink-0"><img class="h-48 w-full object-cover md:w-48" src="http://n.sinaimg.cn/translate/20170815/OoVn-fyixtym5144510.jpg" alt="Man looking at item at a store"></div><div class="p-8"><div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div><a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customersfor your new business</a><p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideasyou can use to find your first customers.</p></div></div></div>
学习Vue3 第三十四章(Vue3集成Tailwind CSS)相关推荐
- 【正点原子FPGA连载】第三十四章RGB-LCD触摸屏实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1
1)实验平台:正点原子新起点V2开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=609758951113 2)全套实验源码+手册+视频下载地址:ht ...
- 【正点原子FPGA连载】 第三十四章双目OV5640摄像头RGB-LCD显示实验 摘自【正点原子】DFZU2EG/4EV MPSoC 之FPGA开发指南V1.0
1)实验平台:正点原子MPSoC开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=692450874670 3)全套实验源码+手册+视频下载地址: h ...
- 第三十四章 批量印刷书籍
第三十四章 批量印刷书籍 "不,这次是要必须跪下去的,因为这是对您的敬重,你竟然能够制作出来如此锋利的宝剑,那么我这个长安城的第一铁匠就当的有些太无能了." "哪里无能, ...
- 第三十四章 数论——高斯消元解线性方程组
第三十四章 数论--高斯消元解线性方程组 一.高斯消元 1.线性方程组 2.高斯消元步骤 (1)数学知识铺垫 增广矩阵和阶梯矩阵 初等变换 (2)高斯消元步骤 二.代码模板 1.问题: 2.代码 一. ...
- 现实迷途 第三十四章 响亮一巴(下)
第三十四章 响亮一巴(下) 注:原创作品,请尊重原作者,未经同意,请勿转载,否则追究责任. 耳边响起的中文或英文的浪漫情歌,闪烁的霓虹灯灯光和点点的蜡烛烛光,精致的生日蛋糕,江北深情清唱的生日歌,以及 ...
- 现实迷途 第三十四章 响亮一巴(上)
第三十四章 响亮一巴(上) 注:原创作品,请尊重原作者,未经同意,请勿转载,否则追究责任. 钟琳的出现,不免让江北的心思发生了一点点的变化,给他和钱珊之间的关系带来了一点额外的想象空间,但也只是限于一 ...
- 第三十四章 SQL函数 CURDATE
文章目录 第三十四章 SQL函数 CURDATE 大纲 描述 示例 第三十四章 SQL函数 CURDATE 返回当前本地日期的标量日期/时间函数. 大纲 {fn CURDATE()} {fn CURD ...
- 小满Vue3第三十九章(Vue开发桌面程序Electron)
建议视频教程小满Vue3(第三十九章 electron桌面程序)_哔哩哔哩_bilibili Electron官网Electron | Build cross-platform desktop app ...
- 系统架构师学习笔记_第十四章_连载
第十四章 基于ODP的架构师实践 14.1 基于ODP的架构开发过程 系统架构 反映了功能在系统系统构件中的 分布.基础设施相关技术.架构设计模式 等,它包含了架构的 原则 和 方法.构件关系 与 ...
最新文章
- linux 将当前时间往后调整2分钟_自动调整linux系统时间和时区与Internet时间同步...
- 科大星云诗社动态20201205
- Java的从业方向是什么?好找工作吗?
- JAVA中Explain注解用法,mysql之explain详解(分析索引最佳使用)
- Memcached安装与配置
- Win7系统设置ip地址的方法
- 【首发】'k4' 宏病毒专杀 原创新型excel宏病毒专杀工具
- [OpenAirInterface实战-13] :OAI 基站配置文件详解
- 《代码整洁之道》阅读分享
- 单点登录 cas 设置回调地址_单点登录终极方案之 CAS 应用及原理
- adb 下载文件到本地
- BitTorrent概述
- SQL实战45.将titles_test表名修改为titles_2017
- 【转帖】绝版破解软件教程就不信你学不会!!
- 【XSY3367】青春野狼不做姐控偶像的梦(线段树)
- 利用Selenium秒填朋友圈各种问卷星调查问卷
- 学习python需要什么?
- Soul源码学习(一)——soul原理及环境搭建
- 跟黑马视频学习微信小程序的笔记
- (精)反激式开关电源