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

VUE3+Vite使用TailwindCSS【若依前后端分离框架】

news 来源：原创 2025/9/9 21:21:37
  1. 参考：https://tailwind.nodejs.cn/docs/guides/vite#vue 和 https://blog.csdn.net/hjl_and_djj/article/details/144694485
  2. 依次运行命令： cnpm install -D tailwindcss@3.4.17 postcss autoprefixer
  3. npx tailwindcss init -p
  4. 修改配置文件tailwind.config.js：
/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}
  1. 根目录下修改生成的style.css或styles/index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 根据参考，设置vscode忽略未知的规则，消除@警告
  2. 测试<h1 class="text-3xl font-bold underline">Hello world!</h1>
  3. 如果不行，继续修改vite.config.js
import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';css: {postcss: {plugins: [tailwindcss,autoprefixer,{postcssPlugin: 'internal:charset-removal',AtRule: {charset: (atRule) => {if (atRule.name === 'charset') {atRule.remove();}}}}]}},

相关文章：

VUE3+Vite使用TailwindCSS【若依前后端分离框架】

参考&#xff1a;https://tailwind.nodejs.cn/docs/guides/vite#vue 和 https://blog.csdn.net/hjl_and_djj/article/details/144694485依次运行命令&#xff1a; cnpm install -D tailwindcss3.4.17 postcss autoprefixernpx tailwindcss init -p修改配置文件tailwind.config.…...

编程日记 2025/9/9 21:21:37

【Linux文件IO】系统IO详情

目录 一、前言 二、相关API介绍 2.1 open 2.2 read 2.3 write 2.4 lseek 2.5 close 三、简单示例 3.1 示例1 3.2 示例2 一、前言 在 Linux 系统编程中&#xff0c;系统 I/O&#xff08;又称低级 I/O&#xff09;是直接通过操作系统提供的系统调用实现的文件操作接口…...

编程日记 2025/9/10 20:14:37

【弹性计算】弹性裸金属服务器和神龙虚拟化（三）：弹性裸金属技术

弹性裸金属服务器和神龙虚拟化&#xff08;三&#xff09;&#xff1a;弹性裸金属技术 1.弹性裸金属技术背景1.1 传统 KVM 虚拟化系统导致 CPU 计算特性损失1.2 传统 KVM 虚拟化系统导致资源争抢不可避免1.3 传统 KVM 虚拟化系统导致 I/O 性能瓶颈 2.弹性裸金属技术实现2.1 VPC…...

编程日记 2025/9/8 12:11:29

