「nuxt2配置tailwindcss」nuxt2添加tailwindcss详细步骤!解决版本不对称各种报错~~复制黏贴搞定!_@nuxtjs/tailwindcss-程序员宅基地

技术标签: nuxt  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/global.css

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
配置nuxt.config.js
module.exports = {
    
	// ...
	css: [
		// ...
        '~assets/css/global.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"
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40230735/article/details/135771839

智能推荐

如何遍历DOM:HTML节点遍历技巧-程序员宅基地

文章浏览阅读734次。介绍本系列中的前一个教程如何访问DOM中的元素 ,介绍了如何使用document对象的内置方法通过ID,类,标记名称和查询选择器来访问HTML元素。 我们知道,DOM被构造为一个以document节点为根节点和每个其他节点(包括元素,注释和文本节点)作为各个分支的节点树 。通常情况下,您将需要在DOM中移动,而不事先指定每个元素。 学习如何浏览DOM树并从分支转移到分支对于理解如何使用JavaSc..._遍历body所有子节点dom

python 子函数调用父函数的变量_python中子类调用父类函数的方法示例-程序员宅基地

文章浏览阅读1.7k次。前言本文主要给大家介绍了关于python子类调用父类函数的相关内容,Python中子类中的__init__()函数会覆盖父类的函数,一些情况往往需要在子类里调用父类函数。下面话不多说了,来一起看看详细的介绍:如下例程里,???处是需要调用父类函数的地方,接下来结合例程具体介绍。# -*- coding:utf-8 -*-class Student:def __init__(self,name):s..._python函数中的变量可以在子函数中访问吗

动画Animation_必须为“system.windows.media.animation.doubleanimation-程序员宅基地

文章浏览阅读543次。Animation概述System.Windows.Media.Animation 命名空间提供一些类型,这些类型支持属性动画功能,包括时间线、演示图板和关键帧。.17个“类型名+Animation”类,这些类使用插值。 22个“类型名+AnimationUsingKeyFrames”类,这些类使用关键帧动画。 3个“类型名+AnimationUsingPath”类,这些类使用基于路径的动画。简单动画DoubleAnimation在指定的Duration上使用线性..._必须为“system.windows.media.animation.doubleanimationusingkeyframes”指定 t

文献阅读:RoFormer: Enhanced Transformer with Rotary Position Embedding-程序员宅基地

文章浏览阅读3k次,点赞6次,收藏19次。文献阅读:RoFormer: Enhanced Transformer with Rotary Position Embedding1. 工作简介2. 常见位置编码方式1. 绝对位置编码1. Bert2. Attention Is All You Need2. 相对位置编码1. 经典相对位置编码2. XLNet3. T54. DeBerta3. RoPE方法介绍4. 实验效果考察1. 翻译任务上的表现2. 预训练任务上的表现3. GLUE下游Finet.._enhanced transformer with rotary position embedding

电赛 | 坡道行驶电动小车(省电赛一等奖作品)_爬坡小车电赛设计方案-程序员宅基地

文章浏览阅读1.1w次,点赞20次,收藏154次。本文为读者投稿,分享的是一个四川省电子设计竞赛一等奖作品。竞赛题目 今年的四川省电子设计竞赛共有四道题目,基于我们对做车比较了解,所以选择了c题————坡道行驶电动小车,该题目要求如下:..._爬坡小车电赛设计方案

Embarcadero Dev-C++怎么解决中文不显示问题-程序员宅基地

文章浏览阅读3.7k次。在 Dev-C++ 中输入中文有两种方法:使用输入法。你可以在 Dev-C++ 的编辑器窗口中使用中文输入法,这是最常见的方法。在代码中使用转义字符。你可以使用转义字符来在代码中输入中文字符。例如,如果你想在代码中输入中文字符“你”,你可以使用 \u4f60 这样的转义字符。如果你在编辑器中输入了中文,但是显示为乱码,这可能是因为编码问题造成的。你可以尝试在 Dev-C++ 的“编辑..._dev软件输入汉字不显示

随便推点

烂笔头笔记:关于frontend-maven-plugin插件无法下载nodejs和npm的问题_windows环境下无法从github下载frontend-maven-plugin:1.12.0-程序员宅基地

文章浏览阅读1.4w次,点赞6次,收藏7次。目录简介解决方法参考资料简介frontend-maven-plugin是一个将maven与nodejs结合的插件,旨在maven生命周期中帮你下载并且本地(相对于项目来说)安装一份node和npm,并且执行npm install命令,并且还能执行其他的组合命令例如:Bower, Grunt, Gulp, Jspm, Karma, 或者 Webpack. 支持Windows, OS X 和Lin..._windows环境下无法从github下载frontend-maven-plugin:1.12.0

江苏科技大学计算机科学与技术,江苏科技大学计算机科学与技术专业2016年在江苏理科高考录取最低分数线...-程序员宅基地

文章浏览阅读117次。类似问题答案天津科技大学计算机类(计算机科学与技术(信息处理))专业2016年在山西理科高考录...学校 地 区 专业 年份 批次 类型 分数 天津科技大学 山西 计算机类(计算机科学与技术(信息处理)) 2016 二批 理科 475 学校 地 区 专业 年份 批次 类型 分数 天津科技大学 山西 计算机类(计算机科学与技术(信息处理)) 2016 二批 理科 475河南科技大学计算机科学与技术专..._江苏科技大学2016计算机本科录取线

【百度大脑新品体验】驾驶行为分析_为什么选用百度智能云驾驶行为分析接口-程序员宅基地

文章浏览阅读4k次,点赞2次,收藏6次。【百度大脑新品体验】驾驶行为分析作者:才能我浪费991.功能描述:针对车载场景,识别驾驶员使用手机、抽烟、不系安全带、双手离开方向盘等动作姿态,分析预警危险驾驶行为,提升行车安全性2.平台接入具体接入方式比较简单,可以参考我的另一个帖子,这里就不重复了:http://ai.baidu.com/forum/topic/show/9433273.调用攻略(Python3)及评测3.1首..._为什么选用百度智能云驾驶行为分析接口

深度学习模型Intel与ARM部署性能分析,Intel和ARM CPU上CNN计算速度差距分析。_arm中数据搬运速度太慢-程序员宅基地

文章浏览阅读8.5k次,点赞23次,收藏63次。我们的一个业务是在Intel CPU的电脑上,进行深度学习模型算法的开发。模型有用到OpenCV,Pytorch,还有QT界面,大多数使用的是图像处理和CNN特征提取和分类的功能,处理的是摄像头输入视频,图片这两类数据。考虑到要求实时处理,我们设计的各个功能模块,能够20fps运行和显示,以及在minutes时间内,输出后处理分析的结果,就能达到预定效果。随后采用docker,部署整个环境到ARM CPU的服务器上。_arm中数据搬运速度太慢

Xilinx之FPGA器件系列简介_ultrascale和7系列区别-程序员宅基地

文章浏览阅读3.5k次,点赞7次,收藏39次。赛灵思xilinx是FPGA领域的领头企业,去年已被ADM收购,在产品市场规模上能与之匹敌的只有Altera,Alter也是在2015就被因特尔收购。赛灵思的产品众多,如果是初次接触可能对各种英文名称及简称感到困惑,对于使用vivado进行工程设计时无法选择符合自己需求的器件,本文将其分类进行概述。同时,为保证准确性,内容以官网信息为主。_ultrascale和7系列区别

获取每个部门中当前员工薪水最高的相关信息,mysql的group by一个我踩过的坑_求各个部门薪资最高多少,如果为空显示没有薪资-程序员宅基地

文章浏览阅读274次。获取每个部门中当前员工薪水最高的相关信息,mysql的group by一个我踩过的坑描述有一个员工表dept_emp简况如下:有一个薪水表salaries简况如下:获取每个部门中当前员工薪水最高的相关信息,给出dept_no, emp_no以及其对应的salary,按照部门编号dept_no升序排列,以上例子输出如下:这篇在牛客上看到的sql题目,瞅了一眼想就是求部门里面最大薪水而已,于是写下:SELECT dept_no,dp.emp_no,max(salary) maxSalaryf_求各个部门薪资最高多少,如果为空显示没有薪资