nuxtjs3 使用tailwindcss做自适应
步骤 1: 安装 Tailwind CSS
npm install tailwindcss postcss autoprefixer @nuxtjs/tailwindcss
步骤 2: 配置 Tailwind CSS
这将生成一个 tailwind.config.js 文件。
npx tailwindcss init
步骤 3: 配置 nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: '2024-04-03',devtools: { enabled: true },// 配置网站头部信息,包括 logo 和 faviconapp: {head: {link: [{ rel: "icon", type: "image/x-icon", href: "/logo.ico" }],}},devServer: {host: '0.0.0.0',port: 3000},css: ['~/assets/css/tailwind.css','~/assets/css/style.css'],site: { //https://nuxtseo.com/url: 'http://localhost:3000',name: 'name',description: '科技、创新、服务、物联网、iot、智能物联平台', // The description of your site, used in the meta tags.},// Vite 配置vite: {css: {postcss: {plugins: [require('tailwindcss'),require('autoprefixer'),],},},},modules: ['@nuxtjs/seo','@nuxtjs/tailwindcss']
})
步骤 4: 创建 Tailwind CSS 文件
在 assets/css 目录下创建 tailwind.css 文件,并添加 Tailwind 的基础指令:
/* assets/css/tailwind.css *//* Import Tailwind's base styles */
@import 'tailwindcss/base';/* Import Tailwind's component styles */
@import 'tailwindcss/components';/* Import Tailwind's utility styles */
@import 'tailwindcss/utilities';/* Add any custom global styles here */
步骤 5: 配置 Tailwind CSS
在 tailwind.config.js 文件中,你可以配置 Tailwind 的响应式断点和自定义主题。例如:
// tailwind.config.js
module.exports = {content: ["./pages/**/*.{vue,js,ts,jsx,tsx}","./components/**/*.{vue,js,ts,jsx,tsx}","./layouts/**/*.{vue,js,ts,jsx,tsx}","./plugins/**/*.{js,ts}","./nuxt.config.{js,ts}",],theme: {extend: {colors: {primary: '#3490dc',secondary: '#ffed4a',},fontFamily: {sans: ['Helvetica', 'Arial', 'sans-serif'],},// Add custom breakpoints if neededscreens: {'sm': '640px','md': '768px','lg': '1024px','xl': '1280px','2xl': '1536px',},},},plugins: [],
}
步骤 6: 使用 Tailwind CSS 类
<template><div class="container mx-auto p-4"><header class="bg-primary text-white p-4 text-center"><h1 class="text-2xl md:text-4xl">Welcome to My Website</h1></header><main class="my-8"><section class="bg-gray-100 p-4 rounded-lg shadow-md"><h2 class="text-xl">Responsive Section</h2><p class="text-base md:text-lg">This is a responsive section that adjusts based on screen size.</p></section></main><footer class="bg-secondary text-center p-4"><p class="text-sm">Footer content goes here</p></footer></div>
</template><script setup>
// Your script logic here
</script><style scoped>
/* Add any scoped styles here */
</style>
相关文章:
nuxtjs3 使用tailwindcss做自适应
步骤 1: 安装 Tailwind CSS npm install tailwindcss postcss autoprefixer nuxtjs/tailwindcss步骤 2: 配置 Tailwind CSS 这将生成一个 tailwind.config.js 文件。 npx tailwindcss init步骤 3: 配置 nuxt.config.ts // https://nuxt.com/docs/api/configuration/nuxt-con…...
数据资产目录构建方法与应用
一、引言随着大数据、云计算、人工智能等技术的飞速发展,数据驱动已经成为企业发展的新引擎。数据资产目录作为数据管理的核心工具,不仅能够帮助企业更好地掌握自身数据资源的状况,还能为数据资产的全生命周期管理提供有力支撑。因此…...
【Python爬虫实战】从文件到数据库:全面掌握Python爬虫数据存储技巧
🌈个人主页:https://blog.csdn.net/2401_86688088?typeblog 🔥 系列专栏:https://blog.csdn.net/2401_86688088/category_12797772.html 目录 前言 一、文本文件数据存储的基础 二、如何将爬取的数据存储为.txt文件 三、如何…...
断其一指,无惧!ProFusion3D: 相机或者激光失效仍高效的多传感器融合3D目标检测算法
Abstract 多传感器融合在自动驾驶中的3D目标检测中至关重要,摄像头和激光雷达是最常用的传感器。然而,现有方法通常通过将两种模态的特征投影到鸟瞰视角(BEV)或透视视角(PV)来进行单视角的传感器融合&…...
CCS字体、字号更改+CCS下载官方链接
Step1、 按照图示箭头操作 step2 Step3 点击确定,点击Apply(应用),点击Apply and close(应用和关闭) 4、历代版本下载链接 CCS下载:官方链接https://www.ti.com/tool/CCSTUDIO The last but not least 如果成功的解决了你的问题&#x…...
YOLO11改进|注意力机制篇|引入SEAM注意力机制
目录 一、【SEAM】注意力机制1.1【SEAM】注意力介绍1.2【SEAM】核心代码二、添加【SEAM】注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4三、yaml文件与运行3.1yaml文件3.2运行成功截图一、【SEAM】注意力机制 1.1【SEAM】注意力介绍 下图是【SEAM】的结构图,让我们简单分析一下…...
简历修订与求职经历 - Chap04
节后第一周有点山中无甲子的状况。Oct08,节后第一天几乎全天处于心流状态。上午下午很快时间就结束了。 周五,按照既有的面试频次,感觉可以做点别的。然后就联系了附近的驾校,打算把摩托车驾驶证拿了。然后几乎到了驾校ÿ…...
鸿蒙开发案例:推箱子
推箱子游戏(Sokoban)的实现。游戏由多个单元格组成,每个单元格可以是透明的、墙或可移动的区域。游戏使用Cell类定义单元格的状态,如类型(透明、墙、可移动区域)、圆角大小及坐标偏移。而MyPosition类则用于…...
mysql--表的约束
目录 理解表的约束和操作 如何理解? 1、空属性null 2、默认值default 3、列描述comment 4、自动填充zorefill 5、主键primary key (1)创建表时指定可以 (2)创建表后指定key (3)删除主…...
Ubuntu 上安装 docker 并配置 Docker Compose 详细步骤
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storm…...
MySQL去除空白字符(如非标准空格、制表符等)
在 MySQL 中,需要去除 site_name 字段的空格,可以使用 TRIM() 函数。这个函数可以去掉字符串开头和结尾的空格。以下是一个示例查询,演示如何选择去除空格后的 site_name: SELECT TRIM(site_name) AS site_name FROM site_info;如…...
2063:【例1.4】牛吃牧草
【题目描述】 有一个牧场,牧场上的牧草每天都在匀速生长,这片牧场可供15头牛吃20天,或可供20头牛吃10天,那么,这片牧场每天新生的草量可供几头牛吃1天? 【输入】 (无) 【输出】 如题…...
QT开发:深入掌握 QtGui 和 QtWidgets 布局管理:QVBoxLayout、QHBoxLayout 和 QGridLayout 的高级应用
目录 引言 1. QVBoxLayout:垂直布局管理器 基本功能 创建 QVBoxLayout 添加控件 添加控件和设置对齐方式 设置对齐方式 示例代码与详解 2. QHBoxLayout:水平布局管理器 基本功能 创建 QHBoxLayout 添加控件 添加控件和设置对齐方式 设置对齐…...
Bootstrapping、Bagging 和 Boosting
bagging方法如下: bagging和boosting比较...
板块龙头公司
高通 高通(Qualcomm)是一家总部位于美国加利福尼亚州的全球领先半导体和电信设备公司。成立于1985年,高通专注于无线通信技术的研发和创新。 移动处理器: 高通开发的骁龙(Snapdragon)系列芯片广泛用于智能手机和平板电…...
Java项目-基于Springboot的招生管理系统项目(源码+说明).zip
作者:计算机学长阿伟 开发技术:SpringBoot、SSM、Vue、MySQL、ElementUI等,“文末源码”。 开发运行环境 开发语言:Java数据库:MySQL技术:SpringBoot、Vue、Mybaits Plus、ELementUI工具:IDEA/…...
使用 MongoDB 构建 AI:利用实时客户数据优化产品生命周期
在《使用 MongoDB 构建 AI》系列博文中,我们看到越来越多的企业正在利用 AI 技术优化产品研发和用户支持流程。例如,我们介绍了以下案例: Ventecon 的 AI 助手帮助产品经理生成和优化新产品规范 Cognigy 的对话式 AI 帮助企业使用任意语言&a…...
【React】React18核心源码解读
前言 本文使用 React18.2.0 的源码,如果想回退到某一版本执行git checkout tags/v18.2.0即可。如果打开源码发现js文件报ts类型错误请看本人另一篇文章:VsCode查看React源码全是类型报错如何解决。 阅读源码的过程: 下载源码 观察 package…...
部署私有仓库以及docker web ui应用
官方地址:https://hub.docker.com/_/registry/tags 一、拉取registry私有仓库镜像 docker pull registry:latest 二、运⾏容器 docker run -itd -v /home/dockerdata/registry:/var/lib/registry --name "pri_registry1" --restartalways -p 5000:5000 …...
DAY57WEB 攻防-SSRF 服务端请求Gopher 伪协议无回显利用黑白盒挖掘业务功能点
知识点: 1、SSRF-原理-外部资源加载 2、SSRF-利用-伪协议&无回显 3、SSRF-挖掘-业务功能&URL参数 SSRF-原理&挖掘&利用&修复 漏洞原理:SSRF(Server-Side Request Forgery:服务器端请求伪造) ,一种由攻击者构造形成由服务…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
安卓基础(aar)
重新设置java21的环境,临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的: MyApp/ ├── app/ …...
九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
怎么让Comfyui导出的图像不包含工作流信息,
为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐) 在 save_images 方法中,删除或注释掉所有与 metadata …...
