Vue3项目中引入TailwindCSS(图文详情)

Vue3项目中引入TailwindCSS(图文详细)

Tailwind CSS 是一个实用工具优先的 CSS 框架,提供丰富的低级类(如 text-centerbg-blue-500),允许开发者通过组合这些类快速构建自定义设计,而无需编写大量自定义 CSS。它高度可定制,支持响应式设计、暗模式和插件扩展,提升开发效率和代码可维护性。Tailwind 的模块化类名减少了样式冲突,简化了团队协作,并且可以通过配置文件轻松调整主题和样式。广泛应用于现代前端项目中,特别适合需要灵活设计和快速迭代的开发场景。

文章目录

    • Vue3项目中引入TailwindCSS(图文详细)
    • 1.安装引入测试
    • 2.Tailwindcss插件代码提示与样式预览
    • 3.Tailwindcss顺序格式化工具安装

1.安装引入测试

首先确保已经使用vite创建了一个vue3可用的项目工程,如果还没有请参考文章:
Vite创建Vue3工程并引入ElementPlus(图文详细)

打开TailWindcss官网:https://tailwind.nodejs.cn/docs/installation

进入安装里点击框架指南找到vite

image-20241222163849852
进去后点击vue框架

image-20241222163916765

打开项目工程终端根目录,安装tailwindcss

npm install -D tailwindcss postcss autoprefixer

初始化生成tailwindcss配置文件

npx tailwindcss init -p

image-20241222164328594

修改配置文件tailwind.config.js

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

image-20241222164353670

修改根目录下生成的style.css文件(如果没有生成,此文件使用vite创建工程会附带)

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

image-20241222164459468

设置vscode忽略未知的规则,消除@警告

image-20241223161020343

设置完毕后波浪线消失

image-20241223161051418

App.vue文件加入测试代码

<template>
	<h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>

<script setup></script>

<style lang="scss" scoped></style>

image-20241222164629304

启动运行项目工程

npm run dev

image-20241222164717882

打开对应的地址可在浏览器看到如下效果,成功的话字体下方会有下划线

image-20241222164905875

2.Tailwindcss插件代码提示与样式预览

在vscode搜索并安装插件

image-20241224114123781

安装插件重启后,当鼠标悬停在对应的Tailwindcss样式类上会显示对应的css样式

image-20241224114750328

当输入相关的tailwindcss时会出现代码提示(如果没出现相关提示则按alit+/快捷键)

image-20241224114850697

3.Tailwindcss顺序格式化工具安装

在我们实际前端项目实际开发中,引入原子化样式库后,很容易出现样式顺序不统一问题,尤其是在多人项目中这一点特别明显具体为,同一个样式效果,引入的原子化样式不一致,导致代码可读性非常差,造成不便于团队协作项目开发和代码可维护性低,具体如下

image-20241222165937093

以上代码样式显示效果完全相同,但是由于个人引入原子化样式库习惯问题导致顺序不一致,使得代码可读性变差

image-20241222170026490

我们期望的结果为样式统一顺序

image-20241222170157118

要想实现以上顺序统一的效果,那么需要引入一个prettier-plugin-tailwindcss

项目根目录安装依赖

npm install -D prettier-plugin-tailwindcss

.prettierrc文件引入插件

"plugins": ["prettier-plugin-tailwindcss"]

image-20241222170333965

这样在使用prettier时,使用对应的TailWindcss的样式将会统一进行排序,实现我们想要的效果

image-20241222170157118

注意:如果保存时自动进行prettier格式化需要先对prettier进行配置参考以下文章:
VScode中配置ESlint+Prettier详细步骤(图文详情)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/942067.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WordPress File Upload 插件 任意文件读取漏洞复现(CVE-2024-9047)

0x01 产品简介 WordPress File Upload插件是一款功能强大的WordPress站点文件上传插件,它允许用户在WordPress站点中的文章、页面、侧边栏或表单中轻松上传文件到wp-contents目录中的任何位置。该插件使用最新的HTML5技术,确保在现代浏览器和移动设备上都能流畅运行,同时也…

GFPS扩展技术原理(七)-音频切换消息流

音频切换消息流 Seeker和Provider通过消息流来同步音频切换能力&#xff0c;触发连接做切换&#xff0c;获取或设置音频切换偏好&#xff0c;通知连接状态等等。为此专门定义了音频切换消息流Message Group 为0x07&#xff0c;Message codes如下&#xff1a; MAC of Audio s…

Java开发经验——系统迁移经验

摘要 本文全面介绍了系统迁移的各个关键步骤和策略&#xff0c;包括需求分析、数据迁移、系统集成、功能优化、业务连续性保障、用户迁移、性能测试、切换与回滚机制、文档转移等。同时&#xff0c;探讨了通用迁移方案、挑战应对措施、不同规模系统的迁移策略&#xff0c;以及…

JavaWeb - ⭐ AOP 面相切面编程原理及用户校验功能实战

一、概述 定义&#xff1a; AOP (Aspect Oriented Programming 面向切面编程) &#xff0c;一种面向方法编程的思想 功能&#xff1a;管理 bean 对象的过程中&#xff0c;通过底层的动态代理机制对特定方法进行功能的增强或改变 实现方式&#xff1a;动态代理技术&#xff0c…

MFC案例:图片文件转图标(ico)格式

本案例程序目的是将一般图像文件转换成图标格式(ico)。实现起来不是很复杂&#xff0c;这里为了介绍MFC的具体使用方法&#xff0c;在程序界面上分成几个功能块&#xff0c;包括&#xff1a;打开图像文件、选择ICON大小、转换、预览、保存等。相关具体步骤如下&#xff1a; 一、…

