vue3使用 Tailwind CSS （4.多版本）

vue3使用 Tailwind CSS （4.多版本）

• 安装npm install tailwindcss @tailwindcss/vite
• 配置

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

• 创建一个普通的 CSS 文件（例如 src/tailwind.css） .css文件

@import "tailwindcss";

// main.js
import './tailwind.css';

• 使用 npm run dev
  警告：如果vscode不按照这样提示
  
  在vscode里使用快捷键 Ctrl + Shift + P

{"tailwindCSS.includePaths": ["./src/**/*.{html,js,jsx,ts,tsx,vue}","./node_modules"],"editor.quickSuggestions": {"other": true,"comments": false,"strings": true},"editor.suggestOnTriggerCharacters": true,"editor.acceptSuggestionOnEnter": "on","editor.tabCompletion": "on","css.validate": false,"less.validate": false,"scss.validate": false
}

安装 Tailwind CSS IntelliSense 插件