Vite5+Vue3整合Tailwindcss详细教程

news/2024/7/16 9:24:12

创建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>

效果预览

在这里插入图片描述


https://www.xjx100.cn/news/3417937.html

相关文章

chrome下浏览器默认选项填充后会影响表单背景和字体颜色

修改input 框背景 input[type“text”]:-internal-autofill-selected, input[type“email”]:-internal-autofill-selected, textarea:-internal-autofill-selected, select:-internal-autofill-selected { background-color: #141414 !important; box-shadow: 0 0 0px 1000px…

怎么做 Redis 容灾

Redis容灾通常指的是数据备份和恢复机制&#xff0c;以确保在发生故障时可以尽快恢复服务。Redis提供了几种方法来保证数据的高可用性&#xff1a; 1. 使用RDB快照&#xff1a;通过配置文件设置定时快照&#xff0c;可以在指定的时间间隔保存数据集到磁盘。 2. 使用AOF日志&a…

深度解读GPT基本原理

GPT&#xff08;Generative Pre-trained Transformer&#xff09;是一种基于Transformer架构的生成式预训练模型&#xff0c;其核心在于通过大规模无监督学习来捕捉语言知识和模式&#xff0c;并通过微调来适应各种下游任务。以下是GPT基本原理的详细解读&#xff1a; 1.Trans…

RK3588 Android13自定义一个按键实现长按短按

一、kernel修改 diff --git a/arch/arm64/boot/dts/rockchip/rk3588-nvr-demo.dtsi b/arch/arm64/boot/dts/rockchip/rk3588-nvr-demo.dtsi index 5aae5c613825..4cc1223f9cbf 100755 --- a/arch/arm64/boot/dts/rockchip/rk3588-nvr-demo.dtsib/arch/arm64/boot/dts/rockchip…

Mysql:通过一张表里的父子级,递归查询并且分组分级

一张表&#xff1a;gc_jzst_single_base WITH RECURSIVE t1 AS ( SELECT single_id, old_build_single_id, single_name, bulid_code , 1 AS LEVEL, single_id groupFlag FROM gc_jzst_single_base WHE…

jupyter notebook anaconda环境下查看|加载|更换内核

文章目录 1 问题复现2 查看内核位置3 调整python解释器位置 1 问题复现 在conda虚拟环境中使用pip安装相应package&#xff0c; 但是在jupyter notebook中加载该package时报错 [ERROR]ModuleNotFoundError: No module named shap 此时&#xff0c;除去包安装出现问题以外&am…

【MySQL】MySQL Connect -- 详解

一、Connector / C 使用 要使用 C 语言连接 MySQL&#xff0c;需要使用 MySQL 官网提供的库&#xff0c;可以去官网进行下载&#xff1a;MySQL :: MySQL Community Downloads 我们使用 C 接口库来进行连接&#xff0c;要正确使用&#xff0c;还需要做一些准备工作&#xff1a…

【MyBatisPlus】MyBatisPlus介绍与使用

【MyBatisPlus】MyBatisPlus介绍与使用 文章目录 【MyBatisPlus】MyBatisPlus介绍与使用1、什么MyBatisPlus2、MyBatisPlus的CRUD操作3、MyBatisPlus分页使用 1、什么MyBatisPlus MyBatisPlus&#xff08;简称MP&#xff09;是基于MyBatis框架基础上开发的增强型工具&#xff0…