VUE3+Vite使用TailwindCSS【若依前后端分离框架】

  1. 参考:https://tailwind.nodejs.cn/docs/guides/vite#vuehttps://blog.csdn.net/hjl_and_djj/article/details/144694485
  2. 依次运行命令: cnpm install -D tailwindcss@3.4.17 postcss autoprefixer
  3. npx tailwindcss init -p
  4. 修改配置文件tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}
  1. 根目录下修改生成的style.css或styles/index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 根据参考,设置vscode忽略未知的规则,消除@警告
  2. 测试<h1 class="text-3xl font-bold underline">Hello world!</h1>
  3. 如果不行,继续修改vite.config.js
import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';css: {postcss: {plugins: [tailwindcss,autoprefixer,{postcssPlugin: 'internal:charset-removal',AtRule: {charset: (atRule) => {if (atRule.name === 'charset') {atRule.remove();}}}}]}},

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

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

相关文章

FFmpeg入门:最简单的音频播放器

FFmpeg入门&#xff1a;最简单的音频播放器 欢迎大家来到FFmpeg入门的第二章&#xff0c;今天只做一个最简单的FFmpeg音频播放器&#xff1b;同样&#xff0c;话不多说&#xff0c;先上流程图 流程图 以上流程和视频播放器的解码过程基本上是一致的&#xff1b; 不同点在于 S…

在Ubuntu下,源码编译安装Python

在Ubuntu下&#xff0c;源码编译安装Python 知识点 知识点1&#xff1a;在 Linux 系统里&#xff0c;/usr 目录通常用于存放一些共享的、只读的程序和数据&#xff0c;是系统安装软件的一个重要位置。而 /usr/src 目录一般是用来存放系统源代码以及一些软件包的源代码的地方 …

《每天读一个JDK源码》之HashMap解读

&#x1f4cc;《每天读一个JDK源码》之HashMap解读 &#x1f517;源码定位&#xff1a;java.util.HashMap&#xff08;建议IDE对照阅读&#xff09; 今天我们来破解Java集合框架中最精妙的艺术品——HashMap&#xff01;它不仅是面试必考题&#xff08;出现率99%&#xff09;&…

【Java项目】基于SpringBoot的Java学习平台

【Java项目】基于SpringBoot的Java学习平台 技术简介&#xff1a;采用Java技术、SpringBoot框架、MySQL数据库等实现。系统基于B/S架构&#xff0c;前端通过浏览器与后端数据库进行信息交互&#xff0c;后端使用SpringBoot框架和MySQL数据库进行数据处理和存储&#xff0c;实现…

使用ChatGPT-Deep Reaserch两步给出文献综述!

文献综述是学术论文写作中不可或缺的一部分&#xff0c;它不仅是对已有研究的梳理和总结&#xff0c;更是为后续研究奠定理论基础的关键步骤。通过文献综述研究者能够全面了解当前研究领域的现状、主要观点和研究方法&#xff0c;从而找到自己研究的切入点和创新点。这一过程需…

java基础知识(理论篇)

一、java介绍 1.1Java语言 Java 是一种广泛使用的、通用的、面向对象的编程语言&#xff0c;Java 的设计目标是“一次编写&#xff0c;到处运行”&#xff0c;这也这意味着 Java 程序可以在任何支持 Java 的平台&#xff08;如 Windows、Linux、macOS 等&#xff09;上运行。 …

金融赋能绍兴纺织 民生银行助力外贸中小微企业“走出去”

在浙江绍兴&#xff0c;纺织业作为一张熠熠生辉的产业名片&#xff0c;承载着深厚的历史底蕴与蓬勃的发展活力。这里依傍长三角经济圈&#xff0c;交通网络纵横交错&#xff0c;将原材料产地与广阔市场紧密相连&#xff1b;产业集群高度成熟&#xff0c;上下游产业链完备&#…

综合实验处理表格

新建excel表格&#xff0c;输入信息&#xff0c;另存为csv文件。 利用notepad打开csv文件&#xff0c;可以观察格式 目标&#xff1a;通过编程处理文件&#xff0c;实现对数据的处理&#xff0c;成绩求和以及评价 对数据逐行处理&#xff0c;读一行&#xff0c;处理一行&#…

我和我的通义灵码

我和我的通义灵码 我和我的通义灵码个人版&企业版个人版登录个人版workspace应用场景terminal 企业版登录企业版#team docs 体验总结 我和我的通义灵码 说到通义灵码&#xff0c;作为程序员的我们是最有发言权的。从全国首个AI代码助手-通义灵码公测到现在&#xff0c;不知…

