Tailwind

 

2022-04-19

安装

Vue

Terminal window
1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init -p

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

1
/** @type {import('tailwindcss').Config} */
2
export default {
3
  content: [
4
    "./index.html",
5
    "./src/**/*.{vue,js,ts,jsx,tsx}",
6
  ],
7
  theme: {
8
    extend: {},
9
  },
10
  plugins: [],
11
}

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

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

最后在 src/main.js 导入：

1
import "./css/tailwindcss.css"

使用

靠右对齐

text-right

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

flex

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

float-right

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

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

参考

# css
# npm
# pnpm