Tailwind

2022-04-19

安装

Vue

Terminal window
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 中的元素顺序反转

参考

# CSS
# npm
# pnpm