vue学习第2期 - 集成tailwind

72 阅读1分钟

参考:tailwindcss.com/docs/instal…

安装依赖

pnpm install tailwindcss @tailwindcss/vite

配置插件

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'   // 关键
export default defineConfig({
  plugins: [
    tailwindcss(),   // 关键
  ],
})

全局css文件引入

@import "tailwindcss";

使用

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

说明已经生效了。

vscode插件

Tailwind CSS IntelliSense

使用这个插件可以提示帮助开发效率。