一、使用Vite + Tailwind CSS创建项目

步骤：

①在自己电脑的D盘或者其他不是C盘的盘符里新建一个空文件夹，文件夹的名字自己命名，然后打开VScode，把这个文件夹添加到工作区，在终端用Vite + Tailwind CSS构建项目, 命令如下：

npm create vite@latest

可参考vite官网，如下图所示：

我的如下图所示：

继续按Enter（回车），如下图所示：

继续按Enter（回车），选择Vue，如下图所示：

继续按Enter（回车），选择JavaScript，如下图所示：

继续按Enter（回车），如下图所示：

复制上图中的cd vite-project，按鼠标右键粘贴到终端，如下图所示：

然后复制上图中的 npm install，也可以自己简写成npm i，按鼠标右键粘贴到终端，安装依赖，如下图所示：

然后输入npm run dev，也可以直接复制上图中的命令，按鼠标右键粘贴到终端，运行项目，如下图所示：

按住Ctrl键，鼠标选中上图中Local后面的链接，即可打开页面，如下图所示：

二、安装Tailwind CSS时报错

②在项目中导入Tailwind CSS，打开Tailwind CSS官网，如下图所示：

然后就会进入这个页面，点击Framework Guides，如下图所示：

点击页面右上角的“太阳”图标，可以切换主题

切换成dark模式的页面如下图所示：

然后找到Vite，点击，如下图所示：

然后选择 Using Vue，就可以看到使用Vite + Vue 导入 Tailwind CSS的详细步骤，如下图所示：

上图中的Create your project这一步已经 做了，所以接下来只需要从2开始。复制旁边的命令，按鼠标右键粘贴到终端，如下图所示：



继续复制命令，按鼠标右键粘贴到终端，如下图所示：

结果出现报错，如下图所示：

出现这个报错的原因是最新版的Tailwind CSS可能存在兼容性问题，建议安装指定版本，比如V3版本

解决办法

安装V3版本，命令如下：

npm install -D tailwindcss@3 postcss autoprefixer

复制上面的命令，按鼠标右键粘贴到终端，如下图所示：

然后再重新执行npx tailwindcss init -p，如下图所示：

此时项目根目录下会多出2个文件，分别是tailwind.config.js和postcss.config.js，如下图所示：

③修改tailwind.config.js的配置，复制content里面的2行代码，如下图所示：

将上图中复制的2行代码粘贴到tailwind.config.js中，如下图所示：

④将Tailwind指令添加到你的CSS中，复制这3行代码，如下图所示：

把src文件夹下style.css中原本的样式代码全部删掉，然后将上图中复制的3行代码粘贴到中，如下图所示：


注意：上图中的代码里之所以有波浪线，是因为没有安装Tailwind CSS IntelliSense这个插件，要先安装一下这个插件如下图所示：

只要安装了Tailwind CSS IntelliSense这个插件，代码里就没有波浪线了，而且后面书写代码时，会有提示，如下图所示：

另外还可以安装一下PostCSS Language Support这个插件，如下图所示：

⑤输入npm run dev，启动项目：

直接复制上图中的命令，按鼠标右键粘贴到终端，也可以自己手动输入npm run dev，如下图所示：

⑥项目运行成功以后，就可以开始在你的项目中使用Tailwind了

可以把App.vue中原始代码里的script标签，以及template模板里的div标签和style标签里的内容都删掉，然后复制上图中的代码，粘贴到template模板里的div标签中，如下图所示：

三、Tailwind CSS样式不生效

在终端输入npm run dev启动项目，如下图所示：

结果发现样式没生效，按理应该是红色，加粗的字体，可是页面却是这样的，如下图所示：

解决办法

修改tailwind.config.js，如下图所示：

重新在终端输入npm run dev启动项目，如下图所示：

现在样式就生效啦，如下图所示：