一文学会Volatile关键字

引言 在 Java 多线程实战中&#xff0c;volatile 是一个重要的关键字&#xff0c;用于修饰变量&#xff0c;经常在JUC源码中出现&#xff0c;本文详细解析一下这个关键字的奥秘 1. 基本概念 volatile 关键字的主要作用是保证变量的可见性以及在一定程度上禁止指令重排序。在…

Java测试框架Mockito快速入门

Mockito结合TestNG快速入门 什么是Mockito Mockito 是一个专门用于 Java 的强大测试框架&#xff0c;主要用来创建和管理模拟对象&#xff0c;辅助开发者进行单元测试&#xff0c;具有以下特点和功能&#xff1a; 创建模拟对象&#xff1a;能通过简洁的语法创建类或接口的模…

week 3 - More on Collections - Lecture 3

一、Motivation 1. Java支持哪种类型的一维数据结构&#xff1f; Java中用于在单一维度中存储数据的数据结构&#xff0c;如arrays or ArrayLists. 2. 如何在Java下创建一维数据结构&#xff1f;&#xff08;1-dimensional data structure&#xff09; 定义和初始化这些一…

Ubuntu 防火墙iptables和 ufw

文章目录 iptables 和 ufw 的区别Ubuntu 上使用 ufw 配置 iptables 和 ufw 的区别 iptables 和 ufw 是 Linux 系统中用于管理防火墙的工具&#xff0c;但它们的设计目标和使用方式有所不同。 iptables&#xff1a;功能强大&#xff0c;适合高级用户和复杂场景&#xff0c;但配…

(动态规划 最长连续递增子序列)leetcode 674

我上个文章提到了最长递增子序列这个题可以去看看 这个题目翻译人话就是找出最长的递增子串&#xff0c;用一层for循环就行&#xff0c;时间复杂度是O(n) 比起上个题&#xff0c;一个范围多条子序列&#xff08;路径&#xff09;这里一个范围只有一条递增路径&#xff0c;所以…

STM32CubeMx DRV8833驱动

一、DRV8833驱动原理 ​ STBY口接单片机的IO口&#xff0c;STBY置0电机全部停止&#xff0c;置1才能工作。STBY置1后通过AIN1、AIN2、BIN1、BIN2 来控制正反转。 AIN1AIN2电机状态00停止1speed反转speed1正转11停止 其中A端&#xff08;AIN1与AIN2&#xff09;只能控制AO1与…

JSON Schema 入门指南:如何定义和验证 JSON 数据结构

文章目录 一、引言二、什么是 JSON Schema&#xff1f;三、JSON Schema 的基本结构3.1 基本关键字3.2 对象属性3.3 数组元素3.4 字符串约束3.5 数值约束 四、示例&#xff1a;定义一个简单的 JSON Schema五、使用 JSON Schema 进行验证六、实战效果6.1 如何使用 七、总结 一、引…

前端Npm面试题及参考答案

目录 npm 是什么?它的主要作用是什么? npm 包管理工具与 Yarn 有何不同? npm 的 package.json 文件有哪些重要字段? 什么是 npm 依赖?如何在项目中安装、更新和移除依赖? npm 的 node_modules 目录是什么?它的作用是什么? 什么是 npm 脚本?如何在 package.json 中…

零样本思维链(Zero-shot CoT)

Large Language Models are Zero-Shot Reasoners (Kojima et al., 2022) 这篇文章研究了大型语言模型 (LLMs) 在推理任务上的能力&#xff0c;并提出了一种名为 Zero-shot-CoT 的新方法&#xff0c;该方法能够有效地引导 LLM 进行多步骤推理&#xff0c;并在各种推理任务上取得…

day01_Java基础

文章目录 day01_Java基础一、今日课程内容二、Java语言概述&#xff08;了解&#xff09;1、Java语言概述2、为什么要学习Java语言3、Java平台版本说明4、Java特点 三、Java环境搭建&#xff08;操作&#xff09;1、JDK和JRE的概述2、JDK的下载和安装3、IDEA的安装4、IDEA的启动…

设计模式 之 生产消费者模型 (C++)

文章目录 设计模式 之 生产消费者模型 &#xff08;C&#xff09;引言生产消费者模型的基本概念为什么需要生产消费者模型应用场景&#xff1a;C 实现生产消费者模型代码示例代码详细解释共享资源和同步机制生产者函数 producer()消费者函数 consumer()主函数 main() 注意事项总…