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

Tailwind CSS - Tailwind CSS 引入（安装、初始化、配置、引入、构建、使用 Tailwind CSS）

news 来源：原创 2025/5/21 5:18:02

一、Tailwind CSS 概述

Tailwind CSS 是一个功能优先的 CSS 框架，它提供了大量的实用类（utility classes），允许开发者通过组合这些类来快速构建用户界面
Tailwind CSS 与传统的 CSS 框架不同（例如，Bootstrap），Tailwind 不提供预定义的组件，而是通过细粒度的类来控制样式，从而实现高度定制化的设计

二、Tailwind CSS 体验案例

1、安装 Tailwind CSS

执行如下指令，安装 Tailwind CSS

npm install -D tailwindcss

2、初始化 Tailwind CSS

执行如下指令，初始化 Tailwind CSS

npx tailwindcss init

初始化完成后，会生成 tailwind.config.js 配置文件

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

3、配置 Tailwind CSS

在 tailwind.config.js 配置文件中，自定义 Tailwind 的默认配置

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

4、引入 Tailwind CSS

在 CSS 文件 src/input.css 中引入 Tailwind 的基础样式、组件和实用类

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

5、构建 Tailwind CSS

执行如下指令，构建 Tailwind CSS，由 src/input.css 文件构建得到 src/output.css 文件

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

6、使用 Tailwind CSS

再 HTML 文件 src/index.html 中使用 src/output.css

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

三、Tailwind CSS 体验案例解读

1、`tailwind.config.js` 配置文件解读

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

（1）content

content 是一个数组，用于指定 Tailwind CSS 应该扫描哪些文件以自动检测并包含哪些 CSS 类
这基于 purgecss 的功能，用于移除未使用的 CSS，从而减小最终 CSS 文件的大小
在这里配置为 ["./src/**/*.{html,js}"]，这是一个 glob 模式，它匹配 src 目录下的所有 .html 和 .js 文件，其中 ** 表示匹配任意深度的子目录

（2）theme

theme 对象用于自定义 Tailwind CSS 的主题
可以在这里添加、修改、删除 Tailwind CSS 的默认主题变量，例如，颜色、间距、字体大小、边框半径等
extend 属性用于扩展 Tailwind CSS 的默认主题，而不是完全覆盖它

（3）plugins

plugins 数组用于添加 Tailwind CSS 插件，Tailwind CSS 插件用于扩展 Tailwind CSS 的功能

2、构建 Tailwind CSS 解读

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

npx tailwindcss：执行 Tailwind CSS 的 CLI 命令
-i ./src/input.css：-i 用于指定 Tailwind CSS 应该读取的源文件路径，这里 Tailwind CSS 将读取 src/input.css 文件中的样式信息，并根据 tailwind.config.js 文件中的配置进行处理
-o ./src/output.css：-o 用于指定 Tailwind CSS 处理后的文件应该保存到的路径
--watch：告诉 Tailwind CSS 的以监视模式运行，在监视模式下，Tailwind CSS 将持续监视输入文件及其依赖项的变化（例如，tailwind.config.js 配置文件、任何通过 @tailwind 指令引入的文件），一旦检测到变化，它将自动重新编译输出文件

Tailwind CSS - Tailwind CSS 引入（安装、初始化、配置、引入、构建、使用 Tailwind CSS）

一、Tailwind CSS 概述 Tailwind CSS 是一个功能优先的 CSS 框架，它提供了大量的实用类（utility classes），允许开发者通过组合这些类来快速构建用户界面 Tailwind CSS 与传统的 CSS 框架不同（例如，Bootstr…...

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

Python-基于PyQt5,pdf2docx,pathlib的PDF转Word工具

前言：日常生活中，我们常常会跟WPS Office打交道。作表格，写报告，写PPT......可以说，我们的生活已经离不开WPS Office了。与此同时，我们在这个过程中也会遇到各种各样的技术阻碍，例如部分软件的PDF转Word需要收取额外费用等。那么，可不可以自己开发一个小工具来实现PDF转…...

编程日记 2025/5/15 14:07:16

FreeRTOS学习 --- 中断管理

什么是中断？ 让CPU打断正常运行的程序，转而去处理紧急的事件（程序），就叫中断中断执行机制，可简单概括为三步： 1，中断请求外设产生中断请求（GPIO外部中断、定时器中断…...

编程日记 2025/5/21 4:57:53

【小鱼闪闪】单片机开发工具——米思齐软件下载安装（图文）

