vue3项目中使用Tailwind CSS

news/2024/9/29 6:03:27 标签: css, 前端

创建vue3项目（使用vite）

1.首先，在新的文件夹中初始化一个项目，使用Vite创建项目：

npm create vite@latest my-vue3-ts-tailwind-vite --template vue-ts

2.进入项目目录安装依赖

cd my-vue3-ts-tailwind-vite
npm install

3.接下来安装Tailwind CSS和相关工具：

npm install -D tailwindcss postcss autoprefixer

初始化 Tailwind CSS配置文件：

npx tailwindcss init -p

这样在根目录创建了tailwind.config.cjs和postcss.config.cjs两个文件。

4.配置 Tailwind CSS

打开tailwind.config.cjs配置content数组，确保Tailwind CSS 扫描你的Vue组件和TypeScript文件：

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

5.添加 Tailwind CSS 到项目中

在src/style.css文件中，引入 Tailwind的核心样式：

css">@tailwind base;
@tailwind components;
@tailwind utilities;

确保在src/main.ts文件中引入这个CSS文件：

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

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

6.启动开发服务器

接下来，你可以启动开发服务器，查看项目是否配置成功：

npm run dev

访问http://localhost:5173，你应该能看到Vite项目运行成功，并且可以使用 Tailwind CSS。

7.检查 Tailwind CSS 是否正常工作

为了确保 Tailwind CSS 正常工作，可以在src/App.vue中添加以下代码：

<template>
  <div class="text-center">
    <h1 class="text-4xl font-bold text-blue-500">Hello Vue 3 + TypeScript + Tailwind CSS!</h1>
  </div>
</template>

<script lang="ts">
export default {
  name: 'App',
};
</script>

<style scoped>css">
/* 如果你需要在这里添加额外的样式 */
</style>

保存后，页面应该会显示带有 Tailwind 样式的文本。

8.进一步配置（可选）

如果需要，可以在tailwind.config.cjs文件中自定义主题，或者添加插件，比如：

module.exports = {
  theme: {
    extend: {
      colors: {
        guozhaoxi: '#1E40AF', // 自定义一个主题颜色，我这里叫guozhaoxi
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'), // 如果需要，可以添加插件
  ],
};

一旦配置好自定义主题后，你就可以在Vue组件中使用这些自定义的 Tailwind CSS类。例如：

<template>
  <div class="bg-guozhaoxi text-white p-4">
    <h1 class="font-sans text-4xl">欢迎来到我的自定义 Tailwind CSS 主题</h1>
  </div>
</template>

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