Scala_【2】变量和数据类型

第二章 注释标识符的命名规范命名规则关键字 变量字符串输出数据类型关系变量和数据类型整数类型&#xff08;Byte、Short、Int、Long&#xff09;浮点类型&#xff08;Float、Double&#xff09;字符类型&#xff08;Char&#xff09;布尔类型&#xff08;Boolean&#xff09;…

R语言数据分析案例46-不同区域教育情况回归分析和探索

一、研究背景 教育是社会发展的基石&#xff0c;对国家和地区的经济、文化以及社会进步起着至关重要的作用。在全球一体化进程加速的今天&#xff0c;不同区域的教育发展水平呈现出多样化的态势。这种差异不仅体现在教育资源的分配上&#xff0c;还表现在教育成果、教育投入与…

8086汇编(16位汇编)学习笔记03.汇编指令

8086汇编(16位汇编)学习笔记03.汇编指令-C/C基础-断点社区-专业的老牌游戏安全技术交流社区 - BpSend.net 指令种类 数据传送指令算数运算类指令位操作类指令串操作类指令控制转移类指令处理器控制类指令 数据传送类指令 **传送类指令不影响标志位&#xff0c;**除了标志位传…

Antd react上传图片格式限制

限制分辨率&#xff08;像素&#xff09; <a-upload :before-upload"beforeUpload">// 上传图片宽高比例限制const beforeUpload file > {return new Promise((resolve, reject) > {// // 图片类型限制// let isJpgOrPng file.type image/png || fil…

Confluent Cloud Kafka 可观测性最佳实践

Confluent Cloud 介绍 Confluent Cloud 是一个完全托管的 Apache Kafka 服务&#xff0c;提供高可用性和可扩展性&#xff0c;旨在简化数据流处理和实时数据集成。用户可以轻松创建和管理 Kafka 集群&#xff0c;而无需担心基础设施的维护和管理。Confluent Cloud 支持多种数据…

StartAI图生图局部重绘,让画面细节焕发新生!!

在设计的世界里&#xff0c;每一个细节都承载着我们的创意与心血。然而&#xff0c;有时我们总会遇到一些不尽如人意的画面细节&#xff0c;它们如同瑕疵般破坏了整体的和谐与美感。今天&#xff0c;我要向大家推荐一款强大的工具——StartAI的局部重绘功能&#xff0c;它正是我…

易语言 OCR 文字识别

一.引言 文字识别&#xff0c;也称为光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;&#xff0c;是一种将不同形式的文档&#xff08;如扫描的纸质文档、PDF文件或数字相机拍摄的图片&#xff09;中的文字转换成可编辑和可搜索的数据的技术。随着技…

重温设计模式--单例模式

文章目录 单例模式&#xff08;Singleton Pattern&#xff09;概述单例模式的实现方式及代码示例1. 饿汉式单例&#xff08;在程序启动时就创建实例&#xff09;2. 懒汉式单例&#xff08;在第一次使用时才创建实例&#xff09; 单例模式的注意事项应用场景 C代码懒汉模式-经典…

ArKTS基础组件3

一.PatternLock 图案密码锁组件&#xff0c;以九宫格图案的方式输入密码&#xff0c;用于密码验证场景 属性: sideLength:设置组件的宽度和高度&#xff08;宽高相同&#xff09;。设置为0或负数时组件不显示。 参数名类型必填说明valueLength是组件的宽度和高度。默认值&a…

python2:数据、运算符与表达式

一&#xff0c;数据类型&#xff1a; 数据类型是计算机对现实中数据的抽象&#xff0c;不同的数据类型其存储格式、数据范围、 计算要求都各不相同。 Python中的数据类型可以分为以下三类 基础类型&#xff1a;字符串(str)、整数(int)、实数(float)、布尔(bool)、复数(compl…

tortoisegit推送失败

tortoisegit推送失败 git.exe push --progress -- "origin" testLidar:testLidar /usr/bin/bash: gitgithub.com: No such file or directory fatal: Could not read from remote repository. Please make sure you have the correct access rights and the reposit…

pyinstaller打包资源文件和ini配置文件怎么放

1.如果出现无法成功完成操作&#xff0c;因为文件包含病毒或潜在的垃圾软件&#xff0c;说明你的版本太高&#xff0c;更换pyinstaller版本。 pip install pyinstaller6.2.02.一开始打包的时windows下尽量选择打成文件夹的并且要是带命令行窗口的&#xff0c;容易查看错误。 …

autMan奥特曼机器人-autMan的PHP环境

直装版请自行安装php环境。 docker版本预置了php环境&#xff0c;如下图&#xff1a; 如果使用插件"test php"测试环境时&#xff0c;实时日志有报错如下&#xff1a; 可进入终端&#xff0c;输入两条命令 apk add curl apk add php-curl

uniApp打包H5发布到服务器(docker)

使用docker部署uniApp打包后的H5项目记录&#xff0c;好像和VUE项目打包没什么区别... 用HX打开项目&#xff0c;首先调整manifest.json文件 开始用HX打包 填服务器域名和端口号~ 打包完成后可以看到控制台信息 我们可以在web文件夹下拿到下面打包好的静态文件 用FinalShell或…

【Leetcode】1705. 吃苹果的最大数目

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 有一棵特殊的苹果树&#xff0c;一连 n n n 天&#xff0c;每天都可以长出若干个苹果。在第 i i i 天&#xff0c;树上会长出 a p p l e s [ i ] apples[i] apples[i] 个苹果&a…