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

从apt-get到yum:Ubuntu20.04下跨平台包管理工具安装指南

从apt-get到yum&#xff1a;Ubuntu 20.04下跨平台包管理工具实战指南 在Linux生态中&#xff0c;不同发行版采用不同的包管理系统——Debian系的apt与RedHat系的yum就是典型代表。当开发者需要在Ubuntu环境下运行原本为CentOS设计的软件时&#xff0c;掌握yum的安装与配置技巧能…...

DLSS状态监控完全指南:从问题诊断到性能优化

DLSS状态监控完全指南&#xff1a;从问题诊断到性能优化 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 你是否曾经遇到过这样的困惑&#xff1a;在游戏中开启了DLSS功能&#xff0c;却无法确定它是否真的在工作&#…...

从拆解到驱动:手把手教你用IMX6ULL驱动OV5640摄像头模块(附完整代码)

从拆解到驱动&#xff1a;手把手教你用IMX6ULL驱动OV5640摄像头模块&#xff08;附完整代码&#xff09; 1. 硬件连接与接口解析 OV5640作为一款500万像素的CMOS图像传感器&#xff0c;支持DVP和MIPI两种接口模式。在IMX6ULL平台上&#xff0c;我们选择使用DVP并行接口进行连接…...

APDS9960手势传感器驱动开发与嵌入式实战

1. APDS9960手势传感器库技术解析与嵌入式工程实践APDS9960是一款由Broadcom&#xff08;原Avago&#xff09;推出的集成环境光、颜色、接近度及手势识别功能的多模态光学传感器芯片。其核心价值在于将传统分立式光感方案&#xff08;如独立ALSProximityGesture模块&#xff09…...

效果实测:Image-to-Video如何将风景照变成动态视频?

效果实测&#xff1a;Image-to-Video如何将风景照变成动态视频&#xff1f; 1. 惊艳的开场&#xff1a;静态照片"活"起来了 想象一下&#xff0c;你手机里那些美丽的风景照片突然"活"了过来——海浪开始翻滚&#xff0c;云朵缓缓飘动&#xff0c;树叶在微…...

Linux进程调度机制与性能优化实践

1. Linux进程调度概述在Linux操作系统中&#xff0c;进程调度是内核最核心的功能之一。作为一个多任务操作系统&#xff0c;Linux需要合理地分配有限的CPU资源给众多进程&#xff0c;使它们能够高效、公平地运行。理解Linux的调度机制&#xff0c;对于系统性能调优、应用开发以…...

深入解析CC Switch架构:构建AI开发工具统一管理引擎

深入解析CC Switch架构&#xff1a;构建AI开发工具统一管理引擎 【免费下载链接】cc-switch A cross-platform desktop All-in-One assistant tool for Claude Code, Codex, OpenCode, openclaw & Gemini CLI. 项目地址: https://gitcode.com/GitHub_Trending/cc/cc-swit…...

2026专业护眼产品深度评测:告别眼干涩疲劳,哪款才是“医用级“长效养护的选择?

屏幕时代&#xff0c;眼睛正在为我们的工作和生活"买单"。从早起看手机的那一刻&#xff0c;到深夜关灯前最后一次刷屏&#xff0c;多数人每天面对电子屏幕的时间早已超过10小时。干涩、疲劳、视力模糊、异物感……这些曾经只出现在中老年人身上的困扰&#xff0c;正…...

MOOTDX终极指南:5个简单步骤掌握Python通达信数据接口

MOOTDX终极指南&#xff1a;5个简单步骤掌握Python通达信数据接口 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx MOOTDX是一个强大的Python通达信数据接口库&#xff0c;它能让你轻松获取A股市场…...

告别内存映射:用AXI-Stream协议搞定FPGA视频流传输(附时序图解析)

告别内存映射&#xff1a;用AXI-Stream协议搞定FPGA视频流传输&#xff08;附时序图解析&#xff09; 在FPGA视频处理系统中&#xff0c;数据流的传输效率往往成为性能瓶颈。传统的内存映射方式虽然通用&#xff0c;但对于高吞吐量的视频数据流却显得力不从心。AXI-Stream协议以…...