安装css框架tailwind

Vue是一个JavaScript前端框架，主要用于编写前端的业务逻辑。然而，在构建页面时，除了JavaScript代码外，我们还需要HTML和CSS代码的支持。

例如，在components/hello world.vue文件中，我们可以看到HTML标签（如div、h1、p）和CSS样式（在style标签中）。

为了提高编写HTML页面的效率，我们引入了一个名为tailwind CSS的前端CSS样式库。在浏览器地址栏中输入：

www.tailwindCSS.com

我们可以进入其官网，如下图所示；

tailwind CSS它可以通过更加简单的CSS样式的名称来表示CSS样式。了解其更简单的CSS样式表示方式，例如 w-24 表示宽度为 24，PT-6 表示 Padding Top 6 等。如下图所示：

tailwind CSS具有许多优势，但具体内容我们就不再赘述了，小伙伴们可以自行前往官网了解。接下来，我们来看一下如何安装tailwind CSS。首先，点击“Get Started”，如下图所示：

然后选择安装方式。我们想使用npm进行安装，并且使用PostCSS。如下图所示：

这里有四步，我们逐步来安装，首先第一步先使用npm install -d来安装这三个插件tailwind CSS，PostCSS，Autoprefixer。在安装过程中，我们将npm替换成了cnpm，以提高安装速度。回到我们的项目中，先把我们当前启动的项目关闭使用Ctrl+C快捷键。然后在这里我们在Frontend这个前端文件夹下

输入命令：

copm install -D tailwindcss postcss autoprefixer

安装完成后，我们需要使用npx来初始化tailwind CSS。在vscode终端输入命令：

npx tailwindcss init

初始化完成后，会生成一个名为 tailwind.config.js 的配置文件。如下图所示：

第二步我们还需要配置 PostCSS.config.js 文件，如果系统没有为我们创建，则需要手动创建。在Frontend文件夹下创建PostCSS.config.js，并将配置信息拷贝过去。如下图所示：

PostCSS.config.js 配置信息如下：

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

然后，我们需要配置frotend/tailwind.config.js 文件，我们可以对比默认的配置文件，根据自己的需求进行相应的配置。在配置文件中，我们可以设置路径和文件后缀，以便tailwind CSS可以自动查找文件。配置代码如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    extend: {}
  },
  plugins: [],
}

接下来，我们创建一个名为 tailwind.css 的自定义CSS文件，并将刚才的配置文件导入进来。通常情况下，我们将这个文件放在frontend/src/assets/css文件夹下。配置代码如下：

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

接下来咱们就来启动tailwind，启动我们就用自己的服务来启动了，就不用它的dev了，我们为了在项目中来引入，我们来找到项目的入口文件main.js，然后，在项目的入口文件 main.js 中引入这个tailwind CSS文件。如下图所示：

接下来，我们选取了views文件夹中的about页面来测试一下tailwind CSS的效果，因为这个页面相对简单。在这里，我们开始设置样式，直接使用class属性。首先，我们简单地添加了一个背景色，使用了bg-gray类。bg-gray类具有一个特点，根据其后的数值不同，可以呈现出不同深浅程度的灰度效果，例如bg-gray-50代表较浅的灰度值，而bg-gray-500则表示较深的灰度值。如下图所示：

接着，我们启动了服务，查看about页面是否成功添加了背景色。如果页面成功显示了灰色背景，那么说明我们成功引入了tailwind CSS。我们再次启动了项目，在终端输入如下命令：

pnpm run serve

在浏览器地址栏输入：127.0.0.1:8080/about来访问了about页面，确认了背景色已经成功添加。如下图所示：

接下来，我们尝试设置字体大小，使用了text-xl类来设定字体大小为3倍。随后，我们又为文字添加了加粗样式，使用了font-bold类。此时，文字变得更加粗细，使得内容更加突出。代码截图如下：

除了背景色、字体大小和加粗外，tailwind CSS还提供了丰富的样式类，用于设置颜色、边框、间距等各种样式。我们可以根据tailwind CSS文档中介绍的相关样式来熟练地使用它。