(贪心 合并区间）leetcode 56

思路来源&#xff1a;代码随想录--代码随想录_合并区间题解 首先用lambda 按照左界值升序排序 建立答案的二维数组&#xff0c;将第一个行区间放入&#xff0c;判断从第二行开始 第i行的左区间一定大于第i-1行的左区间&#xff08;排序过了&#xff09;&#xff0c;所以只判断…...

编程日记 2025/9/10 20:16:41

如何理解语言模型

统计语言模型 先看语言模型&#xff0c;语言即自然语言&#xff0c;模型及我们要解决的某个任务。 任务一&#xff1a;判断哪句话出现的概率大 任务二&#xff1a;预判空缺的位置最有可能是哪个词 再看统计&#xff0c;统计即解决上述两个任务的解决方法。先对语句进行分词…...

编程日记 2025/9/10 20:13:38

动态规划/贪心算法

一、动态规划 动态规划 是一种用于解决优化问题的算法设计技术&#xff0c;尤其适用于具有重叠子问题和最优子结构性质的问题。它通过将复杂问题分解为更简单的子问题&#xff0c;并保存这些子问题的解以避免重复计算&#xff0c;从而提高效率。 动态规划的核心思想 最优子结…...

编程日记 2025/9/6 6:54:22

Hadoop简介

1. Hadoop简介 官网&#xff1a;http://hadoop.apache.org 1.1 Hadoop架构 Hadoop由三个模块组成&#xff1a;分布式存储HDFS、分布式计算MapReduce、资源调度引擎YARN 1.2 Hadoop历史 Hadoop作者Doug Cutting Apache Lucene是一个文本搜索系统库 Apache Nutch作为前者的一部…...

编程日记 2025/9/9 8:59:00

Vscode 便用快捷键设置教程

文章目录 简介&#xff1a;1. go to define (跳转到函数定义的位置)2. go to declaration (跳转到函数声明的位置)3. move line &#xff08;上下移动本行代码&#xff09;3.1上下复制本行代码 4. 前进和后退&#xff08;就是前进到光标上一次停留的位置&#xff0c;和后退到那…...

编程日记 2025/9/10 10:45:53

数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（一）.创建基础表

一. 使用工具和命令 1.1 使用的工具 Navicat Premium 17 &#xff1a;“Navicat”是一套可创建多个连接的数据库管理工具。 MySQL版本8.0.39 。 1.2 使用的命令 Navicat中使用的命令 命令 命令解释 SHOW DATABASES&#xff1b; 展示所有的数据库 CREATE DATABASE 数据…...

编程日记 2025/9/6 14:41:33

水滴tabbar canvas实现思路

废话不多说之间看效果图，只要解决了这个效果水滴tabbar就能做出来了 源码地址 一、核心实现步骤分解 布局结构搭建 使用 作为绘制容器 设置 width=600, height=200 基础尺寸 通过 JS 动态计算实际尺寸（适配高清屏） function initCanvas() {// 获取设备像素比（解决 Re…...

编程日记 2025/9/1 7:07:33

windows安装vue

1、下载nodejs安装包 https://nodejs.cn/download/ 2、安装node 中途记得可以自己改安装路径&#xff0c;其他都是下一步 3、安装完成后检查 node -v &#xff1a;查看nodejs的版本 npm -v &#xff1a;查看npm的版本 4、修改npm默认安装目录与缓存日志目录的位置 在nodejs目…...

编程日记 2025/9/8 21:46:46

使用3090显卡部署Wan2.1生成视频

layout: post title: 使用3090显卡部署Wan2.1生成视频 catalog: true tag: [Kubernetes, GPU, AI] 使用3090显卡部署Wan2.1生成视频 1. 环境说明2. 模型下载3. 克隆仓库4. 安装依赖5. 生成视频 5.1. 使用generate脚本生成5.2. 使用gradio启动UI界面生成 5.2.1. 启动gradio服务5…...

编程日记 2025/9/10 0:40:18

DCN讲解

DCN是DeepFM的升级版&#xff0c;后者是只能做二阶交叉特征&#xff0c;随着阶数上升&#xff0c;模型复杂度大幅提高&#xff0c;且FM网络层较浅&#xff0c;表达能力有限。google团队通过构建深度交叉网络来自动进行特征的高阶交叉&#xff0c;且时空复杂度均为线性增长&…...

编程日记 2025/9/8 12:37:52

ARM 架构下 cache 一致性问题整理

本篇文章主要整理 ARM 架构下&#xff0c;和 Cache 一致性相关的一些知识。 本文假设读者具备一定的计算机体系结构和 Cache 相关基础知识&#xff0c;适合有相关背景的读者阅读 1、引言 简单介绍一下 Cache 和内存之间的关系 在使能 Cache 的情况下&#xff0c;CPU 每次获取数…...

编程日记 2025/8/16 10:34:20

算法－二分查找

二分查找 其实二分查找是一个很简单理解的东西&#xff0c;从他的名字就可以看出&#xff0c;就是要分为两段去查找一个元素 我们确定一个中间元素&#xff0c;然后将这一个元素和左边的部分和右边的部分做对比 然后根据实际情况来选择一个部分来继续做这么一个步骤 直到找…...

编程日记 2025/9/9 19:11:19

Python Cookbook-2.24 在 Mac OSX平台上统计PDF文档的页数

任务 你的计算机运行着比较新的MacOSX系统(10.3的“Panther”或更新的版本)&#xff0c;现在需要知道一个 PDF 文档的页数。 解决方案 PDF格式和 Python都已经集成到了Mac OsX系统中(10.3或更高版本)&#xff0c;因而这个问题解决起来也相对比较容易: #!/usr/bin python im…...

编程日记 2025/9/9 1:49:06

【MySQL】索引（页目录、B+树）

文章目录 1. 引入索引2. MySQL与磁盘交互的基本单位3. 索引的理解3.1 页目录3.2 B树 4. 聚簇索引、非聚簇索引5. 索引的操作5.1 索引的创建5.1.1 创建主键索引5.1.2 创建唯一索引5.1.3 普通索引的创建5.1.4 全文索引的创建 5.2 索引的查询5.3 删除索引 1. 引入索引 索引&#…...

编程日记 2025/9/7 22:51:11

工业AR眼镜的‘芯’动力：FPC让制造更智能【新立电子】

随着增强现实&#xff08;AR&#xff09;技术的快速发展&#xff0c;工业AR智能眼镜也正逐步成为制造业领域的重要工具。它不仅为现场工作人员提供了视觉辅助&#xff0c;还极大地提升了远程协助的效率、优化了仓储管理。FPC在AI眼镜中的应用&#xff0c;为工业AR智能眼镜提供了…...

编程日记 2025/9/8 13:01:25

开启mysql的binlog日志

mysql版本5.7 1.查看是否开启bin_log show global variables like’log_bin’; off的话需要先开启 在mysql的文件夹目录中找到my.ini 加一行log-bin“C:/ProgramData/MySQL/MySQL Server 5.7/logs/log-bin” 并提前创建好目录 2.数据库会把日志放进logs目录中 3.查看log日…...

编程日记 2025/9/10 1:41:08

SpringSecurity基于JWT实现Token的处理

前面介绍了手写单点登录和JWT的应用，本文结合SpringSecurity来介绍下在SpringBoot项目中基于SpringSecurity作为认证授权框架的情况下如何整合JWT来实现Token的处理。 一、认证思路分析 SpringSecurity主要是通过过滤器来实现功能的！我们要找到SpringSecurity实现认证和校验…...

编程日记 2025/9/5 1:36:51

数据结构与算法-图论-最短路-floyd扩展

floyd和它的拓展&#xff1a; 在计算机科学领域&#xff0c;Floyd通常指Floyd Warshall算法&#xff0c;由罗伯特弗洛伊德&#xff08;Robert W. Floyd&#xff09;提出&#xff0c;这是一种用于在加权有向图中查找所有顶点对之间最短路径的算法。 算法原理 Floyd Warsha…...

编程日记 2025/9/5 19:26:04

c++中所有构造函数的介绍与使用

C 中&#xff0c;构造函数是一种特殊的成员函数&#xff0c;用于在创建对象时对对象进行初始化。C 中有多种类型的构造函数&#xff0c;下面详细介绍这些构造函数及其特点和使用场景。 1. 默认构造函数 定义&#xff1a;默认构造函数是指在没有提供任何参数的情况下可以被调用…...

编程日记 2025/9/9 18:38:45

力扣1584. 连接所有点的最小费用

力扣1584. 连接所有点的最小费用 题目 题目解析及思路 题目要求返回最小生成树 最小生成树模版题 法一&#xff1a;prim 主要思想是每次找离树最近的顶点&#xff0c;将其加入树种&#xff0c;并更新其他所有点到该点的距离 代码 class Solution { public:int minCostCo…...

编程日记 2025/9/8 17:26:18

FPGA开发，使用Deepseek V3还是R1（8）：FPGA的全流程（简略版）

以下都是Deepseek生成的答案 FPGA开发&#xff0c;使用Deepseek V3还是R1&#xff08;1&#xff09;&#xff1a;应用场景 FPGA开发&#xff0c;使用Deepseek V3还是R1&#xff08;2&#xff09;&#xff1a;V3和R1的区别 FPGA开发&#xff0c;使用Deepseek V3还是R1&#x…...

编程日记 2025/9/8 18:15:19

处理大数据的架构模式：Lambda 架构 和 Kappa 架构

Lambda 架构 和 Kappa 架构 是两种用于处理大数据的架构模式&#xff0c;尤其在实时数据处理场景中广泛应用。 1. Lambda 架构 核心思想 Lambda 架构将数据处理分为两条独立的流水线&#xff1a; 批处理层&#xff08;Batch Layer&#xff09;&#xff1a; 处理全量数据&…...

编程日记 2025/9/4 19:35:45

Docker网络模式实战

docker的镜像是令人称道的地方&#xff0c;但网络功能还是相对薄弱的部分 docker安装后会自动创建3种网络&#xff1a;bridge、host、none docker原生bridge网路 docker安装时会创建一个名为 docker0 的Linux bridge&#xff0c;新建的容器会自动桥接到这个接口 docker安装时…...

编程日记 2025/9/9 14:09:43

Linux网络基础（协议 TCP/IP 网络传输基本流程 IP VS Mac Socket编程UDP）

文章目录 一.前言二.协议协议分层分层的好处 OSI七层模型TCP/IP五层(或四层)模型为什么要有TCP/IP协议TCP/IP协议与操作系统的关系(宏观上是如何实现的)什么是协议 三.网络传输基本流程局域网(以太网为例)通信原理MAC地址令牌环网 封装与解包分用 四.IP地址IP VS Mac地址 五.So…...

编程日记 2025/9/9 4:32:45

MFC: 控件根据文本内容大小自动调整

背景&#xff1a; 针对不同语言下&#xff0c;控件显示不全的现象&#xff1b; 例如&#xff1a; 现象1&#xff1a;中文下显示全部信息&#xff0c;英语下只能显示部分文字 现象2&#xff1a;中文下显示不全## 实现思路&#xff1a; 控件绑定按钮计算控件文本长度根据文本长…...

编程日记 2025/9/1 11:39:28

记一次线上Tomcat服务内存溢出的问题处理

背景&#xff1a;JavaWeb项目部署在Tomcat服务器上&#xff0c;服务器用的Windows。 问题表现&#xff1a;系统出现偶发性无法访问&#xff08;隔几天就会在早上无法访问&#xff09; Tomcat的日志catalina中&#xff0c;有如下报错信息。 java.lang.OutOfMemoryError: GC ov…...

编程日记 2025/9/7 0:30:25

go设计模式

刘&#xff1a;https://www.bilibili.com/video/BV1kG411g7h4 https://www.bilibili.com/video/BV1jyreYKE8z 1. 单例模式 2. 简单工厂模式 代码逻辑&#xff1a; 原始&#xff1a;业务逻辑层 —> 基础类模块工厂&#xff1a;业务逻辑层 —> 工厂模块 —> 基础类模块…...

编程日记 2025/9/7 7:01:45

通往 AI 之路：Python 机器学习入门-语法基础

第一章 Python 语法基础 Python 是一种简单易学的编程语言&#xff0c;广泛用于数据分析、机器学习和人工智能领域。在学习机器学习之前&#xff0c;我们需要先掌握 Python 的基本语法。本章将介绍 Python 的变量与数据类型、条件语句、循环、函数以及文件操作&#xff0c;帮助…...

编程日记 2025/8/28 7:50:21

【再谈设计模式】备忘录模式~对象状态的守护者

一、引言 在软件开发过程中&#xff0c;我们常常会遇到需要保存对象状态以便在之后恢复的情况。例如&#xff0c;在文本编辑器中&#xff0c;我们可能想要撤销之前的操作&#xff1b;在游戏中&#xff0c;玩家可能希望恢复到之前的某个游戏状态。备忘录模式&#xff08;Memento…...

编程日记 2025/9/5 21:53:44

算法：判断链表是否有环

/*** brief 判断链表是否有环* * 该函数使用快慢指针法来判断链表中是否存在环。* 快指针每次移动两步&#xff0c;慢指针每次移动一步。* 如果链表中存在环&#xff0c;那么快指针最终会追上慢指针&#xff1b;* 如果链表中不存在环&#xff0c;快指针会先到达链表末尾。* * p…...

编程日记 2025/9/5 19:38:16

Android Logcat 高效调试指南

工具概览 Logcat 是 Android SDK 提供的命令行日志工具&#xff0c;支持灵活过滤、格式定制和实时监控&#xff0c;官方文档详见 Android Developer。 基础用法 命令格式 [adb] logcat [<option>] ... [<filter-spec>] ... 执行方式 直接调用&#xff08;通过ADB守…...

编程日记 2025/9/6 13:35:29

【数据结构与算法】Java描述：第一节：ArrayList顺序表

这篇文章我们自己实现一个顺序表&#xff0c; 从而更好的认识它。 一、顺序表的本质 顺序表的本质其实就是一个数组&#xff0c;但是在插入&#xff0c;查找与删除上&#xff0c;有些复杂&#xff0c;顺序表通过对方法进行封装&#xff0c;方便了使用。 二、自己的顺序表 2.…...

编程日记 2025/9/9 13:43:14

报错The default superclass, “jakarta.servlet.http.HttpServlet“（已经配置好tomcat）

报错报错DescriptionResourcePathLocationType The default superclass,“jakarta.servlet.http.HttpServlet”, according to the project’s Dynamic Web Module facet version (5.0), was not found on the Java Build Path. 解决办法&#xff1a; 根据错误信息&#xff0…...

编程日记 2025/9/7 11:53:35

在笔记本电脑上用DeepSeek搭建个人知识库

最近DeepSeek爆火&#xff0c;试用DeepSeek的企业和个人越来越多。最常见的应用场景就是知识库和知识问答。所以本人也试用了一下&#xff0c;在笔记本电脑上部署DeepSeek并使用开源工具搭建一套知识库&#xff0c;实现完全在本地环境下使用本地文档搭建个人知识库。操作过程共…...

编程日记 2025/9/9 10:12:38

数学建模：MATLAB极限学习机解决回归问题

一、简述 极限学习机是一种用于训练单隐层前馈神经网络的算法&#xff0c;由输入层、隐藏层、输出层组成。 基本原理&#xff1a; 输入层接受传入的样本数据。 在训练过程中随机生成从输入层到隐藏层的所有连接权重以及每个隐藏层神经元的偏置值&#xff0c;这些参数在整个…...

编程日记 2025/9/8 4:55:17

Immich自托管服务的本地化部署与随时随地安全便捷在线访问数据

文章目录 前言1.关于Immich2.安装Docker3.本地部署Immich4.Immich体验5.安装cpolar内网穿透6.创建远程链接公网地址7.使用固定公网地址远程访问 前言 小伙伴们&#xff0c;你们好呀&#xff01;今天要给大家揭秘一个超炫的技能——如何把自家电脑变成私人云相册&#xff0c;并…...

编程日记 2025/9/9 14:12:23

Python标准库【os】5 文件和目录操作2

文章目录 8 文件和目录操作8.7 浏览目录下的内容8.8 查看文件或目录的信息8.9 文件状态修改文件标志位文件权限文件所属用户和组其它 8.10 浏览Windows的驱动器、卷、挂载点8.11 系统配置信息 os模块提供了各种操作系统接口。包括环境变量、进程管理、进程调度、文件操作等方面…...

编程日记 2025/9/8 8:53:05

相控阵雷达

相控阵雷达 **1. 基本概念与数学模型**(1) **阵列信号模型**(2) **波束形成原理** **2. 经典波束形成算法****(1) 常规波束形成&#xff08;Conventional Beamforming, CBF&#xff09;****(2) 自适应波束形成&#xff08;Adaptive Beamforming&#xff09;****2.1 最小方差无失…...

编程日记 2025/9/7 10:49:13

Java 大视界 -- 基于 Java 的大数据分布式缓存一致性维护策略解析（109）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2025/9/9 19:23:43

AI: Cursor是否已奠定AI开发环境的龙头地位？

近年来&#xff0c;人工智能&#xff08;AI&#xff09;在软件开发领域的应用迅速升温&#xff0c;而Cursor作为一款AI驱动的代码编辑器&#xff0c;凭借其创新功能和市场表现&#xff0c;引发了广泛讨论。许多人认为&#xff0c;Cursor已经奠定了AI开发环境的龙头地位。然而&a…...

编程日记 2025/9/9 1:49:08

PHP：IDEA开发工具配置XDebug，断点调试

文章目录 一、php.ini配置二、IDEA配置 一、php.ini配置 [xdebug] zend_extension"F:\wamp64\bin\php\php7.4.0\ext\php_xdebug-2.8.0-7.4-vc15-x86_64.dll" xdebug.remote_enable on xdebug.remote_host 127.0.0.1 xdebug.remote_port 9001 xdebug.idekey"…...

编程日记 2025/9/10 13:26:47

回忆Redis的持久化机制

Redis的持久化机制 前言RDB触发方式配置方式手动触发bgsave的执行流程 缺点 AOF重写机制触发方式手动触发自动触发 MP-AOF RDB和AOF混合模式 前言 大家都知道&#xff0c;Redis是内存数据库&#xff0c;也就是说client与Redis交互的过程&#xff0c;无论是读key还是写key都是直…...

编程日记 2025/9/9 10:05:41

partner‘127.0.0.1:3200‘ not reached

在SAP虚拟机中&#xff0c;如果LRPSAP 0显示黄色&#xff0c;通常表示服务启动异常或存在配置问题。以下是一些可能的处理方法&#xff1a; 检查主机文件配置 确保主机文件&#xff08;hosts&#xff09;中已正确配置SAP服务的域名解析。例如&#xff0c;添加以下内容到hosts文…...

编程日记 2025/9/9 18:44:49

网络配置的基本信息

目录 一、网络接口信息 1、关闭虚拟化服务 2、配置临时IP 3、配置静态IP 4、常见网络命令 5、安装Wireshark 一、网络接口信息 输入 ip address&#xff0c;会出现下面的内容 网卡名称及其含义&#xff1a; 网卡名称说明lo 表示本地回环地址。 ens32 有线网卡&#xff0c…...

编程日记 2025/9/7 5:59:05

SpringBoot集成Mybatis（包括Mybatis-Plus）和日志

一、使用Mybatis 1.添加依赖 <!--Mybatis--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.0</version> <!-- 选择与Java 8兼容的版本 --&g…...

编程日记 2025/9/7 14:11:29

如何在 IntelliJ IDEA 中集成 DeepSeek

如何在 IntelliJ IDEA 中集成 DeepSeek 在本教程中&#xff0c;我们将带您一步步完成将 DeepSeek 集成到 IntelliJ IDEA 中的过程。通过此集成&#xff0c;您可以在IDE中利用DeepSeek强大的功能&#xff0c;提高开发工作效率。 步骤 1&#xff1a;安装 Proxy AI 插件 首先&a…...

编程日记 2025/9/6 14:11:50

【自学笔记】大数据基础知识点总览-持续更新

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 大数据基础知识点总览1. 大数据概述2. 大数据处理技术3. 数据仓库与数据挖掘4. 大数据分析与可视化5. 大数据平台与架构6. 大数据安全与隐私 总结 大数据基础知识点…...

编程日记 2025/9/9 5:19:53