vite安装Tailwind CSS

news2024/11/23 19:42:59

安装 - 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.coloradmin.cn/o/1163388.html

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

相关文章

ATFX汇市:美联储11月利率决议再暂停加息,紧缩货币政策或已接近尾声

ATFX汇市:11月美联储利率决议结果在今日2:00公布,其中提到:美联储寻求以2%的速度实现最大的就业和通胀率,为了达成这些目标,美联储决定将联邦基金利率的目标区间维持在5.25%~5.5%;委员会将会考虑货币政策的…

本地kafka客户端远程密码访问kafka服务端

1.确保kafka服务端已经配置SASL/PLANTEXT ACL 2.确保kafka客户端与kafka服务端网络通 3.在kafka客户端在路径为…/kafka/config/下创建client.properties文件 修改producer.properties、consumer.properties security.protocolSASL_PLAINTEXT sasl.mechanismPLAIN sasl.jaas…

Go基础——指针、结构体

1、指针 Go语言指针与C差不多,取地址符是 &,放到一个变量前使用就会返回相应变量的内存地址。 变量是一种使用方便的占位符,用于引用计算机内存地址。一个指针变量可以指向任何一个值的内存地址,它所指向的值的内存地址在 32 …

第24期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区,集成了生成预训练 Transformer(GPT)、人工智能生成内容(AIGC)以及大型语言模型(LLM)等安全领域应用的知识。在这里,您可以…

一副耳机两种体验,好看好听降噪强,FIIL Key Pro上手

户外使用蓝牙耳机时,降噪功能真的是必不可少,特别是通勤高峰期,能有效隔绝周围的嘈杂声,对于上班族来说,真的会舒服很多。市场上有很多降噪耳机可供选择,相比于价格上千的发烧级装备,我更倾向于…

聊点技术|秒级根因定位可能吗?博睿数据将不可能变为可能

10月20日,数智融,ONE向新——博睿数据2023秋季产品发布会圆满落幕,全新一代一体化智能可观测平台Bonree ONE 2023秋季正式版焕新发布,重点升级了数据采集、全局拓扑、数据分析、会话回放等多个功能模块,为组织提供了更…

人工智能基础_机器学习017_SGD随机梯度下降求解多元一次方程_以及求解多元一次方程---人工智能工作笔记0057

然后我们再来看一下X.shape 这个用来显示,一个矩阵的形状,其实就是几行几列对吧 然后,比如上面这个是100行 ,9列,其实对应我们的方程上,就是 8元一次方程, w1到w8加上w0 一共9列,然后有100个样本,也就是100行数据对吧 然后我们来看一下我们用SGD随机梯度下降来实现一个一元一…

VBA技术资料MF78:产生随机字符串密码

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。我的教程一共九套,分为初级、中级、高级三大部分。是对VBA的系统讲解,从简单的入门,到…

【Jena系列】Jena基本介绍

序言 做一件事并不难,难的是在于坚持。坚持一下也不难,难的是坚持到底。 文章标记颜色说明: 黄色:重要标题红色:用来标记结论绿色:用来标记一级论点蓝色:用来标记二级论点 希望这篇文章能让你不…

(3)小程序如何绑定事件

<view bindtap"led">日志</view> 一&#xff1a;用什么绑定事件&#xff1f; 用这个bindtap 在框架中绑定事件 二&#xff1a;在ts文件中如何去操作 led:function(){console.log(this.data.message)this.setData({message: "现在"})}led&am…

YOLO算法改进4【中阶改进篇】:添加DeformableConvolution v2可变形卷积模块

论文地址&#xff1a; https://arxiv.org/abs/1811.11168 源码地址&#xff1a;https://github.com/msracver/Deformable-ConvNets 传统的卷积操作是将特征图分成一个个与卷积核大小相同的部分&#xff0c;然后进行卷积操作&#xff0c;每部分在特征图上的位置都是固定的。这样…

ESP32网络开发实例-Web服务器显示LM35传感器数据

Web服务器显示LM35传感器数据 文章目录 Web服务器显示LM35传感器数据1、LM35介绍2、软件准备3、硬件准备4、代码实现4.1 LM35与ADS1115驱动4.2 Web服务器显示LM35传感器数据本文将介绍有关如何在ESP32的Web服务器中显示LM35 温度传感器数据。 1、LM35介绍 LM35 用于测量物体或…

C++标准输入输出类cout,cin用法概述

cout 标准输出类 不同进制输出数字 cout 数字数字默认是以十进制表示&#xff0c;也可以是用其他的进制表示&#xff1a;例如&#xff1a; 八进制&#xff1a;std::cot std::cout << std::oct << i << std::endl; 十进制&#xff1a;std::dec std::cout…

【腾讯云HAI域探秘】0基础也能开发应用

【腾讯云HAI域探秘】0基础也能开发应用 文章目录 【腾讯云HAI域探秘】0基础也能开发应用前言腾讯云高性能应用服务&#xff08;HAI&#xff09;的简介环境搭建启动 高性能应用服务HAI 配置的 ChatGLM2-6B WebUI 进行简单的对话总结 前言 在当今数字化时代&#xff0c;人工智能…

通过IIS和内网穿透实现快速搭建本地web服务器并实现公网访问

文章目录 1.前言2.Windows网页设置2.1 Windows IIS功能设置2.2 IIS网页访问测试 3. Cpolar内网穿透3.1 下载安装Cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5.结语 1.前言 在网上各种教程和介绍中&#xff0c;搭建网页都会借助各种软件的帮助&#xf…

最新国产企业级低代码盘点:看看哪款更适合你

中国低代码平台市场在2018年开始崭露头角&#xff0c;于2021年逐渐形成一套完整的低代码、无代码市场生态体系。据艾瑞咨询发布的《2022年低代码行业研究报告》显示&#xff0c;与2020年相比&#xff0c;中国低代码市场规模将大幅增长至29.3亿元。预计未来五年&#xff0c;市场…

【EI会议征稿】第三届计算机、人工智能与控制工程国际学术会议(CAICE 2024)

The 3rd International Conference on Computer, Artificial Intelligence and Control Engineering (CAICE 2024) 第三届计算机、人工智能与控制工程国际学术会议 第三届计算机、人工智能与控制工程国际学术会议&#xff08;CAICE 2024&#xff09;将于2024年1月26-28日在西安…

UniPro自定义个人专属工作台 大幅提升工作效率

很多研发团队在开完每日站会后&#xff0c;工程师的工作习惯便是打开研发管理系统&#xff0c;先看看自己的待办事项&#xff0c;或是查看同事的需求、评论&#xff0c;亦或是查看今日份工作的高优先级项等等。 如何方便工程师能够快速查看和了解一天的工作究竟从哪开始呢&…

插件_日期_lunar-calendar公历农历转换

现在存在某需求&#xff0c;需要将公历、农历日期进行相互转换&#xff0c;在此借助lunar-calendar插件完成。 下载 [1] 通过npm安装 npm install lunar-calendar[2]通过文件方式引入 <script type"text/javascript" src"lib/LunarCalendar.min.js">…

Cannot resolve class ‘DruidDataSource‘

无法配置 DataSource&#xff1a;未指定“url”属性&#xff0c;并且无法配置嵌入数据源。 原因&#xff1a;无法确定合适的驱动程序类 原因是数据库没有配置或者没事错误 1配置配置文件报错 没有依赖 pom.xml加入 <dependency><groupId>com.alibaba</grou…