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)

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

Known框架实战演练——进销存基础数据

本文介绍如何实现进销存管理系统的基础数据模块,基础数据模块包括商品信息、供应商管理和客户管理3个菜单页面。供应商和客户字段相同,因此可共用一个页面组件类。 项目代码:JxcLite开源地址: https://gitee.com/known/JxcLite …

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 即标…

Kylin Cube监控:掌握数据立方体的资源使用

Kylin Cube监控:掌握数据立方体的资源使用 Apache Kylin是一个高性能的分布式分析引擎,它通过构建数据立方体(Cube)来加速对大数据集的查询。随着企业对数据的依赖日益增加,监控Cube的内存和磁盘使用变得尤为重要。本…

AIX下编译静态库问题--笔记

编译某个静态库 ar rcs ../libhttpclient.a httpclient.o 一大段错误如下: BFD: httpclient.o: Unrecognized storage class 111 for .text symbol ._ZNSt11char_traitsIcE6lengthEPKc BFD: httpclient.o: Unrecognized storage class 111 for .text symbol ._Zn…

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

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

【定积分】

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

HTML + CSS编程规范

编程规范 HTML CSS 命名规范 HTML CSS 命名规范 1. 命名需要是具备语义性的单词,不能用 数字 拼音 数字,符号开头正确示范 : wrap description title content错误示范 : aaaa a1 $we 4tdds 2. 命名需要多个单词连接的情况下, 标记语言中可以使用 …

Docker use experience

#docker command docker load -i <镜像文件.tar> docker run -it -d --name 容器名 -p 宿主机端口:容器端口 -v 宿主机文件存储位置:容器内文位置 镜像名:Tag /bin/bash docker commit -m"提交的描述信息" -a"作者" 容器ID 要…

物理机 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…

【Vue】vue概述

1、简介 Vue.js&#xff08;简称Vue&#xff09;是一款用于构建用户界面的渐进式JavaScript框架。由前Google高级软件工程师尤雨溪&#xff08;Evan You&#xff09;于2014年创建&#xff0c;是一个独立且社区驱动的开源项目。Vue.js基于标准的HTML、CSS和JavaScript&#xff…

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

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

vuex及其使用方法

Vuex 是 Vue.js 框架中用于构建大型单页应用&#xff08;SPA&#xff09;的状态管理库。它的核心思想是将组件的状态集中管理&#xff0c;使得状态的变更更加可预测和易于维护。下面我会详细介绍 Vuex 的几个关键概念&#xff0c;并给出一个详细的示例。让我们更深入地探讨 Vue…

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

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