在vue2 中使用 tailwindcss的方法 亲测可用

下面是详细讲解在Vue2中使用Tailwind CSS的方法。

1. 安装Tailwind CSS

要使用Tailwind CSS，需要先安装它。可以使用npm或yarn进行安装。打开终端，然后在项目的根目录下运行以下命令：

npm install tailwindcss

或

yarn add tailwindcss

然后，在项目的根目录下生成一个node_modules文件夹，其中包含了Tailwind CSS及其依赖项。

2. 创建tailwind.config.js文件

接下来，需要在项目的根目录下创建一个名为tailwind.config.js的文件。在该文件中，可以配置和定制项目所使用的Tailwind CSS的各项属性。

可以先创建一个基本的配置，例如：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

这将生成一个基本配置，其中包含了一些默认值。需要根据项目实际需求进行进一步定制。

3. 配置postcss.config.js

接下来，需要在项目的根目录下创建一个名为postcss.config.js的文件，并将以下配置复制到该文件中：

module.exports = {
  plugins: [require("tailwindcss")],
};

这告诉PostCSS要使用Tailwind CSS。

4. 在Vue组件中引入样式

接下来，在Vue组件中引入Tailwind CSS。例如，在App.vue组件中，可以将以下代码添加到<style>标签中：

<style>
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
  /* 其他样式 */
</style>

其中，@import语句将base、components和utilities模块导入了样式表中。可以在tailwind.config.js文件中根据需要自定义这些模块。

示例1：在按钮组件中使用Tailwind CSS

假设现在要在Vue应用中创建一个带有背景颜色的按钮组件。可以创建一个名为Button.vue的新组件，并使用以下代码来定义其样式：

<template>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
    {{ text }}
  </button>
</template>

<script>
export default {
  name: "Button",
  props: {
    text: String,
  },
};
</script>

<style>
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

  .bg-green-500 {
    background-color: #34d399;
  }

  .hover\:bg-green-700:hover {
    background-color: #10b981;
  }

  .text-white {
    color: #ffffff;
  }

  .font-bold {
    font-weight: bold;
  }

  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .rounded {
    border-radius: 0.25rem;
  }
</style>

这里使用了Tailwind CSS的几个类名，例如bg-green-500表示按钮的背景为绿色，hover:bg-green-700表示鼠标悬停时按钮背景色为深绿色等等。同时，也可以根据需求添加一些自定义的样式。

示例2：在列表组件中使用Tailwind CSS

假设需要在Vue应用中创建一个带有颜色条纹的列表组件。可以创建一个名为List.vue的新组件，并使用以下代码来定义其样式：

<template>
  <ul class="bg-white rounded-lg shadow">
    <li
      v-for="(item, index) in items"
      :key="index"
      :class="index % 2 === 0 ? 'bg-gray-100' : ''"
      class="px-4 py-2"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  name: "List",
  props: {
    items: Array,
  },
};
</script>

<style>
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

  .bg-white {
    background-color: #ffffff;
  }

  .rounded-lg {
    border-radius: 0.5rem;
  }

  .shadow {
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06),
      0px 2px 2px rgba(0, 0, 0, 0.07);
  }

  .bg-gray-100 {
    background-color: #f3f4f6;
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
</style>

这里使用了Tailwind CSS的类名来定义列表的样式，例如bg-white表示列表的背景为白色，rounded-lg表示列表的圆角为0.5rem等等。同时，也可以根据需求添加一些自定义的样式。class="index % 2 === 0 ? 'bg-gray-100' : ''"的意思是如果index为偶数，则添加bg-gray-100类，实现隔行变色的效果。