长沙网站制作合作商备案域名出售平台

最近在了解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。