两步在 Vite 中配置 Tailwindcss

第一步:安装依赖

npm i -D tailwindcss @tailwindcss/vite

第二步:引入 tailwindcss 更改配置

// src/main.js
import 'tailwindcss/index'
// vite.config.js
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'export default {plugins: [vue(), tailwindcss()]
}

使用

<div class="text-red-500 text-[40px]">演示</div>

演示图片

总结

  • 以上是基于 tailwindcss@4.x 的配置方法
  • 这是基于 tailwindcss@3.x 的配置方法

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

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

相关文章

执行js生成json文件并动态写入数据

项目中需要执行js后生成一个新的json文件&#xff0c;并在该文件内写入json数据&#xff0c; 示例&#xff1a;生成一个json文件&#xff0c;内含执行这个js的时间戳作为json文件中的数据。 新建一个js文件create.js&#xff0c;js代码如下&#xff1a; const fs require(fs)…

报名丨Computer useVoice Agent :使用 TEN 搭建你的 Mac Assistant

与 TEN 相聚在「LET’S VISION 2025」大会&#xff0c;欢迎来展位上跟我们交流。这次我们还准备了一场聚焦「computer use」的工作坊&#xff0c;功能新鲜上线&#xff0c;线下首波体验&#xff01; &#x1f4c5; TEN 展位&#xff1a;2025年3月1日-2日 TEN workshop&#x…

深入剖析 Apache Shiro550 反序列化漏洞及复现

目录 前言 一、认识 Apache Shiro 二、反序列化漏洞&#xff1a;隐藏在数据转换中的风险 三、Shiro550 漏洞&#xff1a;会话管理中的致命缺陷 四、漏洞危害&#xff1a;如多米诺骨牌般的连锁反应 五、漏洞复现&#xff1a;揭开攻击的神秘面纱 &#xff08;一&#xff0…

【油猴脚本/Tampermonkey】DeepSeek 服务器繁忙无限重试(20250214优化)

目录 一、 引言 二、 逻辑 三、 源代码 四、 添加新脚本 五、 使用 六、 BUG 七、 优化日志 1.获取最后消息内容报错 2.对话框切换无法正常使用 一、 引言 deepseek演都不演了&#xff0c;每次第一次提问就正常&#xff0c;后面就开始繁忙了&#xff0c;有一点阴招全…

uniapp - iconfont下载本地并且运用至项目上

1、项目中创建一个文件夹放置iconfont相关文件&#xff0c;例如src/assets/iconfont&#xff08;名称自己定义&#xff09; 2、在iconfont下载项目至本地 3、解压后把文件复制进1的文件夹中 4、修改src/assets/iconfont - iconfont.css里的font-face的src地址&#xff0c;修…

SpringBoot:使用spring-boot-test对web应用做单元测试时如何测试Filter?

对SpringBoot的Web应用做单元测试时&#xff0c;一般会使用spring-boot-test&#xff0c;pom.xml中会添加如下内容&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><…

vue学习笔记10

ChatGPT & Copilot AI 的认知 两个工具 1、ChatGPT 3.5 2、Github Copilot ChatGPT 的基本使用 - Prompt 优化 AI 互动的过程中&#xff0c;容易出现的问题&#xff1a; 1、 AI未能理解问题的核心要点 2、 AI的回答过于宽泛 或 过于具体 3、 AI提供了错误的信息或…

vue前端可视化大屏页面适配方案

参考了其他博主的代码&#xff0c;但发现会有滚动条&#xff0c;并且居中的位置不太对&#xff0c;所以改了一下css&#xff0c;修复了这些问题&#xff0c;直接上代码 <template> <div class"ScaleBoxA"><divclass"ScaleBox"ref"Sca…

小米 R3G 路由器(Pandavan)实现网络打印机功能

小米 R3G 路由器&#xff08;Pandavan&#xff09;实现网络打印机功能 一、前言 家中有多台 PC 设备需要打印服务&#xff0c;但苦于家中的 Epson L380 打印机没有网络打印功能&#xff0c;并且配置 Windows 共享打印机实在是过于繁琐且需要共享机保持唤醒状态过于费电。想到…

2.11学习

misc buu-荷兰宽带泄露 下载附件得到了一个后缀为.bin的文件 是宽带数据文件&#xff0c;用RouterPassView工具进行查看。大多数现代路由器都可以让您备份一个文件路由器的配置文件&#xff0c;然后在需要的时候从文件中恢复配置。路由器的备份文件通常包含了像您的ISP的用户…

