「nuxt2配置tailwindcss」nuxt2添加tailwindcss详细步骤!解决版本不对称各种报错~~复制黏贴搞定!

运行环境

node和npm使用版本

node v14.21.3 (npm v6.14.18)

1.插件下载

官方文档说明

npm install -D @nuxtjs/tailwindcss@3.4.3 tailwindcss@3.4.1 postcss@^8.4.33 autoprefixer@10.4.17

2.nuxt.config.js配置

module.exports = {// ...buildModules: ['@nuxtjs/tailwindcss'],// ...
}

3.tailwind.config.js

npx tailwindcss init

module.exports = {future: {// removeDeprecatedGapUtilities: true,// purgeLayersByDefault: true,},purge: ['./components/**/*.{vue,js}','./layouts/**/*.vue','./pages/**/*.vue',],theme: {extend: {},},variants: {},plugins: [],
}

4.全局引入css

创建全局css文件

/assets/css/xxx.css

// xxx.css
@tailwind base;
@tailwind components;
@tailwind utilities;
配置nuxt.config.js
module.exports = {// ...css: [// ...'~assets/css/xxx.css',],// ...
}

package.json插件版本

"dependencies": {"nuxt": "^2.14.7","vue": "^2.6.12",},
"devDependencies": {"@nuxtjs/tailwindcss": "^3.4.3","autoprefixer": "^10.4.17","node-sass": "^4.14.1","postcss": "^8.4.33","sass-loader": "^8.0.0","tailwindcss": "^3.4.1"
}

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

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

相关文章

spring(1):基于XML获取Bean对象以及各种依赖注入方式

1. 获取Bean XML文件&#xff1a;<bean id"helloworld" class"org.kkk.spring6.bean.HelloWorld"></bean>1.1 根据id获取 Test public void testHelloWorld(){//加载XML文件ApplicationContext context new ClassPathXmlApplicationContext…

微信小程序商城注册是个人还是公司的?

随着移动互联网的飞速发展&#xff0c;微信小程序已经成为了商家们开展电子商务的重要平台之一。微信小程序商城以其便捷的操作、庞大的用户基础和较低的成本投入&#xff0c;吸引了众多商家的关注。然而&#xff0c;对于想要进入这一领域的创业者来说&#xff0c;一个基础性的…

C# CefSharp 输入内容,点击按钮,并且滑动。

前言 帮别人敲了个Demo,抱试一试心态&#xff0c;居然成功了&#xff0c;可以用。给小伙伴们看看效果。 遇到问题 1&#xff0c;input输入value失败&#xff0c;里面要套了个事件&#xff0c;再变换输入value。后来用浏览器开发工具&#xff0c;研究js代码&#xff0c;太难了&a…

Authorization Failed You can close this page and return to the IDE

一.问题描述 注册JetBrains成功&#xff0c;并且通过了学生认证&#xff0c;但在activate pycharm时&#xff0c;却显示Authorization Failed You can close this page and return to the IDE如上图 二.原因&#xff1a; 可能是因为之前使用了破解版pycharm 三.解决方法&am…

GNSS技术与无人机协同:开启未来交通新篇章

随着科技的不断发展&#xff0c;全球导航卫星系统&#xff08;GNSS&#xff09;技术与无人机技术的协同应用成为未来交通系统的引人瞩目的新方向。创新微公司在这一领域的技术创新为实现GNSS技术与无人机的紧密协同提供了新的可能性。本文将深入探讨GNSS技术与无人机协同的前景…

软件工程测试3

1.【多选】关于领域类建模说法正确的是 A. 需求描述中的名词或名词短语都划分为领域概念类 B. 在类的聚合关系中&#xff0c;聚合体对象是整体&#xff0c;聚合元素对象是部分 C. 需求描述中的名词、数词、形容词等有可能是属性值 D. 在类的继承关系中&#xff0c;父类中的属性…

创新医疗服务:宠物在线问诊系统的搭建与应用

随着科技的不断进步&#xff0c;创新的医疗服务方式也日渐成为宠物主人关心爱宠健康的首选。本文将深入介绍如何搭建一套创新的宠物在线问诊系统&#xff0c;并展示其应用的技术代码。 1. 系统架构与技术选择 在开始搭建之前&#xff0c;我们需要设计系统的架构并选择合适的…

springboot初始项目每一层的含义

一.创建的时候主要勾选了以下 二.项目架构 三.有的项目下创建出来&#xff0c;存在更多不同的层级 src/main/java/com/example/demo/controller: 控制器层&#xff0c;包含处理 HTTP 请求和响应的控制器类。 src/main/java/com/example/demo/service: 服务层&#xff0c;包含业…

ardupilot开发 --- RTSP多媒体数据流(视频流) 篇

0. 一些概念 RTSP是 TCP/IP 协议体系中的一个应用层协议&#xff0c;该协议定义了一对多应用程序如何有效地通过 IP 网络传送多媒体数据。RTSP在体系结构上位于RTP和RTCP之上&#xff0c;它使用TCP或UDP完成数据传输。 在mission planner中查看(拉取)RTSP视频流

我每天如何使用 ChatGPT

我们都清楚互联网的运作方式——充斥着各种“爆款观点”&#xff0c;极端分裂的意见&#xff0c;恶搞和无知现象屡见不鲜。 最近&#xff0c;大家对于人工智能&#xff08;AI&#xff09;特别是大语言模型&#xff08;LLMs&#xff09;和生成式 AI&#xff08;GenAI&#xff0…

四、arcgispro二次开发运行程序修改的地方还是没有变踩坑

对于arcgispro二次开发学习是一件充满兴趣并且具有好奇心的一件事&#xff0c;但是当创建了一个工程第一次调试成功&#xff0c;并出来了自己期待很久的一个程序后&#xff0c;当第二次修改并运行&#xff0c;发现一直没有反应&#xff0c;很是头疼&#xff0c;查了很多资料也没…

日常记帐软件,你的财务守护者

在快节奏的现代生活中&#xff0c;理财的重要性日益凸显。如何让每一分钱都花在刀刃上&#xff0c;是许多人都渴望知道的答案。今天&#xff0c;我要为大家介绍一款简单实用的记账软件——晨曦记账本&#xff0c;相信它会是你财务之路上的得力助手。 所需工具&#xff1a; 一…

Windows下网络编程(win32API+VS2022)

一、开发环境 我这里介绍下我用的环境安装过程。 所有版本的VS都可以的。 我当前环境是在Windows下&#xff0c;IDE用的是地表最强IDE VS2022。 下载地址&#xff1a;https://visualstudio.microsoft.com/zh-hans/downloads/ 因为我这里只需要用到C和C语言编程&#xff0c;那…

【Java万花筒】编程之术:掌握Java字节码操控的精髓

字节码探索手册&#xff1a;Java操纵库全方位解析* 前言 在Java开发领域&#xff0c;深入了解字节码是提升程序性能和灵活性的关键。本文将带领读者深入探索虚拟机与Java字节码操纵库&#xff0c;揭开这个引人入胜的编程领域的神秘面纱。从ASM、Byte Buddy、Javassist到cglib…

C++ STL之queue的使用及模拟实现

文章目录 1. 介绍2. 队列的使用3. 队列的模拟实现 1. 介绍 英文解释&#xff1a; 也就是说&#xff1a; 队列是一种容器适配器&#xff0c;专门用于在FIFO上下文(先进先出)中操作&#xff0c;其中从容器一端插入元素&#xff0c;另一端提取元素。 队列作为容器适配器实现&…

推荐系统——基于用户的协同过滤算法

1.RelateDTO package com.example.entity;/*** 协同过滤算法*/ public class RelateDTO {/** 用户id */private Integer useId;/** 商品id */private Integer goodsId;/** 指数 */private Integer index;public RelateDTO(Integer useId, Integer goodsId, Integer index) {th…

seldom之数据驱动

seldom之数据驱动 如果自动化某个功能&#xff0c;测试数据不一样而操作步骤是一样的&#xff0c;那么就可以使用参数化来节省测试代码。 seldom是我在维护一个Web UI自动化测试框&#xff0c;这里跟大家分享seldom参数化的实现。 GitHub&#xff1a;GitHub - SeldomQA/seld…

数据结构OJ题——二叉树前序、中序遍历非递归实现(Java版)

二叉树前序、中序遍历非递归实现 前序非递归遍历实现中序非递归遍历实现 前序非递归遍历实现 题目&#xff1a; 二叉树前序遍历非递归实现 总体思路&#xff1a;用非递归的方式模拟递归遍历。 以下图为例&#xff1a; 图示详解&#xff1a; 代码实现&#xff1a; /*** Defi…

【软考中级】3天擦线过软考中级-软件设计师

前提&#xff1a;已有数据结构、操作系统、计算机网络、数据库基础 &#xff08;风险系数较高&#xff0c;请谨慎参考&#xff09; 贴一个成绩单hhhh 弯路&#xff1a;很早之前有看过一遍网上的软考课程&#xff0c;也记录了一些笔记&#xff0c;然而听完还是啥都记不住。 推…

day29打卡

11. 递增子序列 var findSubsequences function(nums) {let result []let path []function backtracing(startIndex) {if(path.length > 1) {result.push(path.slice())}let uset []for(let i startIndex; i < nums.length; i) {if((path.length > 0 &&…