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)

相关推荐
编程猪猪侠23 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞27 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架