当前位置: 首页 > news >正文

Vite5+Vue3整合Tailwindcss详细教程

创建vite项目

执行命令:

npm create vite

在这里插入图片描述

启动项目

npm install -g pnpm 
pnpm i
pnpm dev

在这里插入图片描述

浏览器访问

http://localhost:5174/

在这里插入图片描述

整合Tailwindcss

安装依赖

pnpm install -D tailwindcss postcss autoprefixer

在这里插入图片描述

初始化配置文件

npx tailwindcss init

在这里插入图片描述

用webstorm打开项目

在这里插入图片描述

webstorm配置启动

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

webstorm启动项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

postcss.config.js

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

tailwind.config.js

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

src/style.css

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

第一个案例

src/App.vue

<template><div><h1 class="text-3xl font-bold underline bg-indigo-500">你好Vue3</h1></div>
</template>

效果预览

在这里插入图片描述

相关文章:

Vite5+Vue3整合Tailwindcss详细教程

创建vite项目 执行命令&#xff1a; npm create vite启动项目 npm install -g pnpm pnpm i pnpm dev浏览器访问 http://localhost:5174/ 整合Tailwindcss 安装依赖 pnpm install -D tailwindcss postcss autoprefixer初始化配置文件 npx tailwindcss init用webstorm打开…...

小程序 UI 风格魅力非凡

小程序 UI 风格魅力非凡...

【常用工具系列】Git 教程——从入门到大师

目录 前言一、Git 基础1-1、Git 简介与安装安装 Git 1-2、 Git 工作流程1-3、 Git 配置与管理用户配置查看配置 1-4、 Git 仓库操作克隆仓库推送更改拉取更新 1-5 Git 分支管理创建分支切换分支删除分支解决冲突 二、 Git 进阶2-0、 Git 标签使用创建标签查看标签检出标签推送标…...

每天坚持写java锻炼能力---第一天(6.4)

今天的目标是菜单&#xff1a; B站/马士兵的项目菜单 package java1;import java.util.Scanner;public class Test {public static void main(String[] args) {while(true){ //3.加入死循环&#xff0c;让输入一直有System.out.println();System.out.println("--->项…...

mysql 如何分布式部署

MySQL的分布式部署是一个涉及多个步骤和配置的过程&#xff0c;以确保数据库系统能够支持大规模数据存储、高并发访问和容错性。以下是MySQL分布式部署的主要步骤和要点&#xff0c;结合参考文章中的相关信息进行整理&#xff1a; 一、前期准备 环境准备&#xff1a; 选择合…...

Git的概念

Git 一些概念 **工作区&#xff1a;**电脑上你能看到的目录 **版本库&#xff1a;**工作区的隐藏目录.git。含 暂存区&#xff1a;git add后但未git commit的文件修改被添加到暂存区本地分支&#xff1a;git commit后&#xff0c;但未git push&#xff0c;即把暂存区的所有…...

【每日刷题】Day58

【每日刷题】Day58 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c;​​​​​​​ 1. 3038. 相同分数的最大操作数目 I - 力扣&#xff08;LeetCode&#xff09; 2. 868. …...

Python 的七个HTTP请求库对比

Python HTTP请求库对比 库名称特点优点缺点requests简单易用的HTTP库&#xff0c;基于urllib3。- 语法简洁- 社区支持强大- 易于上手和维护- 阻塞式调用&#xff0c;不支持异步操作- 相比aiohttp体积较大http.clientPython标准库中的低级HTTP库。- 无需安装第三方库- 提供底层…...

顶顶通呼叫中心中间件-如何配置识别不同语种的ASR

文章目录 前言联系我们创建不同语种的语音识别任务开始对接识别不同语种的ASR重启 asrproxy 程序使用识别不同语种的ASR 前言 之前讲过顶顶通的 asrproxy 程序如何对接第三方的ASR&#xff0c;比如&#xff1a;阿里云的ASR。不知道如何对接的&#xff0c;可以参考&#xff1a;…...

C# SolidWorks 二次开发-显示配置

