vue使用tailwindcss

安装依赖

pnpm add -D tailwindcss postcss autoprefixer

创建配置文件tailwind.config.js

npx tailwindcss init

在配置文件content中添加所有模板文件的路径

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

将 Tailwind 指令添加到你的 CSS

\src\style\tailwind.css中添加

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

main.js文件引用

import '@/style/tailwind.css'

创建配置文件postcss.config.js

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

vscode编辑器安装插件

Tailwind CSS IntelliSense
Tailwind CSS IntelliSense

修改vscode配置文件

\.vscode\settings.json中添加

// 用来设置是否在其他位置、注释和字符串中显示代码提示,这里都设置为 true,表示都显示
"editor.quickSuggestions": {"other": "on","comments": "on","strings": "on"
}

写代码显示效果为
在这里插入图片描述

参考

在VUE中使用Tailwind CSS
安装 - Tailwind CSS

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】开发工具入门指南,轻松掌握你的开发利器

开发工具 1. 软件包管理器yum1.1 软件包安装方式1.2 yum的"三板斧"1.3 yum的周边 2. 开发工具3. 编辑器vim4. 编译器gcc、g5. 项目自动化构建工具make、Makefile6. 进度条小程序7. 调试器gdb 1. 软件包管理器yum 1.1 软件包安装方式 源代码安装:用户手动…

微信小程序 npm构建+vant-weaap安装

