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

tailwindcss学习01

news 2026/2/10 16:50:30

系列教程

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

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/31 13:18:31

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/10/25 5:53:05

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2026/2/4 16:02:36

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

编程新知 2025/10/6 15:50:41

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2026/2/6 5:51:39