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

Vue3+Vite安装配置tailwindCss

考虑到官网不是很好访问,这里记录一下简单步骤方便小友查阅

1. 安装依赖

npm install -D tailwindcss postcss autoprefixer

在这里插入图片描述

2. 初始化配置文件

npx tailwindcss init -p

在这里插入图片描述

3.配置模板路径

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

在这里插入图片描述

4. 导入css指令

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

在这里插入图片描述

5.下载必要插件,看个人习惯,具体可以另搜教程

相关文章:

Vue3+Vite安装配置tailwindCss

考虑到官网不是很好访问,这里记录一下简单步骤方便小友查阅 1. 安装依赖 npm install -D tailwindcss postcss autoprefixer2. 初始化配置文件 npx tailwindcss init -p3.配置模板路径 /** type {import(tailwindcss).Config} */ export default {content: [&quo…...

大数据学习-Spark基础入门

一、Spark是什么? Stack Overflow的数据可以看出,2015年开始Spark每月的问题提交数量已经超越Hadoop,而2018年Spark Python版本的API PySpark每月的问题提交数量也已超过Hadoop。2019年排名Spark第一,PySpark第二;而十…...

C语言:链表插入

链表的插入分为头插入&#xff0c;中间插入和尾插入。 具体方法如下&#xff1a; #include<stdio.h> #include<stdlib.h>typedef struct node {int s;struct node* pnext; }list;list* addnode(list** pphead, list** ppend, int n) {list* ptemp malloc(sizeof…...

xss 一些例子

目录 XSS 1.Ma Spaghet!​编辑 2.Jefff​编辑 3.Ugandan Knuckles​编辑 4.Ricardo Milos​编辑 5.Ah Thats Hawt​编辑 6.Ligma​编辑 7.Mafia​编辑 简单解法就是换一个函数 作者得原意解法 8.Ok, Boomer​编辑 XSS 1.Ma Spaghet! 这里接收了一个somebody参数&…...

基于Docker compose部署Confluence 8.3.4及设置数据持久化存储的总结

基于Docker compose部署Confluence 8.3.4及设置数据持久化存储的总结 一、环境信息二、安装部署三、向导 介绍如何基于Docker、Docker Compose的方式安装部署Confluence 8.3.4&#xff0c;并且设置数据的持久化存储。 一、环境信息 操作系统&#xff1a;CentOS 7.9 Docker Ver…...

eNSP 华为交换机生成树协议

华为交换机生成树协议 生成树协议原理与作用 选举一个交换机作为根网桥&#xff08;生成树的根&#xff09;&#xff0c;计算出到其他所有交换机的最佳路径&#xff0c;把备用路径的端口设为堵塞状态&#xff08;逻辑上关闭备用路径&#xff09;&#xff0c;当最佳路径故障再…...

flutter事件与消息通知

事件与消息通知 一、原始指针事件(触摸事件) 命中测试 事件阶段:手指按下、手指移动、手指抬起事件冒泡,无法停止冒泡Listener 组件:监听原始触摸事件 onPointerDown:手指按下回调onPointerMove:手指移动回调onPointerUp:手指抬起回调onPointerCancel:触摸事件取消回…...

Oracle PL/SQL存储过程和函数简单示例

以下是关于Oracle PL/SQL存储过程和函数的一些问题和答案&#xff1a; 问题1&#xff1a;什么是Oracle PL/SQL&#xff1f; 答案&#xff1a;Oracle PL/SQL&#xff08;Procedural Language Extensions to SQL&#xff09;是Oracle对SQL的过程语言扩展&#xff0c;它是一种编…...

同态加密和SEAL库的介绍(十)CKKS 参数心得 2

写在前面&#xff1a; 本篇继续上篇的测试&#xff0c;首先针对密文深度乘法情况&#xff0c;虽然密文乘法本就是应该尽量避免的&#xff08;时间和内存成本过高&#xff09;&#xff0c;更不用说深度乘法了&#xff0c;但是为了测试的完整性&#xff0c;还是做一下方便大家比对…...

Debug-021-el-table实现分页多选的效果(切换分页,仍可以保持前一页的选中效果)

前情提要&#xff1a; 这个功能实现很久了&#xff0c;但是一直没有留意如何实现&#xff0c;今天想分享一下。具体就是我们展示table数据的时候&#xff0c;表格中的数据多数情况是分页展示&#xff0c;毕竟数据量太多&#xff0c;分页的确是有必要的。那么我们有业务需要给表…...

FPGA开发——DS18B20读取温度并且在数码管上显示

一、简介 在上一篇文章中我们对于DS18B20的相关理论进行了详细的解释&#xff0c;同时也对怎样使用DS18B20进行了一个简单的叙述。在这篇文章我们通过工程来实现DS18B20的温度读取并且实现在数码管伤显示。 1、基本实现思路 根据不同时刻的操作&#xff0c;我们可以使用一个状…...

电流测量分流电阻

电流测量分流电阻 测量电流的设备称为安培计。大多数现代安培计测量已知电阻的精密电阻上的电压降。电流的计算使用欧姆定律&#xff1a;我五R 大多数电流表都内置电阻器来测量电流。但是&#xff0c;当电流对于电流表来说太高时&#xff0c;需要不同的设置。解决方案是将电流…...

MES系统:智能化排班排产的全面解决方案

MES&#xff08;制造执行系统&#xff09;管理系统通过集成多种先进技术、实时数据采集与分析、优化算法应用以及与其他系统的协同工作&#xff0c;实现了智能化排班排产功能。以下是该功能的详细实现方式&#xff1a; 数据集成与实时采集&#xff1a;MES系统与ERP、SCM、设备管…...

50道深度NLP和人工智能领域面试题+答案

编者按&#xff1a;分享一个很硬核的免费人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 可以当故事来看&#xff0c;轻松学习。 什么是自然语言处理&#xff08;NLP&#xff09;&#xff1f;自然语言处理是一种人工智能领域&#xff0c;致力于使计算机…...

最小矩阵宽度(85%用例)C卷(JavaPythonC++Node.jsC语言)

给定一个矩阵,包含N*M个整数,和一个包含K个整数的数组。 现在要求在这个矩阵中找一个宽度最小的子矩阵,要求子矩阵包含数组中所有的整数。 输入描述: 第一行输入两个正整数N,M,表示矩阵大小。 接下来N行M列表示矩阵内容。 下一行包含一个正整数K。 下一行包含K个整数,…...

STM32数据按字符截取与转换

目录 1. 截取2. 转换 1. 截取 以SW,33,55,78,\r\n为例 char* pa,pb,pc,pd,pe; uint8_t usart5_rxsavebuf[] "SW,12,32,33,55,78,\r\n";strtok((char *)usart5_rxsavebuf, ","); pa strtok(NULL, ","); pb strtok(NULL, ","); pc …...

使用kubeadm快速部署一套K8S集群

一、Kubernetes概述 1.1 Kubernetes是什么 Kubernetes是Google在2014年开源的一个容器集群管理系统&#xff0c;Kubernetes简称K8S。 K8S用于容器化应用程序的部署&#xff0c;扩展和管理。 K8S提供了容器编排&#xff0c;资源调度&#xff0c;弹性伸缩&#xff0c;部署管理…...

【Kotlin】在Kotlin项目中使用AspectJ

前言 AOP编程在Java开发中是一个非常火热的话题&#xff0c;最著名的库为AspectJ Kotlin项目中&#xff0c;通过Gradle插件&#xff0c;也能够使用该库&#xff0c;这是我们下面讲解的重点 由于AspectJ的原理是在预编译阶段&#xff0c;通过插件修改代码&#xff0c;生成代理…...

web实现drag拖拽布局

这种拖拽布局功能其实在电脑操作系统或者桌面应用里面是经常使用的基础功能&#xff0c;只是有时候在进行web开发的时候&#xff0c;对这个功能需求量不够明显&#xff0c;但却是很好用&#xff0c;也很实用。能够让用户自己拖拽布局&#xff0c;方便查看某个区域更多内容&…...

Linux网络编程—listen、accept、connect

一、网络四件套 #include <sys/types.h> //头文件&#xff1b;这四个文件一包&#xff0c;基本网络就无问题了&#xff1b; #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> 二、listen 监听&#xff1a;将套…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...