微信小程序:工具-npm构建 报错 解决: 1、新建miniprogram文件后,直接进入到miniprogram目录,再次执行下面两个命令,然后再构建npm成功 npm init -y npm install express(Node js后端Express开发&#xff…

智慧校园的机遇与挑战

随着5G、物联网、大数据等技能的日渐老练,数字化正在渗透到各行各业中,为事务立异和价值增加供给支撑。在教育职业,运用智能化体系赋能教育办理越来越受欢迎,教育信息化方针一再出台,进一步加快了智慧校园落地的脚步。…

Linux - 文件管理高级 sed

3.处理字符 sed ① sed 默认情况下不会修改原文件内容 ② sed 是一种非交互式的编辑器 3.1 工作原理 将原文件一行一行的进行处理,取出一行,放入“模式空间进行处理”,处理完成之后将结果输出到屏幕上,然后读取下一行&#xf…

彭涛 | 2024年5月小结

5月份还是蛮有刺激的,做了蛮多的事情,但是没赚到钱,真是一屯操作猛如虎,一看账户0.5。 就喜欢创业这种一天天累死累活还不赚钱的感觉,哈哈哈哈 老规矩简单说下这个月的情况,如果对你有收获就最好了。 游学丹…

测绘外业需要注意些什么?

在进行测绘外业时,需要注意的事项涉及多个方面,包括充分的准备工作、合理的设备选择、精确的操作技巧以及细致的数据处理。下面将具体展开这些要点: 1. 充分准备 - 了解任务要求:在开始外业工作前,需要明确测绘的目…

VUE框架前置知识总结

一、前言 在学习vue框架中,总是有些知识不是很熟悉,又不想系统的学习JS,因为学习成本太大了,所以用到什么知识就学习什么知识。此文档就用于记录零散的知识点。主要是还是针对与ES6规范的JS知识点。 以下实验环境都是在windows环…

头歌页面置换算法第2关:计算OPT算法缺页率

2 任务:OPT算法 2.1 任务描述 设计OPT页面置换算法模拟程序:从键盘输入访问串。计算OPT算法在不同内存页框数时的缺页数和缺页率。要求程序模拟驻留集变化过程,即能模拟页框装入与释放过程。 2.2任务要求 输入串长度作为总页框数目,补充程序完成OPT算法。 2.3算法思路 OPT算…

【Tlias智能学习辅助系统】04 部门管理 删除 和 新增

Tlias智能学习辅助系统 04 部门管理 删除 和 新增 删除部门APIDeptController.javaDeptService.javaDeptServiceImpl.javaDeptMapper.java前端联调 新增部门API有一步简化DeptController.javaDeptService.javaDeptServiceImpl.javaDeptMapper.java前端联调 删除部门API 请求路径…

31-ESP32-S3-WIFI篇-02 Event Group (事件标记组)

ESP32-S3-WIFI 事件标记组 介绍 在ESP32-S3的WiFi驱动程序中,事件标记组(Event Group)是一个非常重要的概念。它是FreeRTOS中的一种同步机制,用于在任务之间传递和同步事件。在WiFi驱动程序中,我们使用事件标记组来通…

Go 语言字符串及 strings 和 strconv 包

在 Go 语言编程中,字符串是最基本、最常用的数据类型之一。无论是处理用户输入、读取文件内容,还是生成输出,字符串操作无处不在。为了方便开发者对字符串进行各种操作,Go 语言提供了强大的 strings 包和 strconv 包。strings 包包…

Selenium+Java 环境搭建

selenium 介绍 Selenium 是 web 应用中基于 UI 的自动化测试框架,支持多平台、多浏览器、多语言。 早期的 selenium RC 已经被现在的 webDriver 所替代,可以简单的理解为selenium1.0webdriver 构成 现在的 Selenium2.0 。现在我们说起 selenium &#xf…

适合学生写作业的台灯有哪些?台灯怎么选详细攻略!

在数字化飞速发展的今天,孩子们的学习和生活越来越离不开电子屏幕。然而,长时间盯着屏幕,不仅容易让眼睛感到疲劳,更是近视问题日益严重的元凶之一。每一位家长都希望孩子能拥有健康的视力,因此会为孩子挑选一台护眼灯…

MySQL十部曲之九:MySQL优化理论

文章目录 前言概述查询优化查询执行计划EXPLAIN获取表结构信息获取执行计划信息 EXPLAIN 输出格式如何使用EXPLAIN进行优化 范围访问优化单列索引的范围访问多列索引的范围访问 索引合并优化索引合并交叉访问算法索引合并联合访问算法索引合并排序联合访问算法 索引下推优化连接…

豆包浏览器插件会造成code标签内容无法正常显示

启用状态:页面的代码会显示不正常 禁用后,正常显示 害得我重置浏览器设置,一个个测试

spring mvc 中怎样定位到请求调用的controller

前言 在java web开发过程中,正常情况下controller都是我们自己写的,我们可以很方便的定位到controller的位置。但是有些时候我们引入的其他依赖中可能也有controller,为了找到并方便的调试jar包中的controller,我们一般会进行全局…

golang中移除切片索引位置的元素

golang中移除切片索引位置的元素 方法 1:使用 append func PopSliceElementByIndex(slice []int, index int) (res []int) {res append(slice[:index], slice[index1:]...)return }优点: 简单易读: 使用 append 函数,代码简洁…

Kotlin 密封类和接口

文章目录 定义实例化对象when 分支判定 定义 密封类和接口使用sealed修饰。 密封类和接口与其直接子类只能位于同一包内(一般是同一文件夹中,也可以是不同文件夹,package声明为同样的包名): sealed class Route(val…

杂项——32舵机控制

180度舵机内部有一个基准电路,产生周期为20ms,高电平宽度为1.5ms的基准信号,这个位置其实是舵机转角的中间位置。通过比较信号线的PWM信号与基准信号,内部的电机控制板得出一个电压差值,将这个差值加到电机上控制舵机转…

头歌页面置换算法第4关:计算CLOCK算法缺页率

2 任务:CLOCK算法 2.1 任务描述 设计CLOCK页面置换算法模拟程序:从键盘输入访问串。计算CLOCK算法在不同内存页框数时的缺页数和缺页率。要求程序模拟驻留集变化过程,即能模拟页框装入与释放过程。 2.2任务要求 输入串长度作为总页框数目,补充程序完成CLOCK算法。 2.3算法思…