vue3 项目中引入tailwindcss

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

官网：https://www.tailwindcss.cn/docs/installation

在项目中使用过程如下：

• 安装 tailwindcss

npm i -D tailwindcss@latest

• 创建tailwind.config.js 配置文件

npx tailwindcss init 

• 在tailwind.config.js 进行配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  //  配置要加载的模块
  content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 在src下创建一个tailwindcss模块，创建index.css模块，写如下代码：

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

• 在main.ts 中 引入tailwindcss

import './tailwindcss/index.css'

• 在组件中应用

<template>
  <div class="w-screen h-screen bg-red-300 flex justify-center items-center text-blue-100">
    应用 tailwindcss，官网参考文档如下：https://www.tailwindcss.cn/docs/installation
  </div>
</template>