智能手表表带圆孔同心度检测

在智能手表的制造工艺中&#xff0c;表带圆孔同心度检测是确保产品品质的关键环节。精准的同心度不仅关乎表带与表体的完美适配&#xff0c;更直接影响用户的佩戴舒适度和产品的整体美观度。稍有偏差&#xff0c;就可能导致表带安装困难、佩戴时出现晃动&#xff0c;甚至影响智…

【鸿蒙开发】第二十八章 应用状态的讲解、状态持久化、网络管理、应用数据持久化、文件上传下载

目录 1 应用状态 1.1 LocalStorage&#xff1a;页面级UI状态存储 1.1.1 两个页面共享一个对象 1.1.2 页面间共享 1.1.3 应用逻辑中使用 1.2 AppStorage&#xff1a;应用全局的UI状态存储 1.2.1 概述 1.2.2 基本用法 1.2.3 经常使用的方法 1.3 PersistentStorage&#x…

Linux驱动层学习:LED 驱动开发

前置知识&#xff1a; 1、地址映射 MMU 全称叫做 Memory Manage Unit&#xff0c;也就是内存管理单元。 MMU 主要完成的功能如下&#xff1a; ①、完成虚拟空间到物理空间的映射。 ②、内存保护&#xff0c;设置存储器的访问权限&#xff0c;设置虚拟存储空间的缓冲特性。 第…

HTML5--网页前端编程(下)

HTML5–网页前端编程(下) 9.常用标签下 (1)表格标签 用来展示数据,显示数据,规整条理,可读性好 基本语法 <table><tr> <td>单元格内的文字</td> <td>单元格内的文字</td>… </tr> <tr> <td>单元格内的文字&l…

从概念到落地:DeepSeek携手蓝耘平台,解锁AI赋能生活的实践

欢迎来到ZyyOvO的博客✨&#xff0c;一个关于探索技术的角落&#xff0c;记录学习的点滴&#x1f4d6;&#xff0c;分享实用的技巧&#x1f6e0;️&#xff0c;偶尔还有一些奇思妙想&#x1f4a1; 本文由ZyyOvO原创✍️&#xff0c;感谢支持❤️&#xff01;请尊重原创&#x1…

App UI自动化--Appium学习--第二篇

如果第一篇在运行代码的时候出现问题&#xff0c;建议参考我的上一篇文章解决。 1、APP界面信息获取 adb logcat|grep -i displayed代码含义是获取当前应用的包名和界面名。 根据日志信息修改代码当中的包名和界面名&#xff0c;就可以跳转对应的界面。 2、界面元素获取 所…

03【FreeRTO队列-如何获取任务信息与队列的动静态创建】

一.利用 vTaskList()以及 vTaskGetRunTimeStats()来获取任务的信息 1.现象与开启启用宏 freeRTOSConfig.h //必须启用 #define configUSE_TRACE_FACILITY 1 #define configGENERATE_RUN_TIME_STATS 1 #define configUSE_STATS_FORMATTING_FUNCTIONS…

初学总结SpringBoot项目在mac上环境搭建和运行

mac一定要安装上homebrew&#xff0c;这个玩意在mac上搭建环境贼拉好用&#xff0c;打开终端安装国内镜像的 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"1. brew安装maven brew install maven2.修改maven国内镜像 ma…

TCP/IP参考模型和网络协议

由于国防部担心他们一些重要的主机、路由器和互联网关可能会突然崩溃&#xff0c;所以网络必须实现的另一目标是网络不受子网硬件损失的影响&#xff0c;已经建立的会话不会被取消&#xff0c;而且整个体系结构必须相当灵活。 TCP/IP是一组用于实现网络互连的通信协议。Interne…

网络安全 | 安全信息与事件管理(SIEM)系统的选型与实施

网络安全 | 安全信息与事件管理&#xff08;SIEM&#xff09;系统的选型与实施 一、前言二、SIEM 系统的功能概述2.1 数据收集与整合2.2 实时监控与威胁检测2.3 事件响应与自动化2.4 合规性管理 三、SIEM 系统选型的关键因素3.1 功能需求评估3.2 可扩展性与性能3.3 易用性与可维…