TailwindCss安装

  1. 安装tailwindcss和postcss
1
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  1. 项目中初始化，会生成两个js文件（postcss.config.js和tailwind.config.js）
1
npx tailwindcss init -p
  1. 添加对应的识别文件

tailwind.config.js

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

若项改为ts文件

tailwind.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

  1. 在src 目录下创建目录styles，并在该目录下创建Tailwind.css，用 @tailwind 指令添加 Tailwind功能。
1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 在main.ts 中引入Tailwind.css
1
import "@/styles/Tailwind.css";