Vite5+Vue3整合Tailwindcss详细教程

Python私教2024-06-08 9:48

创建vite项目

执行命令：

bash 复制代码

npm create vite

启动项目

bash 复制代码

npm install -g pnpm 
pnpm i
pnpm dev

浏览器访问

http://localhost:5174/

整合Tailwindcss

安装依赖

bash 复制代码

pnpm install -D tailwindcss postcss autoprefixer

初始化配置文件

bash 复制代码

npx tailwindcss init

用webstorm打开项目

webstorm配置启动

webstorm启动项目

postcss.config.js

js 复制代码

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

tailwind.config.js

js 复制代码

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

src/style.css

css 复制代码

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

第一个案例

src/App.vue

html 复制代码

<template>
  <div>
    <h1 class="text-3xl font-bold underline bg-indigo-500">你好Vue3</h1>
  </div>
</template>

Vite5+Vue3整合Tailwindcss详细教程

创建vite项目

启动项目

浏览器访问

整合Tailwindcss

安装依赖

初始化配置文件

用webstorm打开项目

webstorm配置启动

webstorm启动项目

postcss.config.js

tailwind.config.js

src/style.css

第一个案例

效果预览