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

tailwindcss学习01

news 2025/9/24 18:02:24

系列教程

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

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/9/21 5:09:42

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/9/23 22:09:04

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/9/23 3:36:03

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/9/22 13:28:42

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/7/9 18:30:54

英国云服务器上安装宝塔面板（BT Panel）

在英国云服务器上安装宝塔面板&#xff08;BT Panel&#xff09; 是完全可行的&#xff0c;尤其适合需要远程管理Linux服务器、快速部署网站、数据库、FTP、SSL证书等服务的用户。宝塔面板以其可视化操作界面和强大的功能广受国内用户欢迎&#xff0c;虽然官方主要面向中国大陆…...

编程新知 2025/9/21 17:09:34

轻量安全的密码管理工具Vaultwarden

一、Vaultwarden概述 Vaultwarden主要作用是提供一个自托管的密码管理器服务。它是Bitwarden密码管理器的第三方轻量版&#xff0c;由国外开发者在Bitwarden的基础上&#xff0c;采用Rust语言重写而成。 &#xff08;一&#xff09;Vaultwarden镜像的作用及特点 轻量级与高性…...

编程新知 2025/9/23 6:10:07

盲盒一番赏小程序：引领盲盒新潮流

在盲盒市场日益火爆的今天&#xff0c;如何才能在众多盲盒产品中脱颖而出&#xff1f;盲盒一番赏小程序给出了答案&#xff0c;它以创新的玩法和优质的服务&#xff0c;引领着盲盒新潮流。 一番赏小程序的最大特色在于其独特的赏品分级制度。赏品分为多个等级&#xff0c;从普…...

编程新知 2025/9/22 6:02:54