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

我的家庭影音中心进化史:从群晖到用Ubuntu+CasaOS自建,省下大几千

我的家庭影音中心进化史&#xff1a;从群晖到UbuntuCasaOS自建方案 1. 为什么放弃品牌NAS选择自建方案 三年前&#xff0c;我花了大半个月工资购入了一台群晖DS920&#xff0c;当时觉得这是家庭数据管理的终极解决方案。然而随着使用深入&#xff0c;逐渐发现品牌NAS的几大痛点…...

Crypto-JS实战指南:如何构建可靠的浏览器端加密验证体系

Crypto-JS实战指南&#xff1a;如何构建可靠的浏览器端加密验证体系 【免费下载链接】crypto-js JavaScript library of crypto standards. 项目地址: https://gitcode.com/gh_mirrors/cr/crypto-js 在Web应用开发中&#xff0c;加密功能的正确性直接关系到用户数据安全…...

Realistic Vision V5.1本地AI摄影方案:支持HDR合成与多曝光融合预处理

Realistic Vision V5.1本地AI摄影方案&#xff1a;支持HDR合成与多曝光融合预处理 1. 项目概述 Realistic Vision V5.1虚拟摄影棚是一款基于Stable Diffusion 1.5生态顶级写实模型开发的本地化AI摄影工具。它通过深度优化模型参数和显存管理&#xff0c;让普通用户无需专业摄…...

3种方案彻底解决Windows系统APK安装难题:APK Installer技术解析

3种方案彻底解决Windows系统APK安装难题&#xff1a;APK Installer技术解析 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 多场景痛点直击&#xff1a;传统Android应用…...

5个超实用技巧:用Awesome Adb实现手机调试效率倍增

5个超实用技巧&#xff1a;用Awesome Adb实现手机调试效率倍增 【免费下载链接】awesome-adb ADB Usage Complete / ADB 用法大全 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-adb 副标题&#xff1a;告别繁琐操作&#xff0c;让Android设备管理效率提升10倍 …...

从STM32开发手册中快速定位信息:文脉定序系统的嵌入式应用联想

从STM32开发手册中快速定位信息&#xff1a;文脉定序系统的嵌入式应用联想 作为一名在嵌入式领域摸爬滚打多年的工程师&#xff0c;我深知那种在动辄上千页的芯片手册里“大海捞针”的痛苦。比如&#xff0c;当你需要配置一个特定的定时器中断&#xff0c;或者想确认某个GPIO引…...

Balena Etcher:三步完成系统镜像烧录,告别复杂命令的困扰

Balena Etcher&#xff1a;三步完成系统镜像烧录&#xff0c;告别复杂命令的困扰 【免费下载链接】etcher Flash OS images to SD cards & USB drives, safely and easily. 项目地址: https://gitcode.com/GitHub_Trending/et/etcher 你是否曾经因为需要制作系统启动…...

对于对话中的用户长期兴趣建模,OpenClaw 的序列推荐方法?

关于对话系统中如何捕捉用户长期兴趣这件事&#xff0c;业内琢磨了挺长时间。传统的序列推荐模型&#xff0c;比如那些基于循环神经网络或者注意力机制的&#xff0c;往往更擅长处理短期的、密集的交互序列。它们像是一个敏锐的现场观察者&#xff0c;能立刻抓住你刚才点击了什…...

别再死记硬背公式了!图解OpenCV相机标定:从像素到世界的坐标变换到底在干啥?

图解OpenCV相机标定&#xff1a;从像素到世界的坐标变换全解析 当你第一次看到相机标定的数学公式时&#xff0c;是不是感觉像在看天书&#xff1f;旋转矩阵、平移向量、内参矩阵...这些抽象的概念到底对应着现实世界中的什么&#xff1f;本文将用最直观的方式&#xff0c;带你…...

手把手教你为本地LLM(Llama/Qwen)实现打字机式流式输出,Gradio+Transformers保姆级教程

手把手教你为本地LLM实现打字机式流式输出&#xff1a;Gradio与Transformers深度整合指南 当我们在本地部署大语言模型时&#xff0c;最令人沮丧的体验莫过于盯着进度条等待完整响应。想象一下这样的场景&#xff1a;你向模型提出一个复杂问题&#xff0c;屏幕陷入长达十几秒的…...