最新！Tailwind安装教程及失误解决！

准备跟一个可视化教程做vite项目的，没想到卡在第一步安装Tailwind。。。。所以整理好给大家一些参考！

跟着官方英文网址（附链接）Installing Tailwind CSS with Vite - Tailwind CSS，现在已经更新到v4了！！网上很多教程都是v3的，步骤不一样！！！

以下是Tailwind v4最新教程。用vscode+vite

首先，创建vite.

1、新建一个文件夹，打开终端输入：

npm create vite@latest

然后我在底下选择的是vue,Javascript，可以按你们的想法选择。

这是会看到执行成功后已经自动生成了一个文件夹。进入根文件夹。

2、安装依赖：npm install npm run dev

跑程序：npm run dev

这时vite初始页面已经可以打开了！

然后就开始安装tailwind啦！

1、在终端输入：npm install tailwindcss @tailwindcss/vite

2、在vite.config.ts文件中配置：

import tailwindcss from '@tailwindcss/vite'，

plugins: [ tailwindcss(), ],

这两句加入，变成这样：

注意：vue的两句配置不要删！！！不然后面会报错！！！

3、在src/style.css文件中配置：

删除原有样式，加入@import "tailwindcss";

4、在终端输入npm run dev，运行程序。

5、在app.vue文件中配置：

加入<link href="/dist/styles.css" rel="stylesheet">

<h1 class="text-3xl font-bold underline"> Hello world! </h1>

注意：打这个class样式可以按空格，再输入，会有提示自动填入。如果没有提示就在vscode里安装Tailwind CSS IntelliSense插件。

6、打开run的网址，就能看到成功显示字体的颜色的大小！！！成功！！

ps:如果有朋友安装v3，一定也要按照教程来！

我在npx tailwindcss init这一步错了好久，最后转v4才成功。。。

最后贴出这篇问答！！救好了！！！感谢大佬！！

Unable to Run npx tailwindcss init -p - "Could Not Determine Executable to Run" · tailwindlabs/tailwindcss · Discussion #15820