vite安装Tailwind CSS

安装 - Tailwind CSS 中文网 (nodejs.cn)

这是官网,平常我练习一般会用vite脚手架

我们选择这个vite模块

可选择React和Vue版本的,这里选择react的按照操作,没问题的话就要出问题了

1、在npm run dev的时候我是出现了这么个问题,解决办法在项目里重新

npm install vite或者

npm install后npm run dev

2、在浏览器输入localhost:5174后是出现了

原因是啥,react除了.js,.jsx,.ts,.tsx文件还有根文件.html文件在tailwind.config.js里添加html就好了

然后我们要写代码了,这里我们就要给Vscode装几个插件了

1、代码提示插件,让你写代码快的飞起,安装后,重启下Vscode,如下。

2、Tailwind Fold  用于闭合css代码的,还不如长长的,不太好改代码

然后根据程序员𝐋𝐞𝐫𝐭𝐞的主页 - 抖音 (douyin.com) 写了如下代码​​​​​​ 动态组件 (gitee.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/130317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

234. 回文链表、Leetcode的Python实现

博客主页:🏆看看是李XX还是李歘歘 🏆 🌺每天分享一些包括但不限于计算机基础、算法等相关的知识点🌺 💗点关注不迷路,总有一些📖知识点📖是你想要的💗 ⛽️今…

竞赛 深度学习疫情社交安全距离检测算法 - python opencv cnn

文章目录 0 前言1 课题背景2 实现效果3 相关技术3.1 YOLOV43.2 基于 DeepSort 算法的行人跟踪 4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 **基于深度学习疫情社交安全距离检测算法 ** 该项目较为新颖,适合作为竞赛…

【网络奇遇记】那年我与计算机网络的初相识

🌈个人主页:聆风吟 🔥系列专栏:《网络奇遇记》 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 一. 信息时代的计算机网络二. 计算网络的定义和分类三. 计算机网络的特点四. 计算机网路在信息时代的应用五…

图解Linux进程优先级

目录 1.什么是进程优先级? 2.进程优先级原理 3.查看进程优先级 4.修改进程优先级 4.1 setpriority函数原型 4.2 getpriority函数原型 4.3 sched_setscheduler函数原型 4.4 sched_getscheduler函数原型 4.5 sched_setparam函数原型 4.6 sched_getparam函数…

Unity Perception合成数据生成、标注与ML模型训练

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 3D场景编辑器 任何训练过机器学习模型的人都会告诉你,模型是从数据得到的,一般来说,更多的数据和标签会带来更好的性能。 …

限制LitstBox控件显示指定行数的最新数据(3/3)

实例需求:由于数据行数累加增加,控件加载的数据越来越多,每次用户都需要使用右侧滚动条拖动才能查看最新数据。 因此希望ListBox只加载最后10行数据(不含标题行),这样用户可以非常方便地选择数据&#xff…

JMeter组件

1.JMeter常用组件 必须组件:测试计划,线程组(包含多个线程),取样器 测试计划,JMeter默认创建且仅有一个 线程组: 添加步骤: 选择TestPlan并点击鼠标右键添加 分类以及使用&…

Spring Data Redis + RabbitMQ - 基于 string 实现缓存、计数功能(同步数据)

目录 一、Spring Data Redis 1.1、缓存功能 1.1.1、分析 1.1.2、案例实现 1.1.3、效果演示 1.2、计数功能(Redis RabbitMQ) 1.2.1、分析 1.2.2、案例实现 一、Spring Data Redis 1.1、缓存功能 1.1.1、分析 使用 redis 作为缓存, M…

curl(四)证书相关

一 证书相关 ① -k 1、客户端忽略服务端证书校验 -k | --insecure --> 单向[1]、这个选项显式地允许curl 执行不安全 的SSL连接和传输[2]、所有SSL连接都试图通过使用默认安装的CA证书捆绑包来确保安全[3]、这使得所有被认为是不安全的连接失败,除非使用-k --> 自签…

一座 “数智桥梁”,华为助力“天堑变通途”

《水调歌头游泳》中的一句话,“一桥飞架南北,天堑变通途”,广为人们所熟知,其中展现出的,是中国人对美好出行的无限向往。 天堑变通途从来不易。 中国是当今世界上交通运输最繁忙、最快捷的国家之一,交通行…

2023-在mac下安装Homebrew的国内镜像

mac安装Homebrew的国内镜像 尝试使用其他下载源:GitHub 可能会受到访问限制,尝试使用其他镜像或下载源。您可以使用清华大学、中科大或阿里云的 Homebrew 镜像,以提高下载速度和可靠性。例如,可以使用阿里云的镜像来安装 Homebre…

任务1 部署ChatGLM3-6B大模型并进行对话测试

部署ChatGLM3-6B大模型并进行对话测试 0 介绍:1 趋动云项目创建与环境配置1.1 创建项目:1.2 配置环境1.2.1 进入终端1.2.2 设置镜像源1.2.3 克隆项目,并安装依赖 2 修改代码,改路径以及启动代码3 运行代码3.1 运行gradio界面:3.2 …

雷池WAF社区版的使用教程

最近听说了一款免费又好用的WAF软件,雷池社区版,体验了一下虽然还有很多改进的空间 但是总体来说很适合小站长使用,和学习使用 也建议所有想学防火墙和红队(攻击队)练习使用,听说给官网提交绕过还有额外的…

ZKP Introduction of Nova (Yu Guo) 手写笔记

ZKP学习笔记 郭宇老师Nova课程手写笔记

你知道Python、Pycharm、Anaconda 三者之间的关系吗?

哈喽~大家好呀 Python作为深度学习和人工智能学习的热门语言,你知道Python、Pycharm、Anaconda 三者之间的关系吗?学习一门语言,除了学会其简单的语法之外还需要对其进行运行和实现,才能实现和发挥其功能和作用。下面来介绍运行P…

机器学习(深度学习)轴承故障诊断分类(提供故障数据和python代码实现)

机器学习(深度学习)故障诊断分类(提供故障数据和python代码实现) 轴承故障数据集和python代码自取:https://mbd.pub/o/bread/ZZWTm5hw 摘要:机器学习广泛的应用于机械故障诊断和故障分类问题,本…

时间复杂度的计算技巧-算法模型中的时间复杂度如何计算,有哪些技巧呢

大家好,我是微学AI,今天给大家介绍一下时间复杂度的计算技巧-算法模型中的时间复杂度如何计算,有哪些技巧呢,算法的时间复杂度是评估算法性能和效率的一种方式,它表示算法需要执行多少次基本操作才能完成其任务&#x…

Linux文本编辑器vim使用和配置详解

vim介绍 ​ vim是Linux的一款文本编辑器,可以用来编辑代码,而且支持语法高亮,还可以进行一系列配置使vim更多样化。也可以运行于windows,mac os上。 ​ vim有多种模式,但目前我们只介绍绝大多数场景用的到的模式&…

树结构及其算法-二叉树节点的插入

目录 树结构及其算法-二叉树节点的插入 C代码 树结构及其算法-二叉树节点的插入 二叉树节点插入的情况和查找相似,重点是插入后仍要保持二叉查找树的特性。如果插入的节点已经在二叉树中,就没有插入的必要了,如果插入的值不在二叉树中&…

集线器、交换机、网桥、路由器、网关

目录 集线器(HUB)交换机(SWITCH)网桥(BRIDGE)路由器(ROUTER)网关(GATEWAY)交换机和路由器的区别参考 集线器(HUB) 功能 集线器对数据的传输起到同步、放大和整形的作用 属于物理层设备 工作机制 使用集线器互连而成的以太网被称为共享式以太网。当某个主机要给另一个主机发送单…