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

tailwindcss学习01

news 2026/4/27 13:39:51

系列教程

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 Video组件预览图片优化实践：告别黑屏，提升视频播放体验

引言&#xff1a;视频播放体验的第一印象在HarmonyOS应用开发中&#xff0c;Video组件作为多媒体播放的核心控件&#xff0c;其用户体验直接影响着应用的整体质量。一个常见的痛点问题是&#xff1a;视频在开始播放前显示为黑色屏幕&#xff0c;直到用户点击播放并再次暂停后&a…...

编程新知 2026/4/27 13:32:08

基于Transformer与PyTorch的选择题自动答题系统实践

1. 项目概述在自然语言处理领域&#xff0c;选择题&#xff08;Multiple Choice Questions, MCQs&#xff09;是一种广泛应用的评估形式&#xff0c;从教育考试到招聘筛选无处不在。传统方法通常依赖于规则系统或浅层机器学习模型&#xff0c;但这些方法往往难以捕捉题目和选项…...

编程新知 2026/4/27 13:13:49

如何在Windows系统上安装macOS风格鼠标指针：终极美化指南

如何在Windows系统上安装macOS风格鼠标指针&#xff1a;终极美化指南 【免费下载链接】macOS-cursors-for-Windows Tested in Windows 10 & 11, 4K (125%, 150%, 200%). With 2 versions, 2 types and 3 different sizes! 项目地址: https://gitcode.com/gh_mirrors/ma/m…...

编程新知 2026/4/27 12:14:43

深度评测：GEO源码部署如何赋能企业AI搜索战略？爱搜索GEO营销系统实战验证

在生成式AI重塑信息获取方式的今天&#xff0c;企业面临着一个全新的战场&#xff1a;如何让自己的信息被ChatGPT、DeepSeek、文心一言等主流大模型准确识别、深度理解并主动推荐&#xff1f;这已不再是传统SEO的简单延伸&#xff0c;而是一场关于内容语义、数据结构和生态适配…...

编程新知 2026/4/27 12:12:30

配置管理的版本控制与变更跟踪

配置管理的版本控制与变更跟踪&#xff1a;高效协作的基石 在软件开发与系统集成中&#xff0c;配置管理是确保项目有序推进的核心环节。版本控制与变更跟踪作为其两大支柱&#xff0c;不仅能够记录每一次代码或配置的修改历史&#xff0c;还能帮助团队快速定位问题、减少协作…...

编程新知 2026/4/27 11:30:48

Hope Agent深度解析：构建私有化、可学习的桌面AI助手

1. 项目概述&#xff1a;Hope Agent&#xff0c;一个真正为你所用的AI助手 如果你和我一样&#xff0c;对市面上的AI工具感到既兴奋又有点“水土不服”&#xff0c;那么Hope Agent的出现&#xff0c;可能会让你眼前一亮。兴奋在于&#xff0c;大模型的能力日新月异&#xff0c…...

编程新知 2026/4/27 10:58:37

yutu：基于多智能体架构的YouTube自动化AI代理实战指南

1. 项目概述&#xff1a;一个能让你“躺平”的YouTube频道AI管家 如果你和我一样&#xff0c;运营着一个YouTube频道&#xff0c;那你一定对下面这些事深有同感&#xff1a;每周雷打不动地要花几个小时上传视频、手动填写那些冗长的标题、描述和标签&#xff1b;得像个客服一样…...

编程新知 2026/4/27 10:37:24

5分钟搞定WPS-Zotero插件：告别手动文献管理的终极方案

5分钟搞定WPS-Zotero插件&#xff1a;告别手动文献管理的终极方案 【免费下载链接】WPS-Zotero An add-on for WPS Writer to integrate with Zotero. 项目地址: https://gitcode.com/gh_mirrors/wp/WPS-Zotero 还在为论文写作中的文献引用而烦恼吗&#xff1f;想象一下…...

编程新知 2026/4/27 10:18:52

Dripsy进阶技巧：如何实现动态主题切换和深色模式

Dripsy进阶技巧&#xff1a;如何实现动态主题切换和深色模式 【免费下载链接】dripsy &#x1f377; Responsive, unstyled UI primitives for React Native Web. 项目地址: https://gitcode.com/gh_mirrors/dr/dripsy Dripsy是一个为React Native和Web开发的响应式、无…...

编程新知 2026/4/27 10:16:52

【可靠性配置】华为双活模式M-LAG流量转发机制

组网如图所示，两台S6800交换机做M-LAG VLAN双活网关，M-LAG接口与第三方交换机对接， 一、正常场景下M-LAG的流量转发机制（双活模式） M-LAG建立成功后，M-LAG主备设备负载分担共同进行流量的转发。下面介绍在正常工作情况下M-LAG的流量转发机制。 1.1、单播流量转发 如图…...

编程新知 2026/4/27 9:08:10