[Vue 配置] Vite + Vue3 项目配置 Tailwind CSS

文章归档:https://www.yuque.com/u27599042/coding_star/yqzi9olphko9ity1

Tailwind CSS 官网:https://www.tailwindcss.cn/docs/installation/using-postcss

安装

pnpm i -D tailwindcss postcss autoprefixer

生成配置文件

npx tailwindcss init -p

配置 postcss

postcss.config.js

export default {plugins: {tailwindcss: {},autoprefixer: {},},
}

配置 Tailwind CSS 生效的文件

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {// 配置 Tailwind CSS 使用暗黑模式的形式(类名 class="dark")darkMode: 'class',// content:[], 默认为空// Tailwind CSS 在如下配置的路径中的文件中生效content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

在项目中引入 Tailwind CSS

src/styles/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

在 main.js 中引入

import '@/styles/tailwind.css'

使用

Tailwind CSS 类名参考官网:https://www.tailwindcss.cn/docs/installation/using-postcss

<!-- 
w-screen ==> width: 100vw;
h-screen ==> height: 100vh;
bg-gray-100 ==> 背景颜色
dark:bg-neutral-800 ==> 暗黑模式下的背景颜色
-->
<div class="w-screen h-screen bg-gray-100 dark:bg-neutral-800"><!-- ... -->
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一起学docker系列之五docker的常用命令--操作容器的命令

目录 前言1 启动容器2 查看容器3 退出容器4 启动已经停止的容器5 重启容器6 停止容器7 删除已经停止的容器8 启动容器说明和举例9 查看容器日志10 查看容器内运行的进程11 查看容器内部细节12 进入正在运行的容器并进行交互13 导入和导出容器结语 前言 当涉及到容器化技术&…

Linux三剑客:awk的高级用法

目录 awk高级用法 awk控制语句—if-else判断 awk控制语句—while循环 awk控制语句—do-while循环 awk控制语句—for循环 shell脚本中较相似的控制语句 break和continue next awk数组 awk自定义函数 awk中调用shell 命令 这一篇主要介绍awk的高级用法&#xff0c;因为…

Qt遇到常见问题记录

1.Qt版本选择 Qt4.8.7是Qt4的终结版本&#xff0c;是Qt4系列版本中最稳定最经典的 &#xff08;很多嵌入式板子还是用Qt4.8&#xff09;&#xff0c;其实该版本是和Qt5.5差不多时间发布的。 参考链接 Qt 5.5 Released Qt5.6.3最最后支持xp系统的长期支持版本&#xff0c;Q…

Python | 机器学习之SVM支持向量机

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《人工智能奇遇记》&#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 目录结构 1. 机器学习之SVM支持向量机概念 1.1 机器学习 1.2 SVM支持向量机 2. SVM支持向量机…

vscode代码上传到gitlab

打开终端 1.1输入一下内容提交到本地仓库 PS D:\VueProject2\mall-admin-web> git add . PS D:\VueProject2\mall-admin-web> git commit -m “商品优化&#xff0c;屏蔽不要内容” 1.2提交到远程仓库 master应该被替换为 Gitee 仓库中默认的分支名称 PS D:\VueProje…

jenkins 使用原生 git clone 命令,指定ssh密钥文件

使用环境变量 GIT_SSH_COMMAND 从Git版本2.3.0可以使用环境变量GIT_SSH_COMMAND&#xff0c;如下所示&#xff1a; GIT_SSH_COMMAND"ssh -i ~/.ssh/id_rsa_example" git clone example请注意&#xff0c;-i有时可以被您的配置文件覆盖&#xff0c;在这种情况下&…

快速弄懂C++中的智能指针

智能指针是C中的一个对象&#xff0c;它的行为类似于指针&#xff0c;但它提供了自动的内存管理功能。当智能指针超出作用域时&#xff08;比如说在函数中使用智能指针指向了一个对象&#xff0c;当该函数结束时会自动销毁该对象&#xff09;&#xff0c;它会自动删除其所指向的…

合并word中参考文献-(Endnote生成)

合并word中的 两部分的参考文献引用 Merge Citations in the Word document Original&#xff1a; A is a big character [78-80] and B is another one [81-85] Modified&#xff1a; A and B are big characters [78-85] Solutions&#xff1a; Remove the space betwee…

蓝桥杯 第 3 场算法双周赛4,7题

迷宫逃脱 一眼数字三角形模型&#xff0c;因为是要求最大值&#xff0c;而且对转移状态有限制&#xff0c;所以需要注意dp状态的初始化&#xff0c;可以将所有状态赋值为-0x7f&#xff0c;然后将dp[0][1]和dp[1][0]初始化为0&#xff0c;又因为考虑到起始点a[1][1]&#xff0c…

AWD比赛中的一些防护思路技巧

## 思路1&#xff1a; 1、改服务器密码 &#xff08;1&#xff09;linux&#xff1a;passwd &#xff08;2&#xff09;如果是root删除可登录用户&#xff1a;cat /etc/passwd | grep bash userdel -r 用户名 &#xff08;3&#xff09;mysql&#xff1a;update mysql.user set…

前端分页实现

定义每页显示的数据数量&#xff08;例如每页显示10条数据&#xff09;。 根据总数据量和每页显示的数量计算出总页数。 给定当前页码&#xff0c;计算出当前页数据在左侧数据中的起始索引和结束索引。 使用起始索引和结束索引&#xff0c;从左侧数据中截取出当前页的数据。…

ROS服务(Service)通信:通信模型、Hello World与拓展

服务通讯是基于请求响应模式的&#xff0c;是一种应答机制。 用于偶然的、对时时性有要求、有一定逻辑处理需求的数据传输场景。 一、服务通讯模型 服务是一种双向通讯方式&#xff0c;它通过请求和应答的方式传递消息&#xff0c;该模型涉及到三个角色&#xff1a; Master…

vscode中Chinese (Simplified)汉化无效解决方法

问题复现 之前已经下载了 Chinese (Simplified)插件并启用了&#xff0c;都是正常的中文简体。有时候打开vscode的时候&#xff0c;会发现汉化失效了&#xff0c;如图&#xff1a; 解决方法 依次点击 扩展&#xff08;Extensions&#xff09;— Chinese (Simplified) — 选…

独立服务器应该怎么选择?

选择适合你的独立服务器方案是确保在线业务成功的关键步骤。以下是一些你需要考虑的因素&#xff1a; 1. 选择合适的主机商&#xff1a;在选择独立服务器的项目中&#xff0c;我们更注重商家的信誉和品牌&#xff0c;因为一个好的商家必须提供质量保证的产品。 2. 选择服务器…

【案例】可视化大屏

人狠话不多,直接上效果图 这里放的地图自己去实现吧,如果也想实现3D地球话,等笔者那天有心情写篇文章; 说明:script中methods部分代码是没用,可以直接删掉,根据个人情况去写, 内容:笔者也就对页面布局进行了设计,内容的填充就靠个人了 <template><div :sty…

Union(联合体、共用体)

结构体和共用体的区别在于&#xff1a;结构体的各个成员会占用不同的内存&#xff0c;互相之间没有影响&#xff1b;而共用体的所有成员占用同一段内存&#xff0c;修改一个成员会影响其余所有成员。 结构体占用的内存大于等于所有成员占用的内存的总和&#xff08;成员之间可能…

三十分钟学会zookeeper

zookeeper 一、前提知识 集群与分布式 ​ 集群&#xff1a;将一个任务部署在多个服务器&#xff0c;每个服务器都能独立完成该任务。 ​ 分布式&#xff1a;将一个任务拆分成若干个子任务&#xff0c;由若干个服务器分别完成这些子任务&#xff0c;每个服务器只能完成某个特…

Python代码运行速度提升技巧!Python远比你想象中的快~

文章目录 前言一、使用内置函数二、字符串连接 VS join()三、创建列表和字典的方式四、使用 f-Strings五、使用Comprehensions六、附录- Python中的内置函数总结关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项…

Android Studio Error “Unsupported class file major version 61“---异常信息记录

编译时异常信息 原因及解决办法 问题出在JAVA 17上&#xff0c;并且使用的Gradle JDK是&#xff1a;Android Studio java home版本17.0.1将其更改为&#xff1a;Android Studio默认JDK版本11.0.10 即可解决 操作步骤 1 2 3

“Cloud“(云)

"Cloud"&#xff08;云&#xff09;通常指的是云计算&#xff08;cloud computing&#xff09;&#xff0c;是一种通过互联网提供计算服务的模型。云计算允许用户通过网络访问和使用计算资源&#xff0c;而无需拥有或管理实际的硬件和软件基础设施。这种模型提供了一…