在项目里面导入tailiwindcss

NPCZ2026-04-11 11:00

打开tailiwindcss的官网

点击这里选择3

然后点击这里

然后点击这里，就可以看到使用vite导入tailiwindcss的步骤

第一步骤创建一个基本项目

这个步骤之前已经做过了

第二步骤

安装几个包npm install -D tailwindcss@3 postcss autoprefixer

所以我们现在直接从这里开始

npm install -D tailwindcss@3 postcss autoprefixer

npx tailwindcss init -p

可以看到在这里生成了一个文件

第三步骤复制这个

content: $"./index.html", "./src/\*\*/\*.{vue,js,ts,jsx,tsx}"$ ,

放到这里，这个意思表示我们会从index.html，以及src下面所有以vue,js,ts,jsx,tsx为结尾的文件中去使用tailiwindcss

第四步骤我们需要找到css添加这三行代码

@tailwind base; @tailwind components; @tailwind utilities;

这个位置的默认样式全部都不要

把尴尬才的三行代码放到这里来

第五步骤 npm run dev 直接启动

第六步直接使用

在App.vue 里面我们试试

<div>

<div class="text-red-600 text-3xl">hello tailwind</div>

</div>

</template>

可以看到这个效果，说明我们已经导入成功了