TailWindCss安装使用教程

tailwindcss依赖安装成功后，会生成2个文件，分别是：tailwind.config.js和postcss.config.js。

1.配置tailwind.config.js，配置模版路径

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

content指定哪些文件会用到 Tailwind 的类名（避免未使用的样式被打包）

备注：tailwind.config.js为了生成样式 会扫描 项目中用到的css样式 的文件，扫描的文件地址配置即匹配content: "./src/**/.{html,js,vue}"的结果，大家可以根据自己的项目需求具体调整 扫描文件

2.添加 Tailwind 指令到 CSS 文件

在src目录下的创建input.css文件，文件中加入如下代码，添加以下三个 Tailwind 的核心指令，用于引入基础样式、组件样式和工具类样式。

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

执行命令生成output.css

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

并引入main.ts中

在index.html中也引入output.css

开始使用：

<template><div><h1 class="text-center text-blue-500 font-bold">Hello world!</h1></div>
</template>

生成效果如下：