当前位置: 首页 > 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…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...