浏览器打开网址 mixly.org, 在软件平台选择mixly离线版。最新版本为3.0，会支持audinio， ESP32、ESP8266 ， 可以选择下载安装器或者完整版。这里选择下载安装器，下载后运行“一键更新.bat”，即可自动下载最新版本的M…...

编程日记 2025/5/16 23:08:31

HarmonyOS：创建应用静态快捷方式

一、前言静态快捷方式是一种在系统中创建的可以快速访问应用程序或特定功能的链接。它通常可以在长按应用图标，以图标和相应的文字出现在应用图标的上方，用户可以迅速启动对应应用程序的组件。使用快捷方式，可以提高效率，节省了查…...

编程日记 2025/5/21 4:45:36

企业微信远程一直显示正在加载

企业微信远程一直显示正在加载 1.问题描述2.问题解决系统：Win10 1.问题描述某天使用企业微信给同事进行远程协助的时候，发现一直卡在正在加载的页面，如下图所示 2.问题解决经过一番查找资料后，我发现可能是2个地方出了问题…...

编程日记 2025/5/18 21:42:55

FireFox | Google Chrome | Microsoft Edge 禁用更新 final版

之前的方式要么失效，要么对设备有要求，这次梳理一下对设备、环境几乎没有要求的通用方式，universal & final 版。 1.Firefox 方式 FireFox火狐浏览器企业策略禁止更新_火狐浏览器禁止更新-CSDN博客这应该是目前最好用的方式。火狐也…...

编程日记 2025/5/18 8:26:46

【C++】类和对象（5）

目录一、构造函数补充1、初始化列表二、类型转换三、static成员四、友元1、友元函数2、友元类五、内部类六、匿名对象一、构造函数补充对于之前讲解的构造函数，还有一些更深层次的内容要进行补充，接下来进行补充内容的讲解。 1、初始化列表在我…...

编程日记 2025/5/20 6:54:00

芸众商城小程序会员页面部分图标不显示问题解决办法

我遇到的问题如下图所示，会员中心这里的图标在小程序端显示异常。但是在网页端又是能够正常显示的。小程序端截图： 网页端截图： 我的解决方法检查使用的小程序版本，比如这里使用的是1.2.238版本的小程序，最后…...

编程日记 2025/5/15 18:13:02

Spring Web MVC基础第一篇

目录 1.什么是Spring Web MVC？ 2.创建Spring Web MVC项目 3.注解使用 3.1RequestMapping（路由映射） 3.2一般参数传递 3.3RequestParam（参数重命名） 3.4RequestBody（传递JSON数据） 3.5Pa…...

编程日记 2025/5/16 4:36:41

Privacy Eraser，电脑隐私的终极清除者

Privacy Eraser 是一款专为保护用户隐私而设计的全能型软件，它不仅能够深度清理计算机中的各类隐私数据，还提供了多种系统优化工具，帮助用户提升设备的整体性能。通过这款软件，用户可以轻松清除浏览器历史记录、缓存文件、Cookie、…...

编程日记 2025/5/21 4:43:51

编程题-三数之和（中等）

题目： 给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意：答案中不可以包含重复的三…...

编程日记 2025/5/20 13:54:48

mysql中in和exists的区别？

大家好，我是锋哥。今天分享关于【mysql中in和exists的区别？】面试题。希望对大家有帮助； mysql中in和exists的区别？ 在 MySQL 中，IN 和 EXISTS 都是用于子查询的操作符，但它们在执行原理和适用场景上有所不…...

编程日记 2025/5/21 4:56:11

ThinkPHP 8 操作JSON数据

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客《2025新书 ThinkPHP 8高效构建Web应用编程与应用开发丛书夏磊清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要书评试读】- 京东图书使用VS Code开发ThinkPHP项目-CSDN博客编程与应用开…...

编程日记 2025/5/17 20:15:44

深入剖析 Docker 的镜像分层存储机制

目录一、基本原理镜像构成 UnionFS 二、工作方式镜像构建时容器启动时三、优势共享与复用高效存储和传输快速镜像构建可追溯性和可维护性四、相关命令查看镜像分层基于已有镜像创建新镜像 Docker 凭借其卓越的性能和极高的灵活性，已然成为众多开发者…...

编程日记 2025/5/19 21:20:03

本地部署DeepSeek

1、打开ollama,点击“Download” Ollamahttps://ollama.com/ 2、下载完成后，安装ollama.exe 3、安装完成后，按"windowsR",输入"cmd” 4、输入“ollama -v”，查看版本，表示安装成功 5、返回ollama网页&#xff0c…...

编程日记 2025/5/20 6:43:55

10.5 LangChain Model I/O 深度解析：如何用标准化接口打通大模型开发的“任督二脉”？

