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

vue3+vite,引入Tailwind问题汇总

最近在了解vue3相关的技术栈,通过vue2的技术栈进行过渡对比。然后了解汇总了一套属于vue3的常用技术架构:vue3+router4+vite+axios+pinia+ElementPlus+tailwind。除了tailwind,其他在vue2都能找到相关的替代品。所以这里也想试图去了解一下,可惜,直接被第一道门槛安装给拦在了外面。

1.Tailwind css

         Tailwind CSS 是一个 实用优先的 CSS 框架,旨在帮助开发者快速构建现代、响应式的用户界面。与传统的 CSS 框架不在于Tailwind 提供了一套低级别的实用类(utility classes),允许开发者直接在 HTML 中编写样式,而无需编写自定义的 CSS 代码。

        大致意思就是预设了所有常用的样式,后续开发中只需要引入特定的类就行。这样就可以保证系统的整体布局协调,也有利于后期css的改动与维护。

2.官网安装引入

        官网提供了针对不同开发框架的引入流程,这里lz是从零开始通过vite构建的vue3项目,因此选择的流程是:Install Tailwind CSS with Vite - TailwindCSS中文文档 | TailwindCSS中文网

引入流程似乎很简单,但是如果你真的这么想那就大错特错了~

 3.npx 失败

         安装依赖没啥可说的,有手就行。但是在进行npx tailwindcss init -p 时,开始报错了。

报错内容:could not determine executable to run

这里,我试过很多方式解决,更换node版本,全局安装tailwindcss依赖,跳过这一步手动创建tailwind.config.js文件,但是都不行,几经反转之下,偶然中突然发现了问题所在。

通过  npm install -D tailwindcss postcss autoprefixer  安装的tailwindcss版本是4的,但是想执行 npx tailwindcss init -p 的前提tailwindcss得是3的。所以要手动更换下版本:

npm install -D tailwindcss@3.4.17

 4.tailwind样式不生效

        在解决版本问题后,执行第二步的命令,会生成tailwind.config.js和postcss.config.js两个文件。后面就是配置css然后在main.ts引入。然后在页面中设置想要的class来查看效果。但是,样式一直不生效。问题是出在tailwind.config.js的配置文件:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  //在这里我们配置了tailwind应用到index.html文件和src目录下所有.vue和.js文件
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

对比下官网的配置,知道问题错在哪了吧,要指定应用的文件路径及后缀。

5.vscode的Tailwind提示插件

         tailwind内置了大量的实用类,在开发过程中,如果快速找到自己想要的样式类名,以及类名所对应的css样式。这个时候就需要插件出马了。vscode提供的tailwind提示插件如下:

 

 正常来说,tailwind在配置后,安装插件,提示自动生效。如果提示不生效,可以试试手动开启提示。点击vscode左下角设置,输入:editor.quickSuggestions  将strings改成on。

 

http://www.dtcms.com/a/107184.html

相关文章:

  • 模型开源|支持东方40语种+中国22方言的新SOTA语音大模型Dolphin开源啦!
  • 制造业数字化转型:流程改造先行还是系统固化数据?基于以MTO和MTS的投资回报分析
  • 防爆风扇选型指南:根据风量风压匹配应用场景​
  • C语言函数实战指南:从零到一掌握函数设计与10+案例解析(附源码)
  • PPTAgent:一款开源免费生成和评估幻灯片的项目
  • QILSTE/旗光
  • RabbitMQ基础
  • 【5090d】配置运行和微调大模型所需基础环境【一】
  • 简述竞赛经历在考研复试中的作用
  • rom定制系列------红米note8pro原生安卓12批量线刷 安卓14批量线刷定制功能项 解锁bl后fast刷写
  • Bash 花括号扩展 {start..end} 进阶使用指南——字典生成
  • Linux进程间通信(1)
  • 天梯赛 L2-025 分而治之
  • GoldenEye: 1靶场渗透
  • 第四章,动态路由介绍//////RIP
  • 【Kubernetes】如何使用 kubeadm 搭建 Kubernetes 集群?还有哪些部署工具?
  • 基于昇腾NPU的YOLOv8部署
  • redis一些常用的命令(1)
  • 【零基础入门unity游戏开发——2D篇】SortingGroup(排序分组)组件
  • acwing 每日一题4889. 空调II
  • WinForm真入门(4)——窗体和控件、属性和事件 的基本概念
  • NFC碰一碰到底是什么?具体有什么功能
  • Transformer
  • Vue.js状态管理利器:Vuex核心原理与实战指南
  • VRRP(虚拟路由器冗余协议)、虚拟路由器、master路由器、backup路由器
  • 【算法数学篇】试除法求约数
  • 最长公共子串
  • (六)ASCLIN_UART模块串口DMA模式
  • 完美解决Tensorboard: No dashboards are active for the current data set.问题
  • 云曦3月断网考