当前位置： 首页 > news >正文

tailwindcss学习01

news 2026/2/10 16:33:33

系列教程

01 入门
02 vue中接入

入门

# 注意使用cmd不要powershell
npm init -y
# 如果没有npx则安装
npm install -g npx
npm install -D tailwindcss@3.4.17 --registry http://registry.npm.taobao.org
npx tailwindcss init

在这里插入图片描述
修改tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend: {},},plugins: [],
}

新建src文件夹，该文件夹下新建input.css

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

执行监听

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

在这里插入图片描述
src下新建index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="./output.css" rel="stylesheet">
</head>
<body><h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>

在这里插入图片描述

参考

https://www.tailwindcss.cn/docs/installation

相关文章：

tailwindcss学习01

系列教程 01 入门 02 vue中接入 入门 # 注意使用cmd不要powershell npm init -y # 如果没有npx则安装 npm install -g npx npm install -D tailwindcss3.4.17 --registry http://registry.npm.taobao.org npx tailwindcss init修改tailwind.config.js /** type {import(tai…...

编程日记 2025/2/21 5:47:44

C语言复杂度分析

文章目录 一 算法效率评估第一，设计可靠的解法：第二，优化解的效率：二 迭代与递归迭代for 循环递归递归和迭代区别一 算法效率评估 第一，设计可靠的解法： 算法需要能够在规定的输入范围内，准确无误地求解问题，确保其结果的正确性和稳定性。这是算法设计的基本要求。 …...

编程日记 2025/2/21 5:45:40

DeepSeek服务器繁忙 多种方式继续优雅的使用它

前言 你的DeepSeek最近是不是总是提示”服务器繁忙,请稍后再试。”&#xff0c;尝试过了多次重新生成后&#xff0c;还是如此。之前DeepSeek官网连续发布2条公告称&#xff0c;DeepSeek线上服务受到大规模恶意攻击。该平台的对话框疑似遭遇了“分布式拒绝服务攻击”&#xff0…...

编程日记 2025/2/21 5:43:38

Bootstrap Blazor UI 中 ＜Table＞ 组件 ＜TableColumn＞ 使用备忘01：EF Core 外码处理

应用场景&#xff1a;将外码转换为对应的文本进行显示、编辑。 例如&#xff0c;有一个【用户】表&#xff0c;其中有一个【用户类型ID】字段&#xff1b;另有一个【用户类型】表&#xff0c;包含【ID】、【名称】等字段。现在要求在 <Table> 组件显示列表中&#xff0c…...

编程日记 2025/2/21 5:41:35

云原生数据抽象与弹性加速：Fluid开源系统的技术解析

在云计算、大数据和人工智能技术迅猛发展的背景下&#xff0c;云原生应用的数据处理和存储需求日益增长。南京大学顾荣教授及其团队开发的Fluid开源系统&#xff0c;旨在解决云原生环境中数据密集型应用面临的挑战&#xff0c;如计算存储分离、数据本地化、无状态服务与有状态计…...

编程日记 2025/2/21 5:39:33

【Python爬虫(29)】爬虫数据生命线：质量评估与监控全解

【Python爬虫】专栏简介&#xff1a;本专栏是 Python 爬虫领域的集大成之作&#xff0c;共 100 章节。从 Python 基础语法、爬虫入门知识讲起&#xff0c;深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑&#xff0c;覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2025/2/21 5:38:31

VSCode AI提效工具，通义灵码前端开发体验

安装 安装依旧很简单&#xff0c;vs code拓展插件中搜索就出来了&#xff0c;记住下边这个图标。 亮点 新接入了deepseek-v3\deepseek-r1模型&#xff0c;不仅支持智能问答&#xff0c;而且增加了AI程序员&#xff0c;可以直接按照完成编码任务&#xff0c;修改优化代码&am…...

编程日记 2025/2/21 5:36:29

在实时大数据处理中如何平衡延迟和吞吐量

在实时大数据处理中&#xff0c;平衡延迟和吞吐量是一个至关重要的挑战。以下是一些实用的策略和技巧&#xff0c;有助于在这两者之间找到最佳平衡点&#xff1a; 一、技术层面的平衡策略 并行处理&#xff1a; 通过同时处理多个任务来提高吞吐量。在实时大数据处理环境中&am…...

编程日记 2025/2/21 5:35:27

一款开源可独立部署的知识管理工具！！

今天给大家介绍一款开源的知识管理工具——云策文档。 介绍 该系统通过独立的知识库空间&#xff0c;结构化地组织在线协作文档&#xff0c;实现知识的积累与沉淀&#xff0c;促进知识的复用与流通。同时支持多人协作文档。 云策文档设计了明确的权限管理&#xff0c;方便文档…...

编程日记 2025/2/21 5:33:24

罗德与施瓦茨SMB100A，一款卓越的中档模拟射频/微波信号源

