当前位置：首页 > wzjs >正文

湖南网络科技有限公司网站优化推广平台

wzjs 2025/8/22 8:05:06

湖南网络科技有限公司,网站优化推广平台,大连品尚茗居装修公司怎么样,常州市城乡建设学院网站最近在了解vue3相关的技术栈，通过vue2的技术栈进行过渡对比。然后了解汇总了一套属于vue3的常用技术架构：vue3router4viteaxiospiniaElementPlustailwind。除了tailwind，其他在vue2都能找到相关的替代品。所以这里也想试图去了解一下&#xf…

最近在了解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: [],
}

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