Vue3 使用Tailwindcss指南（vite）

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。也就是会减少css文件的创建，把对应的样式的类名都写到class上。

1.首先安装以下依赖

npm i -D tailwindcss postcss autoprefixer

安装完后，创建你自己的 create your tailwind.config.js，和postcss.config.js 配置文件,命令如下：

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: [],
}

 postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

2.然后在你的文件目录下建一个css文件例如input.css引入tailwindcss的功能模块。

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

在使用命令npx tailwindcss -i ./src/assets/style/input.css -o ./dist/output.css --watch

会生成一个在dist文件下的output.css文件。

3.在main.js文件下导入src/assets/style/input.css文件

4.接着就可以愉快的使用Tailwindcss拉。