罗德与施瓦茨R&S SMB100A 微波信号发生器 型　　号&#xff1a;SMB100A 名　　称&#xff1a;微波信号发生器 品　　牌&#xff1a;罗德与施瓦茨(R&S) 分　　类&#xff1a;射频测试设备 > 射频信号源 > 矢量信号源 产品属性&#xff1a;主机 简　　述&…...

编程日记 2025/2/21 5:32:23

java毕业设计之医院门诊挂号系统（源码+文档）

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的医院门诊挂号系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 医院门诊挂号系统的主要使用者…...

编程日记 2025/2/21 5:29:18

【Scrapy】Scrapy教程7——存储数据

上一节我们对爬虫程序的默认回调函数parse做了改写，提取的数据可以在Scrapy的日志中打印出来了，光打印肯定是不行的，还需要把数据存储，数据可以存到文件，也可以存到数据库，我们一一来看。 存储数据到文件 首先我们看看如何将数据存储到文件，在讲[[【Scrapy】Scrapy教程…...

编程日记 2025/2/21 5:27:15

QILSTE H4-108TCG/5M高亮翠绿光LED灯珠 发光二极管LED

H4-108TCG/5M&#xff1a;高亮纯绿光LED的复杂特性与突发性挑战 在现代电子设备的复杂世界中&#xff0c;H4-108TCG/5M型号的高亮纯绿光LED以其独特的参数和复杂的特性脱颖而出。这款LED不仅在尺寸上做到了极致精巧&#xff0c;还在光电参数、可靠性测试和实际应用中展现出令人…...

编程日记 2025/2/21 5:25:13

Python中numpy.loadtxt()函数的用法

numpy模块的loadtxt()函数用于快速读取简单格式文件的内容&#xff0c;常用于csv文件的读取。 1 loadtxt()函数的格式 loadtxt()函数的格式如图1所示&#xff0c;该函数的返回值是读取到的数据&#xff0c;其类型为numpy.ndarray。 图1 loadtxt()函数的格式 其中&#xff0c…...

编程日记 2025/2/21 5:24:11

Windows系统安装GPU驱动/CUDA/cuDNN

1、驱动安装步骤 1.1下载驱动 通过浏览器访问Download The Official NVIDIA Drivers | NVIDIA 1.2安装驱动 1.3检查 打开【设备管理器】—【显示适配器】 2、CUDA安装步骤 2.1下载CUDA 官网链接CUDA Toolkit 12.4 Update 1 Downloads | NVIDIA 开发者 2.2安装CUDA 3、cuDN…...

编程日记 2025/2/21 5:23:09

nessus kali 卸载

安装请看这篇Nessus漏扫工具的安装与使用&#xff08;Windows与Linux&#xff09;_nessus license key-CSDN博客 Download Tenable Nessus | Tenable 离线安装 Tenable Nessus &#xff08;Tenable Nessus 10.8&#xff09; systemctl stop nessusd Remove Nessus Run the …...

编程日记 2025/2/21 5:22:08

使用Geotools读取DEM地形数据实战-以湖南省30米数据为例

目录 前言 一、DEM地形数据介绍 1、DEM数据简介 2、DEM应用领域 3、QGIS中读取DEM数据 二、GeoTools解析地形 1、Maven中依赖引用 2、获取数据基本信息 三、总结 前言 随着全球数字化进程的加速&#xff0c;各类地理空间数据呈爆炸式增长&#xff0c;DEM 数据作为其中的…...

编程日记 2025/2/21 5:19:04

基于WebGIS技术的校园地图导航系统架构与核心功能设计

本文专为IT技术人员、地理信息系统&#xff08;GIS&#xff09;开发者、智慧校园解决方案架构师及相关领域的专业人士撰写。本文提出了一套基于WebGIS技术的校园地图导航系统构建与优化方案&#xff0c;旨在为用户提供高效、智能、个性化的导航体验。如需获取校园地图导航系统技…...

编程日记 2025/2/21 5:18:02

《养生方法》（一）

一、基础生活习惯 ‌饮食管理‌ ‌均衡营养‌&#xff1a;每日摄入多彩蔬果&#xff08;如胡萝卜、西兰花、柑橘类&#xff09;补充维生素C/E及膳食纤维&#xff1b;搭配鱼类、豆制品等优质蛋白质&#xff0c;保障免疫系统正常运作‌ ‌清淡规律‌&#xff1a;减少高油盐食物…...

编程日记 2025/2/21 5:17:01

Python常见面试题的详解9

1. 如何找出整数数组中第二大的数 要点 定义一个函数用于在整数数组里找出第二大的数。 若数组元素少于 2 个&#xff0c;则返回 None。 借助两个变量 first 和 second 来跟踪最大数和第二大数。 可以添加异常处理&#xff0c;以应对输入非整数数组的情况。 若数组包含重复…...

编程日记 2025/2/21 5:14:57

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2026/1/23 7:56:54

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2026/2/10 0:52:03

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2026/1/26 17:26:03

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2026/2/4 4:39:19

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/2/6 12:27:51

从实验室到产业：IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

编程新知 2025/12/8 19:05:36

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...

编程新知 2026/2/8 2:10:10