Tailwind

安装 §

Vue §

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p 

修改 tailwind.config.js 配置文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

之后在 src/css/tailwind.css 中增加：

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

最后在 src/main.js 导入：

import "./css/tailwindcss.css"

使用 §

靠右对齐 §

text-right §

<div class="text-right">
  <span>靠右对齐的元素</span>
</div>

flex §

<div class="flex justify-end">
  <span>靠右对齐的元素</span>
</div>

float-right §

<div>
  <span class="float-right">靠右对齐的元素</span>
</div>

这个方式会导致 div 中的元素顺序反转

参考 §

• Install Tailwind CSS with Vite
• Tailwind UI
• Tailwind CSS 中文文档