LangChain Model I/O 深度解析：如何用标准化接口打通大模型开发的“任督二脉”？关键词： LangChain Model I/O、大模型抽象、LLM标准化调用、多模型支持、流式响应一、为什么需要标准化的大模型抽象？ 1. 大模型开发的现实困境厂商锁定风险：代码深度耦合特定API（如Op…...

编程日记 2025/5/21 4:46:56

使用Pygame制作“俄罗斯方块”游戏

1. 前言俄罗斯方块（Tetris） 是一款由方块下落、行消除等核心规则构成的经典益智游戏： 每次从屏幕顶部出现一个随机的方块（由若干小方格组成），玩家可以左右移动或旋转该方块，让它合适地堆叠在…...

编程日记 2025/5/17 13:38:02

OSCP：常见文件传输方法

在渗透测试过程中，文件传输是一个关键环节，涉及不同的协议和工具，本文整理了 Linux 和 Windows 系统下常见的文件传输方法，并提供相应的命令示例。通用文件传输方式 Base64 编码传输 Base64 可用于跨平台传输文件，…...

编程日记 2025/5/19 3:02:01

基于遗传优化GRNN和Hog特征提取的交通标志识别算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 HOG 4.2 GRNN（General Regression Neural Network）模型原理 4.3 遗传算法（GA）优化GRNN平滑因子 5.算法完整程序工程 1.算法运行效果图预…...

编程日记 2025/5/20 22:12:42

Redis代金卷(优惠卷)秒杀案例-单应用版

