tailwind安装和使用

HarryHY

已于 2025-06-11 21:19:12 修改

阅读量377

点赞数 6

CC 4.0 BY-SA版权

分类专栏：工程化文章标签：前端

于 2025-06-10 22:19:00 首次发布

本文链接：https://blog.csdn.net/HarryHY/article/details/148569171

工程化专栏收录该内容

7 篇文章

订阅专栏

安装

我这里使用的是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中文网