TailwindCss v3版本 + lucide 图标 配置

安装

使用的插件及版本

"dependencies": { "@tailwindcss/vite": "^4.1.14", }, "devDependencies":{ "@egoist/tailwindcss-icons": "^1.9.2", "@iconify-json/lucide": "^1.2.105", "autoprefixer": "^10.5.0", "tailwindcss": "^3.4.19", }

配置文件

主路径增加“tailwind.config.js” 和 “postcss.config.js”
tailwind.config.js

import type { Config } from 'tailwindcss'; import defaultTheme from 'tailwindcss/defaultTheme'; import {iconsPlugin,getIconCollections} from '@egoist/tailwindcss-icons'; export default <Config>{ content: [ './index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}', '!./src/uni_modules/**/*', ], theme: { extend: { fontFamily: { sans: ['"Noto Sans SC"', ...(defaultTheme.fontFamily?.sans ?? [])], }, }, }, corePlugins: { preflight: false, container: false, }, plugins: [ iconsPlugin({ collections: getIconCollections(['lucide']) }) ], }

postcss.config.js

export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }

vite.config.js

import tailwindcss from 'tailwindcss' css: { postcss: { plugins: [ tailwindcss() ] } }

src目录增加 style.css

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

main.ts 引入style.css

import './style.css'