在 SolidWorks 的二次开发中&#xff0c;显示配置&#xff08;Display States&#xff09;是一个非常重要的功能。显示配置允许用户在同一个配置&#xff08;Configuration&#xff09;下保存不同的显示状态&#xff0c;如隐藏或显示的零件、不同的颜色和材质等。本文将向新的开…...

PXE自动装机

一、PXE概述 PXE&#xff1a;c/s架构&#xff0c;允许客户端通过网络从远程服务器&#xff08;服务端&#xff09;下载引导镜像&#xff0c;加载安装文件&#xff0c;实现自动化安装操作系统。 c/s 架构&#xff1a;服务端和客户端都可以是多台。 无人值守&#xff1a;安装选…...

MQ之初识kafka

1. MQ简介 1.1 MQ的诞生背景 以前网络上的计算机&#xff08;或者说不同的进程&#xff09;传递数据&#xff0c;通信都是点对点的&#xff0c;而且要实现相同的协议&#xff08;HTTP、 TCP、WebService&#xff09;。1983 年的时候&#xff0c;有个在 MIT 工作的印度小伙突发…...

linux驱动学习(七)之混杂设备

需要板子一起学习的可以这里购买&#xff08;含资料&#xff09;&#xff1a;点击跳转 一、混杂设备 混杂设备也叫杂项设备&#xff0c;是对普通的字符设备(struct cdev)的一种封装,设计目的就是为了简化字符设备驱动设计的流程。具有以下特点&#xff1a; 1) 主设备号为10&a…...

【数据结构与算法 | 堆篇】力扣215, 703

1. 力扣215 : 数组中的第k个最大元素 (1). 题 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解…...

项目经理进入职场都会经历的三个阶段

对于项目经理而言&#xff0c;进入职场是一个不断学习和成长的过程。在这个过程中&#xff0c;项目经理通常会经历三个主要阶段&#xff0c;每个阶段都有其独特的特点和挑战。 一、基础建设与学习阶段 对于新入行的项目经理来说&#xff0c;最初的阶段主要是基础技能的积累和…...

消防设施工程乙级资质全解析:申请条件与流程“

消防设施工程乙级资质全解析&#xff1a;申请条件与流程 消防设施工程乙级资质&#xff0c;作为衡量企业从事特定规模消防设施设计能力的重要标尺&#xff0c;对于想要在消防工程领域拓展业务的企业而言至关重要。本文将全面解析申请消防设施工程乙级资质所需的条件、流程及相…...

【C语言】03.分支结构

本文用以介绍分支结构&#xff0c;主要的实现方式为if语句和switch语句。 一、if语句 1.1 if语句 if (表达式)语句表达式为真则执行语句&#xff0c;为假就不执行。在C语言中&#xff0c;0表示假&#xff0c;非0表示真.下图表示if的执行过程&#xff1a; 1.2 else语句 当…...

uniapp手机屏幕左滑返回上一页支持APP,H5

核心&#xff1a;touchstart"touchStart" touchend"touchEnd" 代码示例&#xff1a; <template><view class"payPasswordSetting" touchstart"touchStart" touchend"touchEnd"></view> </template&g…...

【Java毕业设计】基于JavaWeb的洗衣店管理系统

文章目录 摘要ABSTRACT目 录1 概述1.1 研究背景及意义1.2 国内外研究现状1.3 拟研究内容1.4 系统开发技术1.4.1 SpringBoot框架1.4.2 MySQL数据库1.4.3 MVC模式 2 系统需求分析2.1 可行性分析2.2 功能需求分析 3 系统设计3.1 功能模块设计3.2 系统流程设计3.3 数据库设计3.3.1 …...

使用sqlldr向oracle导入大量数据

&#xff08;1&#xff09;在Oracle主机安装oracle客户端 sqlldr&#xff0c;在命令行输入sqlldr&#xff0c;若有help指导即已经安装了&#xff1b; &#xff08;2&#xff09;创建一个xxx.ctl文件 这个文件是执行导入数据的语句&#xff0c;其中包含需要导入的数据&#x…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...