TailWindCss安装使用教程

罗会2025-07-30 16:55

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

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

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}"的结果，大家可以根据自己的项目需求具体调整扫描文件

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

js 复制代码

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

执行命令生成output.css

js 复制代码

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

并引入main.ts中

在index.html中也引入output.css

开始使用：

js 复制代码

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

生成效果如下：