当前位置: 首页 > news >正文

Vite5+Vue3整合Tailwindcss详细教程

创建vite项目

执行命令:

npm create vite

在这里插入图片描述

启动项目

npm install -g pnpm 
pnpm i
pnpm dev

在这里插入图片描述

浏览器访问

http://localhost:5174/

在这里插入图片描述

整合Tailwindcss

安装依赖

pnpm install -D tailwindcss postcss autoprefixer

在这里插入图片描述

初始化配置文件

npx tailwindcss init

在这里插入图片描述

用webstorm打开项目

在这里插入图片描述

webstorm配置启动

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

webstorm启动项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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>

效果预览

在这里插入图片描述

http://www.lryc.cn/news/365843.html

相关文章:

  • 小程序 UI 风格魅力非凡
  • 【常用工具系列】Git 教程——从入门到大师
  • 每天坚持写java锻炼能力---第一天(6.4)
  • mysql 如何分布式部署
  • Git的概念
  • 【每日刷题】Day58
  • Python 的七个HTTP请求库对比
  • 顶顶通呼叫中心中间件-如何配置识别不同语种的ASR
  • C# SolidWorks 二次开发-显示配置
  • PXE自动装机
  • MQ之初识kafka
  • linux驱动学习(七)之混杂设备
  • 【数据结构与算法 | 堆篇】力扣215, 703
  • 项目经理进入职场都会经历的三个阶段
  • 消防设施工程乙级资质全解析:申请条件与流程“
  • 【C语言】03.分支结构
  • uniapp手机屏幕左滑返回上一页支持APP,H5
  • 【Java毕业设计】基于JavaWeb的洗衣店管理系统
  • 使用sqlldr向oracle导入大量数据
  • Milvus LIKE操作符
  • iQOO neo 5精简内置组件
  • 为什么给网站安装SSL证书之后还是有被提示不安全?
  • 创建Frame单例,实现WPF页面跳转
  • 正宇软件助力江西数字人大建设,高效解决群众“急难愁盼”问题
  • 打造AIPC轻量化方案 360AI浏览器及360AI搜索全新发布
  • 《effective c++》学习笔记
  • 11.盛水最多的容器
  • 通过在idea上搭建虚拟hadoop环境使用MapReduce做词频去重
  • AI技术变革与企业服务创新
  • 探秘Facebook:社交媒体的未来之路