Vite5+Vue3整合Tailwindcss详细教程

作者 : admin 本文共600个字,预计阅读时间需要2分钟 发布时间: 2024-06-3 共3人阅读

创建vite项目

执行命令:

npm create vite

Vite5+Vue3整合Tailwindcss详细教程插图

启动项目

npm install -g pnpm 
pnpm i
pnpm dev

Vite5+Vue3整合Tailwindcss详细教程插图(1)

浏览器访问

http://localhost:5174/

Vite5+Vue3整合Tailwindcss详细教程插图(2)

整合Tailwindcss

安装依赖

pnpm install -D tailwindcss postcss autoprefixer

Vite5+Vue3整合Tailwindcss详细教程插图(3)

初始化配置文件

npx tailwindcss init

Vite5+Vue3整合Tailwindcss详细教程插图(4)

用webstorm打开项目

Vite5+Vue3整合Tailwindcss详细教程插图(5)

webstorm配置启动

Vite5+Vue3整合Tailwindcss详细教程插图(6)

Vite5+Vue3整合Tailwindcss详细教程插图(7)

Vite5+Vue3整合Tailwindcss详细教程插图(8)

webstorm启动项目

Vite5+Vue3整合Tailwindcss详细教程插图(9)

Vite5+Vue3整合Tailwindcss详细教程插图(10)

Vite5+Vue3整合Tailwindcss详细教程插图(11)

postcss.config.js

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

tailwind.config.js

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

src/style.css

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

第一个案例

src/App.vue

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

效果预览

Vite5+Vue3整合Tailwindcss详细教程插图(12)

本站无任何商业行为
个人在线分享-虚灵IT资料分享 » Vite5+Vue3整合Tailwindcss详细教程
E-->