优惠卷表:优惠卷基本信息,优惠金额,使用规则包含普通优惠卷和特价优惠卷(秒杀卷) 优惠卷的库存表:优惠卷的库存,开始抢购时间,结束抢购时间.只有特价优惠卷(秒杀卷)才需要填写这些信息优惠卷订单表卷的表里已经有一条普通优惠卷记录下面首先新增一条秒杀优惠卷记录 { &quo…...

编程日记 2025/5/19 16:47:28

蓝桥杯之c++入门（一）【第一个c++程序】

目录前言一、第⼀个C程序1.1 基础程序1.2 main函数1.3 字符串1.4 头文件1.5 cin 和 cout 初识1.6 名字空间1.7 注释二、四道简单习题（点击跳转链接）练习1：Hello,World!练习2：打印飞机练习3：第⼆个整数练习4&#xff…...

编程日记 2025/5/20 8:18:41

数据结构树1

目录前言一，树的引论二，二叉树三，二叉树的详细理解四，二叉搜索树五，二分法与二叉搜索树的效率六，二叉搜索树的实现七，查找最大值和最小值指针传递 vs 传引用为什么指针按值传递不会修…...

编程日记 2025/5/17 10:56:09

EtherCAT主站IGH-- 25 -- IGH之fsm_slave_scan.h/c文件解析

EtherCAT主站IGH-- 25 -- IGH之fsm_slave_scan.h/c文件解析 0 预览一该文件功能`fsm_slave_scan.c` 文件功能函数预览二函数功能介绍`fsm_slave_scan.c` 中主要函数的作用1. `ec_fsm_slave_scan_state_start`2. `ec_fsm_slave_scan_state_address`3. `ec_fsm_slave_scan_stat…...

编程日记 2025/5/17 7:18:43

redis数据安全与性能保障

数据安全与性能保障 1、持久化1.1 快照持久化1.2 AOF持久化1.3 重写/压缩AOF文件 2、复制2.1 Redis复制的启动过程2.2 主从链 3、处理系统故障3.1 验证快照文件和AOF文件 4、事务4.1 java中的redis事务使用如有侵权，请联系～ 如有错误，也欢迎…...

编程日记 2025/5/19 20:09:07

llama.cpp LLM_CHAT_TEMPLATE_DEEPSEEK_3

llama.cpp LLM_CHAT_TEMPLATE_DEEPSEEK_3 1. LLAMA_VOCAB_PRE_TYPE_DEEPSEEK3_LLM2. static const std::map<std::string, llm_chat_template> LLM_CHAT_TEMPLATES3. LLM_CHAT_TEMPLATE_DEEPSEEK_3References 不宜吹捧中国大语言模型的同时，又去贬低美国大语言…...

编程日记 2025/5/20 1:50:48

【图文详解】lnmp架构搭建Discuz论坛

安装部署LNMP 系统及软件版本信息软件名称版本nginx1.24.0mysql5.7.41php5.6.27安装nginx 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：关闭防火墙 systemctl stop firewalld &&a…...

编程日记 2025/5/20 4:58:46

一文读懂fgc之cms

一文读懂 fgc之cms-实战篇 1. 前言线上应用运行过程中可能会出现内存使用率较高，甚至达到95仍然不触发fgc的情况，存在内存打满风险，持续触发fgc回收；或者内存占用率较低时触发了fgc，导致某些接口tp99，tp…...

编程日记 2025/5/18 22:35:58

Agent 高频知识汇总：查漏补缺参考大全

Agent 高频问题汇总一、基础概念类 （一）请解释 Agent 的概念及其主要特点 Agent 是一种能够感知所处环境，并基于感知信息做出决策、采取行动以实现特定目标的实体。它既可以是简单的规则基系统，也能是复杂的智能体&#xff0c…...

编程日记 2025/5/20 12:25:51

毕业设计--具有车流量检测功能的智能交通灯设计

摘要： 随着21世纪机动车保有量的持续增加，城市交通拥堵已成为一个日益严重的问题。传统的固定绿灯时长方案导致了大量的时间浪费和交通拥堵。为解决这一问题，本文设计了一款智能交通灯系统，利用车流量检测功能和先进的算法实现了…...

编程日记 2025/5/17 19:52:28

fatal error C1083: ޷[特殊字符]ļ: openssl/opensslv.h: No such file or directory

一、环境 1. Visual Studio 2017 2. edk2：202305 3. Python：3.11.4 二、 fatal error C1083: ޷򿪰ļ: openssl/opensslv.h: No such file or directory 上图出现这个警告，不用管。出现Done，说明编译成功。执行上…...

编程日记 2025/5/17 19:58:34

EasyExcel使用详解

文章目录 EasyExcel使用详解一、引言二、环境准备与基础配置1、添加依赖2、定义实体类三、Excel 读取详解1、基础读取2、自定义监听器3、多 Sheet 处理四、Excel 写入详解1、基础写入2、动态列与复杂表头3、样式与模板填充五、总结 EasyExcel使用详解一、引言 EasyExcel 是…...

编程日记 2025/5/18 20:48:58

论文阅读(十六)：利用线性链条件随机场模型检测阵列比较基因组杂交数据的拷贝数变异

1.论文链接：Detection of Copy Number Variations from Array Comparative Genomic Hybridization Data Using Linear-chain Conditional Random Field Models 摘要： 拷贝数变异（CNV）约占人类基因组的12%。除了CNVs在癌症发展中的…...

编程日记 2025/5/17 16:37:42

7.抽象工厂(Abstract Factory)

抽象工厂与工厂方法极其类似，都是绕开new的，但是有些许不同。动机在软件系统中，经常面临着“一系列相互依赖的对象”的创建工作；同时，由于需求的变化，往往存在更多系列对象的创建工作。假设案例假设…...

编程日记 2025/5/21 0:45:13

从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架（基础组件实现）

目录基础组件实现如何将图像和文字显示到OLED上如何绘制图像如何绘制文字如何获取字体？ 如何正确的访问字体如何抽象字体如何绘制字符串绘制方案文本绘制更加方便的绘制字体附录 ascii 6x8字体 ascii 8 x 16字体基础组件实现我们现在离手…...

编程日记 2025/5/18 22:01:28

负荷预测算法模型

1. 时间序列分析方法时间序列分析方法是最早被用来进行电力负荷预测的方法之一，它基于历史数据来构建数学模型，以描述时间与负荷值之间的关系。这种方法通常只考虑时间变量，不需要大量的输入数据，因此计算速度快。然而&#xff…...

编程日记 2025/5/17 17:18:01

Flutter Candies 一桶天下

| | | | | | | | 入魔的冬瓜最近刚入桶的兄弟，有责任心的开发者，对自己的项目会不断进行优化，达到最完美的状态自定义日历组件主要功能支持公历，农历，节气，传统节日，常用节假日 …...

编程日记 2025/5/19 2:14:27

android Camera 的进化

引言 Android 的camera 发展经历了3个阶段 ： camera1 -》camera2 -》cameraX。正文 Camera1 Camera1 的开发中，打开相机，设置参数的过程是同步的，就跟用户实际使用camera的操作步骤一样。但是如果有耗时情况发生时，会…...

编程日记 2025/5/18 2:01:47

HarmonyOS简介：应用开发的机遇、挑战和趋势

问题更多的智能设备并没有带来更好的全场景体验连接步骤复杂数据难以互通生态无法共享能力难以协同主要挑战针对不同设备上的不同操作系统，重复开发，维护多套版本多种语言栈，对人员技能要求高多种开发框架，不同的编程…...

编程日记 2025/5/19 6:26:35

反向代理模块b

1 概念 1.1 反向代理概念反向代理是指以代理服务器来接收客户端的请求，然后将请求转发给内部网络上的服务器，将从服务器上得到的结果返回给客户端，此时代理服务器对外表现为一个反向代理服务器。对于客户端来说，反向代理就相当于…...

编程日记 2025/5/17 2:03:17

C++并发：设计基于锁的并发数据结构

（上一篇主要讲了底层逻辑，比较晦涩难懂，这一章讲解数据结构设计） 对于并发场景，数据保护的形式主要如下： 1 采用独立互斥和外部锁 2 专门为并发访问自行设计的数据结构 1 并发设计的内涵互斥保护数据结…...

编程日记 2025/5/18 18:02:28

数据分析系列--⑥RapidMiner构建决策树(泰坦尼克号案例含数据)

一、资源下载二、数据处理 1.导入数据 2.数据预处理三、构建模型 1.构建决策树 2.划分训练集和测试集 3.应用模型 4.结果分析一、资源下载点击下载数据集二、数据处理 1.导入数据 2.数据预处理三、构建模型 1.构建决策树虽然决策树已经构建,但对于大多数初学者或…...

编程日记 2025/5/20 6:56:24

leetcode 844 比较含退格的字符串

leetcode 844 比较含退格的字符串题目描述给定 s 和 t 两个字符串，当它们分别被输入到空白的文本编辑器后，如果两者相等，返回 true 。# 代表退格字符。注意：如果对空文本输入退格字符，文本继续为空。示例 1&#…...

编程日记 2025/5/20 1:03:49

【ArcGIS遇上Python】批量提取多波段影像至单个波段

本案例基于ArcGIS python，将landsat影像的7个波段影像数据，批量提取至单个波段。相关阅读：【ArcGIS微课1000例】0141：提取多波段影像中的单个波段文章目录一、数据准备二、效果比对二、python批处理1. 编写python代码2. 运行代码一、数据准备实验数据及完整的python位…...

编程日记 2025/5/19 3:34:18

10.6 LangChain提示工程终极指南：从基础模板到动态生成的工业级实践

LangChain提示工程终极指南：从基础模板到动态生成的工业级实践关键词： LangChain提示模板、动态Prompt生成、少样本学习、结构化输出、Prompt工程一、Prompt Engineering 的本质：用设计模式重构大模型交互传统Prompt的局限性：硬编码文本：修改需求需重构代码缺乏结构…...

编程日记 2025/5/16 15:23:44

DeepSeek-R1 论文解读 —— 强化学习大语言模型新时代来临？

近年来，人工智能（AI）领域发展迅猛，大语言模型（LLMs）为通用人工智能（AGI）的发展开辟了道路。OpenAI 的 o1 模型表现非凡，它引入的创新性推理时缩放技术显著提升了推理能力…...

编程日记 2025/5/19 5:04:40

联想拯救者R720笔记本外接显示屏方法，显示屏是2K屏27英寸

晚上23点10分前下单，第二天上午显示屏送到，检查外包装没拆封过。这个屏幕左下方有几个按键，按一按就开屏幕、按一按就关闭屏幕，按一按方便节省时间，也支持阅读等模式。显示屏是 ：AOC 27英寸 2K高清 100Hz…...

编程日记 2025/5/19 13:23:43

编译安装PaddleClas@openKylin（失败，安装好后报错缺scikit-learn）

编译安装前置需求： 手工安装swig和faiss-cpu pip install swig pip install faiss-cpu 小技巧，pip编译安装的时候，可以加上--jobs64来多核编译。注意先升级pip版本：pip install pip -U pip3 install faiss-cpu --config-s…...

编程日记 2025/5/17 0:20:23

传输层协议TCP与UDP：深入解析与对比

传输层协议TCP与UDP：深入解析与对比目录传输层协议TCP与UDP：深入解析与对比引言1. 传输层协议概述2. TCP协议详解2.1 TCP的特点2.2 TCP的三次握手与四次挥手三次握手四次挥手 2.3 TCP的流量控制与拥塞控制2.4 TCP的可靠性机制 3. UDP协议详解3.1 UDP的…...

编程日记 2025/5/17 21:23:36

《解码AI大模型涌现能力：从量变到质变的智能跃迁》

在当今科技飞速发展的时代，人工智能大模型的涌现能力成为了众人瞩目的焦点。从ChatGPT与用户的流畅对话，到GPT-4在复杂任务中的出色表现，这些大模型仿佛一夜之间解锁了超乎想象的技能，那么，这种神奇的涌现能力究竟是如…...

编程日记 2025/5/20 21:26:17