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项目 执行命令: 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)
今天的目标是菜单: B站/马士兵的项目菜单 package java1;import java.util.Scanner;public class Test {public static void main(String[] args) {while(true){ //3.加入死循环,让输入一直有System.out.println();System.out.println("--->项…...
mysql 如何分布式部署
MySQL的分布式部署是一个涉及多个步骤和配置的过程,以确保数据库系统能够支持大规模数据存储、高并发访问和容错性。以下是MySQL分布式部署的主要步骤和要点,结合参考文章中的相关信息进行整理: 一、前期准备 环境准备: 选择合…...

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

【每日刷题】Day58
【每日刷题】Day58 🥕个人主页:开敲🍉 🔥所属专栏:每日刷题🍍 🌼文章目录🌼 1. 3038. 相同分数的最大操作数目 I - 力扣(LeetCode) 2. 868. …...
Python 的七个HTTP请求库对比
Python HTTP请求库对比 库名称特点优点缺点requests简单易用的HTTP库,基于urllib3。- 语法简洁- 社区支持强大- 易于上手和维护- 阻塞式调用,不支持异步操作- 相比aiohttp体积较大http.clientPython标准库中的低级HTTP库。- 无需安装第三方库- 提供底层…...

顶顶通呼叫中心中间件-如何配置识别不同语种的ASR
文章目录 前言联系我们创建不同语种的语音识别任务开始对接识别不同语种的ASR重启 asrproxy 程序使用识别不同语种的ASR 前言 之前讲过顶顶通的 asrproxy 程序如何对接第三方的ASR,比如:阿里云的ASR。不知道如何对接的,可以参考:…...
C# SolidWorks 二次开发-显示配置
在 SolidWorks 的二次开发中,显示配置(Display States)是一个非常重要的功能。显示配置允许用户在同一个配置(Configuration)下保存不同的显示状态,如隐藏或显示的零件、不同的颜色和材质等。本文将向新的开…...
PXE自动装机
一、PXE概述 PXE:c/s架构,允许客户端通过网络从远程服务器(服务端)下载引导镜像,加载安装文件,实现自动化安装操作系统。 c/s 架构:服务端和客户端都可以是多台。 无人值守:安装选…...

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

linux驱动学习(七)之混杂设备
需要板子一起学习的可以这里购买(含资料):点击跳转 一、混杂设备 混杂设备也叫杂项设备,是对普通的字符设备(struct cdev)的一种封装,设计目的就是为了简化字符设备驱动设计的流程。具有以下特点: 1) 主设备号为10&a…...
【数据结构与算法 | 堆篇】力扣215, 703
1. 力扣215 : 数组中的第k个最大元素 (1). 题 给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素。 请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解…...

项目经理进入职场都会经历的三个阶段
对于项目经理而言,进入职场是一个不断学习和成长的过程。在这个过程中,项目经理通常会经历三个主要阶段,每个阶段都有其独特的特点和挑战。 一、基础建设与学习阶段 对于新入行的项目经理来说,最初的阶段主要是基础技能的积累和…...
消防设施工程乙级资质全解析:申请条件与流程“
消防设施工程乙级资质全解析:申请条件与流程 消防设施工程乙级资质,作为衡量企业从事特定规模消防设施设计能力的重要标尺,对于想要在消防工程领域拓展业务的企业而言至关重要。本文将全面解析申请消防设施工程乙级资质所需的条件、流程及相…...

【C语言】03.分支结构
本文用以介绍分支结构,主要的实现方式为if语句和switch语句。 一、if语句 1.1 if语句 if (表达式)语句表达式为真则执行语句,为假就不执行。在C语言中,0表示假,非0表示真.下图表示if的执行过程: 1.2 else语句 当…...
uniapp手机屏幕左滑返回上一页支持APP,H5
核心:touchstart"touchStart" touchend"touchEnd" 代码示例: <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导入大量数据
(1)在Oracle主机安装oracle客户端 sqlldr,在命令行输入sqlldr,若有help指导即已经安装了; (2)创建一个xxx.ctl文件 这个文件是执行导入数据的语句,其中包含需要导入的数据&#x…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...