Vue 3 + Vite 项目中安装 Tailwind CSS

官网:安装 - TailwindCSS中文文档 | TailwindCSS中文网

tips:只按照官网的配置可能会导致样式不加载/加载不生效的问题

1、正确安装指令

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p 

 自动生成 ​tailwind.config.js​ 和 ​postcss.config.js​ 文件

2、修改tailwind.config.js文件,postcss.config.js配置不变

/** @type {import("tailwindcss").Config} */
export default {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
};

3、创建tailwind.css文件

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

4、main.ts或者是main.js文件内添加

import "@a/style/tailwind.css";

5、vscode安装插件Tailwind CSS IntelliSense

6、使用

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

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

相关文章

【C++】string类(上)

个人主页~ string 一、标准库中的string类1、什么是string类2、string类的常用接口讲解(1)string类的常见构造(2)string类的容量操作(3)string类对象的访问及遍历(4)string类对象的修…

Java语言程序设计——篇七(2)

🌿🌿🌿跟随博主脚步,从这里开始→博主主页🌿🌿🌿 封装性与多态 封装性与访问修饰符类的访问权限类成员的访问权限 🌠防止类扩展和方法覆盖实战演练 抽象类实战演练 对象转换实战演练…

lambda表达式,真题示例

Lambda表达式 它使代码更加简洁、易读,函数式编程增强了代码的表达力。常用于对集合的操作,如遍历、过滤、转换等。 Lambda表达式的形式: 参数, 箭头(->) 以及一个表达式: (String first, String sec…

Android P Input设备变化监听 Storage设备变化监听

InputManager.java中实现了InputDeviceListener接口,只需要新建一个类 implements InputDeviceListener ,并且将类实例化注册给InputManager.getInstance().registerInputDeviceListener即可。 StorageManager同理 StorageManager中会调用StorageEventL…

还手动抄字幕?学会这3个视频转文字方法,轻松提取视频中的字幕!

大家有尝试过考试前极限抱佛脚吗? 在下不才,曾经试过一次,轻松在及格线低空飘过【大家不要学不要学不要学,重要的事情说三遍!!!】 至于我当时究竟是怎么做到的呢?其实这里面有点小…

网络原理_初识

目录 一、局域网LAN 二、广域网WAN 三、网络通信基础 3.1 IP地址 3.2 端口号 3.3 协议 3.4 五元组 3.5 OSI七层模型 3.6 TCP/IP五层模型 3.7 网络设备所在分层 3.8 封装和分用 总结 一、局域网LAN 局域网,即 Local Area Network,Local 即标…

“微软蓝屏”全球宕机,敲响基础软件自主可控警钟

上周五,“微软蓝屏”“感谢微软 喜提假期”等词条冲上热搜,全球百万打工人受此影响,共同见证这一历史性事件。据微软方面发布消息称,旗下Microsoft 365系列服务出现访问中断。随后在全球范围内,包括企业、政府、个人在…

【定积分】

框架 概念,性质定积分计算基本特色变限积分及其导数反常积分(广义积分)定积分应用面积体积 讲解 1.概念,性质: 定积分就是求出曲线的面积;性质中要注意几个不等式的比较 2.定积分计算: 基本&…

物理机 gogs+jenkins+sonarqube 实现CI/CD

一、部署gogs_0.11.91_linux_amd64.tar.gz gogs官网下载&#xff1a;https://dl.gogs.io/ yum -y install mariadb-serversystemctl start mariadbsystemctl enable mariadbuseradd gittar zxvf gogs_0.11.91_linux_amd64.tar.gzcd gogsmysql -u root -p < scripts/mysql.…

vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配

vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配&#xff01;有了上次的内容铺垫&#xff0c;我们可以根据用户的token来判定&#xff0c;到底是显示什么内容了。 1&#xff1a;我们在对应的导航组件内修改完善一下内容即可。 <script setup> import { useUserSt…

svn软件总成全内容

SVN软件总成 概述&#xff1a;本文为经验型文档 目录 D:\安装包\svn软件总成 的目录D:\安装包\svn软件总成\svn-base添加 的目录D:\安装包\svn软件总成\tools 的目录D:\安装包\svn软件总成\tools\sqlite-tools-win32-x86-3360000 的目录D:\安装包\svn软件总成\安装包-----bt lo…

C#调用OpenCvSharp实现图像的角点检测

角点检测用于获取图像特征&#xff0c;以支撑运动检测、目标识别、图像匹配等方面的应用。常用的角点检测算法包括Kitchen-Rosenfeld算法、Harris算法、KLT算法、SUSAN算法等&#xff0c;本文学习并测试Harris角点检测算法。   关于Harris算法的数学原理请见参考文献1的第18、…

C++内存管理和模板/stl初识

前言 c兼容C语言&#xff0c;但它因为有类和对象的概念&#xff0c;C语言原生的那套内存管理函数在特定场景下还是有些捉襟见肘的&#xff0c;为此c在C语言的基础上引入新的内存管理方案&#xff0c;今天我们就来简单的认识一下c的内存管理。除此之外&#xff0c;模板也是c引入…

Jetpack Compose 通过 OkHttp 发送 HTTP 请求的示例

下面是一个使用 Kotlin 和 Jetpack Compose 来演示通过 OkHttp 发送 HTTP 请求的示例。这个示例包括在 Jetpack Compose 中发送一个 GET 请求和一个 POST 请求&#xff0c;并显示结果。 添加okhttp依赖 首先&#xff0c;在你的 build.gradle.kts 文件中添加必要的依赖&#xf…

父子组件生命周期的执行顺序

在Vue中&#xff0c;父子组件的生命周期执行顺序是一个重要的概念&#xff0c;它帮助开发者理解组件之间的加载、更新和销毁过程。以下是对父子组件生命周期执行顺序的详细解释&#xff1a; 一、加载渲染过程 当Vue实例开始创建时&#xff0c;会按照以下顺序执行生命周期钩子…

PACS医学影像临床信息系统,C#影像归档和通信系统源码,PACS源码,支持图像的获取、传输、浏览、打印、测量、重建、对比、存储、处理,电子胶片影像管理等

医学影像临床信息系统具有图像采集、显示、存储、传输和管理等功能&#xff0c;支持DICOM影像设备和非DICOM影像设备&#xff0c;可以识别CT、MR、CR/DR、X光、DSA、B超、NM、SC等设备的图像类型&#xff0c;可对数字影像进行无损压缩和有损压缩处理。C/S体系结构的多媒体数据库…

STM32智能照明控制系统教程

目录 引言环境准备智能照明控制系统基础代码实现&#xff1a;实现智能照明控制系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;照明管理与优化问题解决方案与优化收尾与总结 1. 引言 智能照明控制系统通…

独立游戏《星尘异变》UE5 C++程序开发日志8——实现敏感词过滤功能(AC自动机)

在游戏中经常会有需要玩家输入一些内容的功能&#xff0c;例如聊天&#xff0c;命名等&#xff0c;这款游戏只有在存档时辉用到命名功能&#xff0c;所以这个过滤也只是一个实验性的功能&#xff0c;我们将使用AC自动机来实现&#xff0c;这是在我们把“csdn”这个词设置为屏蔽…

解决zabbix-server7 中文乱码问题

系统使用centos9 安装中文支持 yum install -y fontconfig langpacks-zh_CN.noarch 检查是否已有中文字体&#xff1a; fc-list :langzh 看到 直接使用GOOGLE的字体 ln -fs /usr/share/fonts/google-noto-cjk/NotoSansCJK-DemiLight.ttc /etc/alternatives/zabbix-web-fo…

bool数组的理解和应用[C++]

文章目录 bool数组的用法bool数组的定义声明bool数组的初始化访问和修改数组元素遍历数组 运用bool数组简单代码 在今天做题中发现了bool类不仅能用于函数类型还能用于数组类型&#xff0c;好奇查了查发现bool还有很多用处&#xff1a;基本变量&#xff0c;在枚举类型中会用到&…