Vue 3 + Vite 项目中安装 Tailwind CSS

news2024/11/24 22:56:09

官网:安装 - 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: {},
    fontFamily: {
    
    },
  },
  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.coloradmin.cn/o/1941921.html

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

相关文章

鱼眼摄像头-opencv校准(基于棋盘+畸变表)

一:主要参数说明 1:内参矩阵K 是3*3的矩阵,其类似格式 Knp.array([ [389.2109574522624, 0.0, 630.2525667489842], [0.0, 388.505701978078, 360.7886749292513], [0.0, 0.0, 1.0]]) 2:畸变系数 针对鱼眼相机:…

DVWA靶场超(详细教程)--跨站攻击(XSS+CSRF)

一、XSS 反射型xss 打开dvwa的Reflected Cross Site Scripting (XSS) (1)low等级 查看页面源码(ctrlu)该界面有提交按钮和输入框 在输入框随便输入点字符,点击提交 可以看见输入的helloword嵌入到界面中。 View sou…

MybatisPlus的使用与详细讲解

今天我们来讲解一下Mybatis的升级版,就是MybatisPlus. MybatisPlus是如何获取实现CRUD的数据库表信息的? 默认以类名驼峰转下划线作为表名 默认把名为id的字段作为主键 默认把变量名驼峰转下划线作为表的字段名 1.MybatisPlus中比较常见的注解 TableN…

红人点集登录逆向+接口逆向:SHA256算法和Webpack反爬

🔍 引言 红人点集采取了一系列加密和限制措施,主要是对于参数加密和登录token加密。今天利用Python与JavaScript逆向工程技术,实现逆向登录然后请求接口获取数据。 🔍 思路与步骤详解 🔧 解密登录接口参数&#xf…

安防视频监控EasyCVR视频汇聚平台修改配置后无法启动的原因排查与解决

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台基于云边端一体化架构,兼容性强、支持多协议接入,包括国标GB/T 28181协议、部标JT808、GA/T 1400协议、RTMP、RTSP/Onvif协议、海康Ehome、海康SDK、大华SDK、华为SDK、宇视SDK、乐橙SDK、萤石云SD…

【Echarts示例】类甘特图的时间线图表

[示例] 类甘特图的时间线图表 const data [{ name: 预备阶段, start: 0, end: 2 },{ name: 战略展开, start: 2, end: 4 },{ name: 指挥所启动, start: 4, end: 6 },{ name: 电子对抗准备, start: 5.5, end: 7 },{ name: 首轮导弹发射, start: 7, end: 8.5 },{ name: 电子对抗…

Spark内核的设计原理

导读: 本期是DataFun深入浅出Apache Spark第一期的分享,主讲老师耿嘉安开场介绍了自己的从业经历,当前就职的数新网络与Spark相关的两款产品赛博数智引擎CyberEngine和赛博数据智能平台CyberData。 本次分享题目为《Spark内核的设计原理》&…

【测开能力提升-fastapi框架】fastapi能力提升 - 中间件与CORS

1. 中间件 1.1 介绍(ChatGPT抄的,大致可以理解) 一种机制,用于在处理请求和响应之前对其进行拦截、处理或修改。中间件可以在应用程序的请求处理管道中插入自定义逻辑,以实现一些通用的功能,如身份验证、…

系统架构设计师教程 第3章 信息系统基础知识-3.8 典型信息系统架构模型-解读

系统架构设计师教程 第3章 信息系统基础知识-3.8 典型信息系统架构模型-解读 3.8.1 政府信息化与电子政务3.8.1.1 电子政务的概念3.8.1.2 电子政务的内容3.8.1.2.1 政府与政府3.8.1.2.2 政府对企/事业单位3.8.1.2.3 政府对居民3.8.1.2.4 企业对政府3.8.1.2.5 居民对政府 3.8.1…

第一弹:基于ABAP OLE技术实现对服务器文件进行读写操作

前言 最近遇到这样一个需求,需要对BW服务器上的文件进行下载的同时写入每个用户相对应的数据。之前的服务器模版是一个死模版,对于这样的要求,我就想到了OLE技术,那么什么是OLE技术呢? 一、什么是OLE技术&#xff1f…

创建最佳实践创建 XML 站点地图--SEO

您是否正在努力让您的网站被搜索引擎索引?您想提高您网站的搜索引擎知名度吗?如果是,您可能会错过 XML 站点地图的重要性。XML 站点地图在改善您网站的 SEO 方面发挥着至关重要的作用。‍ XML 站点地图是您网站结构的蓝图,可帮助…

基于DPUSmartNic的云原生SDN解决方案

1. 方案背景与挑战 随着云计算,大数据和人工智能等技术的蓬勃发展,数据中心面临着前所未有的数据洪流和计算压力,这对SDN提出了更高的性能和效率要求。自云原生概念被提出以来,Kubernetes为云原生应用的落地提供了一个轻量级&am…

tolua++bug,int64强转double导致值不对

我C传值给lua,接口用的tolua。传过去值不对,我都懵逼了。是C强转问题。

C#中栈和堆以及修饰符

关于堆中字符串的存放 string s1"123" string s2"123" string s1"456" 此时s1输出为456 而s2仍然为123 因为在使用 String str "字符串" 的方式来创建String变量的时候,那么String的值便会存储在String常量池中&#x…

DevExpress中文教程 - 如何在.NET MAUI应用中实现Material Design 3?

DevExpress .NET MAUI多平台应用UI组件库提供了用于Android和iOS移动开发的高性能UI组件,该组件库包括数据网格、图表、调度程序、数据编辑器、CollectionView和选项卡组件等。 获取DevExpress v24.1正式版下载 Material Design是一个由Google开发的跨平台指南系统…

linux、windows、macos清空本地DNS缓存

文章目录 Linux:Windows:macOS: Linux: 对于使用systemd的操作系统(如CentOS 7、Ubuntu 16.04),可以使用以下命令重启systemd-resolved服务来清除缓存: sudo systemctl restart sys…

Mistral联合英伟达开源12B小模型:碾压Llama 3,单张4090可跑

小模型,成为本周的AI爆点。 与动辄上千亿参数的大模型相比,小模型的优势是显而易见的:它们不仅计算成本更低,训练和部署也更为便捷,可以满足计算资源受限、数据安全级别较高的各类场景。因此,在大笔投入大模型训练之余…

【ROS2】高级:安全-设置访问控制

目标:限制节点可以使用的主题。 教程级别:高级 时间:20 分钟 内容 背景 修改 permissions.xml签署策略文件 启动节点 使用模板 背景 在继续之前,请确保您已完成设置安全教程。 权限非常灵活,可以用来控制 ROS 图中的许…

pytorch 笔记:torch.optim.Adam

torch.optim.Adam 是一个实现 Adam 优化算法的类。Adam 是一个常用的梯度下降优化方法,特别适合处理大规模数据集和参数的深度学习模型 torch.optim.Adam(params, lr0.001, betas(0.9, 0.999), eps1e-08, weight_decay0, amsgradFalse, *, foreachNone, maximizeFa…

MySQL root用户密码忘记怎么办(Reset root account password)

在使用MySQL数据库的的过程中,不可避免的会出现忘记密码的现象。普通用户的密码如果忘记,可以用更高权限的用户(例如root)进行重置。但是如果root用户的密码忘记了,由于root用户本身就是最高权限,那这个方法…