Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

npm install tailwindcss@^2.2 postcss@^7 autoprefixer@^9

npx tailwindcss init

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

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

import '@/assets/tailwind.css';

<template>
  <div class="p-4">
    <h1 class="text-2xl font-bold text-blue-500">TailwindCSS 是否生效？</h1>
    <button class="mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
      测试按钮
    </button>
  </div>
</template>

import "tailwindcss/tailwind.css"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="external nofollow"  />

<i class="fa-solid fa-qrcode text-2xl text-primary"></i>

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/vue-fontawesome

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faQrcode } from '@fortawesome/free-solid-svg-icons'
import { faWeixin } from '@fortawesome/free-brands-svg-icons'
library.add(faQrcode, faWeixin)
Vue.component('font-awesome-icon', FontAwesomeIcon)

<font-awesome-icon :icon="['fas', 'qrcode']" class="text-2xl text-primary" />
<font-awesome-icon :icon="['fab', 'weixin']" class="text-xl" />

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npx tailwindcss init # 空的
npx tailwindcss init -fill # 包含默认的

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

import "tailwindcss/tailwind.css"