Tailwind CSS + Vite + Vue

本文介绍如何在 Vue 项目中使用 Tailwind CSS 和 Vite。Tailwind CSS 是一个高度可定制的 CSS 框架，Vite 是一个快速的前端构建工具，Vue 是一个流行的 JavaScript 框架。

1. 安装 Vite

首先，需要安装 Node.js 和 npm。然后，在命令行中运行以下命令以全局安装 Vite：

npm install -g create-vite

2. 创建 Vue 项目

使用 Vite 创建一个新的 Vue 项目。在命令行中运行以下命令：

create-vite my-vue-project --template vue

这将创建一个名为 my-vue-project 的目录，并在其中设置基本的 Vue 项目结构。

3. 安装 Tailwind CSS

进入项目目录，然后使用 npm 安装 Tailwind CSS 和相关的依赖项：

cd my-vue-project
npm install tailwindcss postcss autoprefixer

4. 配置 Tailwind CSS

在项目根目录中创建一个 postcss.config.js 文件，并添加以下内容：

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

然后，在项目根目录中创建一个 tailwind.config.js 文件，并添加以下内容：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

创建一个名为 styles.css 的文件，并添加以下内容：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

5. 更新项目结构

在项目的 src 目录中，删除原有的 App.vue、components 和 assets 目录。

在 src 目录中，创建一个新的 components 目录，并在其中添加一个新的 App.vue 文件。在 App.vue 文件中，添加以下内容：

<template>
  <div class="max-w-md mx-auto p-4 space-y-4">
    <h1 class="text-3xl font-bold">Hello Tailwind CSS!</h1>
    <p class="text-gray-500">Welcome to my Vue project.</p>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

更新项目根目录下的 main.js 文件，使其内容如下：

import { createApp } from 'vue';
import App from './App.vue';
import './styles.css';

createApp(App).mount('#app');

6. 运行项目

运行以下命令以启动项目：

npm run dev

现在，您可以在浏览器中访问 http://localhost:3000 查看您的 Vue 应用程序，并且已经应用了 Tailwind CSS 的样式。

结论

本文介绍了如何在 Vue 项目中使用 Tailwind CSS 和 Vite。通过遵循上述步骤，您可以轻松地将 Tailwind CSS 集成到您的 Vue 应用程序中，并利用 Vite 的快速构建能力加快开发速度。

希望您能享受使用 Tailwind CSS 和 Vite 构建 Vue 应用程序的过程！