tailwind安装和使用

安装

我这里使用的是vite工程 所以用的是/vite版本

npm install tailwindcss @tailwindcss/vite
or
pnpm i tailwindcss @tailwindcss/vite

vite.config文件

import tailwindcss from '@tailwindcss/vite' // 引入tailwindcss https://tailwindcss.com/docs/guides/vite 
plugins: [tailwindcss(),// 引入tailwindcss],

在你的项目中创建一个静态css文件做引入 我的是tailwindMain.css

@import "tailwindcss";

在main.ts中引入tailwindMain

import '@/assets/tailwindMain.css' //引入tailwindMain.css

还有其他的方法 例如 postcss
然后正常使用即可

class="bg-black w-auto h-50 flex justify-center items-center cursor-pointer"

推荐常用的tailwind vscode常用的插件

Tailwind Documentation //在Tailwind文档中即时搜索。
Tailwind CSS IntelliSense //提供自动补全、语法突出显示和linting等高级功能
Tailwind Snippets //快捷方式 
Tailwind Fold // 折叠

其他安装方法可以查看tailwind中文网