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

tailwindcss学习01

news 2025/11/28 19:24:13

系列教程

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

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/29 10:54:34

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2025/11/21 7:10:04

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/11/1 12:32:15

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2025/11/22 7:04:45