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

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

news 2026/5/16 18:02:03

一、Tailwind CSS 概述

  1. Tailwind CSS 是一个功能优先的 CSS 框架，它提供了大量的实用类（utility classes），允许开发者通过组合这些类来快速构建用户界面

  2. 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

  1. content 是一个数组，用于指定 Tailwind CSS 应该扫描哪些文件以自动检测并包含哪些 CSS 类

  2. 这基于 purgecss 的功能，用于移除未使用的 CSS，从而减小最终 CSS 文件的大小

  3. 在这里配置为 ["./src/**/*.{html,js}"]，这是一个 glob 模式，它匹配 src 目录下的所有 .html 和 .js 文件，其中 ** 表示匹配任意深度的子目录

（2）theme

  1. theme 对象用于自定义 Tailwind CSS 的主题

  2. 可以在这里添加、修改、删除 Tailwind CSS 的默认主题变量，例如，颜色、间距、字体大小、边框半径等

  3. 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

  1. npx tailwindcss：执行 Tailwind CSS 的 CLI 命令

  2. -i ./src/input.css：-i 用于指定 Tailwind CSS 应该读取的源文件路径，这里 Tailwind CSS 将读取 src/input.css 文件中的样式信息，并根据 tailwind.config.js 文件中的配置进行处理

  3. -o ./src/output.css：-o 用于指定 Tailwind CSS 处理后的文件应该保存到的路径

  4. --watch：告诉 Tailwind CSS 的以监视模式运行，在监视模式下，Tailwind CSS 将持续监视输入文件及其依赖项的变化（例如，tailwind.config.js 配置文件、任何通过 @tailwind 指令引入的文件），一旦检测到变化，它将自动重新编译输出文件

相关文章：

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

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

编程日记 2025/2/2 4:47:37

鸿蒙开发黑科技“stack叠层”替代customdialog

前一篇提到的问题，本篇博文提出了一个解决方案： arkui-x LongPressGesture触发customdialog踩坑记录-CSDN博客 前一段时间遇到的这个问题，通过排除法观察，锁定为customdialog组件有bug，极为容易挂死。不论如何调整使用方法，都还是会触发挂死。 反馈给arkui团队，说是在…...

编程日记 2025/2/2 4:46:36

FreeRTOS从入门到精通 第十五章（事件标志组）

参考教程&#xff1a;【正点原子】手把手教你学FreeRTOS实时系统_哔哩哔哩_bilibili 一、事件标志组简介 1、概述 &#xff08;1&#xff09;事件标志位是一个“位”&#xff0c;用来表示事件是否发生。 &#xff08;2&#xff09;事件标志组是一组事件标志位的集合&#x…...

编程日记 2025/2/2 4:43:33

智慧园区管理平台实现智能整合提升企业运营模式与管理效率

内容概要 在当今数字化的背景下&#xff0c;智慧园区管理平台正逐渐成为企业提升运营效率和管理模式的重要工具。这个平台汇聚了多种先进技术&#xff0c;旨在通过智能整合各类资源与信息&#xff0c;帮助企业实现全面的管理创新。 智慧园区管理平台不仅仅是一个数据处理工具…...

编程日记 2025/2/2 4:42:32

markdown公式特殊字符

个人学习笔记 根号 在 Markdown 中&#xff0c;要表示根号 3&#xff0c;可以使用 LaTeX 语法来实现。常见的有以下两种方式&#xff1a; 行内公式形式&#xff1a;使用一对美元符号 $ 将内容包裹起来&#xff0c;即 $\sqrt{3}$ &#xff0c;在支持 LaTeX 语法渲染的 Markdow…...

编程日记 2025/2/2 4:41:30

【深度分析】微软全球裁员计划不影响印度地区，将继续增加当地就业机会

当微软的裁员刀锋掠过全球办公室时&#xff0c;班加罗尔的键盘声却愈发密集——这场资本迁徙背后&#xff0c;藏着数字殖民时代最锋利的生存法则。 表面是跨国公司的区域战略调整&#xff0c;实则是全球人才市场的地壳运动。微软一边在硅谷裁撤年薪20万美金的高级工程师&#x…...

编程日记 2025/2/2 4:40:28

学习数据结构（5）单向链表的实现

&#xff08;1&#xff09;头部插入 &#xff08;2&#xff09;尾部删除 &#xff08;3&#xff09;头部删除 &#xff08;4&#xff09;查找 &#xff08;5&#xff09;在指定位置之前插入节点 &#xff08;6&#xff09;在指定位置之后插入节点 &#xff08;7&#xff09;删除…...

编程日记 2025/2/2 4:37:24

刷题记录 HOT100回溯算法-5：22. 括号生成

题目&#xff1a;22. 括号生成 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;["((()))","(()())","(())()",…...

编程日记 2025/2/2 4:36:21

Keepalived高可用集群企业应用实例二

一、实现ipvs的高可用性 ipvs相关配置 虚拟服务器配置结构&#xff1a; virtual_server ip port { …… real_server { …… } real_server { …… } } virtual server (虚拟服务器)的定义格式 virtual_server ip port 定义虚拟主机ip地址及其端口 virtual_server …...

编程日记 2025/2/2 4:34:18

C++计算特定随机操作后序列元素乘积的期望

有一个长度为 n n n的序列 a 1 , a 2 , . . . , a n a_1,a_2,...,a_n a1​,a2​,...,an​。初始序列的所有元素均为 0 0 0。再给定正整数 m m m、 c c c和 ( n − m 1 ) (n-m1) (n−m1)个正整数 b 1 , b 2 , . . . , b n − m 1 b_1,b_2,...,b_{n-m1} b1​,b2​,...,bn−m1​…...

编程日记 2025/2/2 4:32:16

c++字母大小写转换

可以通过标准库中的 <algorithm> 和 <cctype> 头文件来实现大小写转换。以下是常用的方法&#xff1a; 1. 使用 std::transform 和 std::toupper/std::tolower 1.1 转换为大写 #include <iostream> #include <string> #include <algorithm> //…...

编程日记 2025/2/2 4:27:11

MySQL知识点总结（十六）

请说明在复制拓扑中&#xff0c;中继日志集和从属服务器状态日志的作用。 中继日志用来保存从主服务器接受的二进制日志&#xff0c;与二进制日志相同的格式存储&#xff0c;由服务器自动管理&#xff0c;在其全部内容重放后会自动删除。 从属服务器状态日志存储关于如何连接…...

编程日记 2025/2/2 4:23:06

Windows程序设计10：文件指针及目录的创建与删除

文章目录 前言一、文件指针是什么&#xff1f;二、设置文件指针的位置&#xff1a;随机读写&#xff0c;SetFilePointer函数1.函数说明2.函数实例 三、 目录的创建CreateDirectory四、目录的删除RemoveDirectory总结 前言 Windows程序设计10&#xff1a;文件指针及目录的创建与…...

编程日记 2025/2/2 4:19:00

geolocator包的功能和用法

文章目录 1 概念介绍2 使用方法3 示例代码4 体验分享 我们在上一章回中介绍了如何实现滑动菜单相关的内容&#xff0c;本章回中将介绍如何获取位置信息.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1 概念介绍 我们在这里说的获取位置信息本质上是获取当前手机所在位置的…...

编程日记 2025/2/2 4:15:57

Node.js——body-parser、防盗链、路由模块化、express-generator应用生成器

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

编程日记 2025/2/2 4:11:50

22.Word：小张-经费联审核结算单❗【16】

目录 NO1.2 NO3.4​ NO5.6.7 NO8邮件合并 MS搜狗输入法 NO1.2 用ms打开文件&#xff0c;而不是wps❗不然后面都没分布局→页面设置→页面大小→页面方向→上下左右&#xff1a;页边距→页码范围&#xff1a;多页&#xff1a;拼页光标处于→布局→分隔符&#xff1a;分节符…...

编程日记 2025/2/2 4:10:48

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

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

编程日记 2025/2/2 4:09:47

本地化部署DeepSeek-R1

本文环境搭建均基于免费工具&#xff0c;感谢开源。 一、下载工具并安装 1. Ollama&#xff1a;最新版本 0.5.7 官网在这里 https://ollama.com/download 但是下载太慢&#xff0c;得换个思路 https://sourceforge.net/projects/ollama.mirror/ 2.Chatbox https://cha…...

编程日记 2025/2/2 4:02:40

验证二叉搜索数（98）

98. 验证二叉搜索树 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* …...

编程日记 2025/2/2 4:00:38

StarRocks BE源码编译、CLion高亮跳转方法

阅读SR BE源码时&#xff0c;很多类的引用位置爆红找不到&#xff0c;或无法跳转过去&#xff0c;而自己的Linux机器往往缺乏各种C依赖库&#xff0c;配置安装比较麻烦&#xff0c;因此总体的思路是通过CLion远程连接SR社区已经安装完各种依赖库的Docker容器&#xff0c;进行编…...

编程日记 2025/2/2 3:59:36

避开无感FOC的那些坑：我的STM32F103 SMO观测器调试心得与波形分析

避开无感FOC的那些坑&#xff1a;我的STM32F103 SMO观测器调试心得与波形分析 在无感FOC驱动开发中&#xff0c;观测器的调试往往是整个项目中最具挑战性的环节。当电机出现抖动、观测角度不准或启动失败时&#xff0c;如何快速定位问题并优化参数&#xff0c;成为工程师们必须…...

编程新知 2026/5/16 16:23:18

星露谷物语SMAPI模组加载器：5分钟快速上手指南与完整使用教程

星露谷物语SMAPI模组加载器&#xff1a;5分钟快速上手指南与完整使用教程 【免费下载链接】SMAPI The modding API for Stardew Valley. 项目地址: https://gitcode.com/gh_mirrors/smap/SMAPI 你是否曾经因为星露谷物语模组安装复杂、冲突不断而感到困扰&#xff1f;今…...

编程新知 2026/5/16 15:55:17

30天试用期重置神器：JetBrains IDE免费使用终极解决方案

30天试用期重置神器&#xff1a;JetBrains IDE免费使用终极解决方案 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 还在为JetBrains IDE试用期到期而烦恼吗&#xff1f;每次30天试用结束后&#xff0c;那些强大的…...

编程新知 2026/5/16 15:28:56

Programming Bitcoin最佳实践：10个核心编程技巧助你从零掌握比特币开发 [特殊字符]

Programming Bitcoin最佳实践&#xff1a;10个核心编程技巧助你从零掌握比特币开发 &#x1f680; 【免费下载链接】programmingbitcoin Repository for the book 项目地址: https://gitcode.com/gh_mirrors/pr/programmingbitcoin 想要深入理解比特币技术并掌握区块链编…...

编程新知 2026/5/16 15:15:52

10分钟精通：Bilibili视频下载器完整使用指南与高级技巧

10分钟精通&#xff1a;Bilibili视频下载器完整使用指南与高级技巧 【免费下载链接】bilibili-downloader B站视频下载&#xff0c;支持下载大会员清晰度4K&#xff0c;持续更新中 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader 还在为无法保存B站…...

编程新知 2026/5/16 14:35:06

ORTC与AI融合：从实时传输到智能通信的架构演进与实践

1. 项目概述&#xff1a;当实时通信遇上人工智能最近几年&#xff0c;我身边不少做音视频通信和做AI算法的朋友&#xff0c;聊天时总绕不开一个话题&#xff1a;ORTC&#xff08;Object Real-Time Communication&#xff09;和AI&#xff0c;这两者到底能擦出什么样的火花&…...

编程新知 2026/5/16 14:35:06

SpeexDSP音频处理库深度解析：3种核心算法实现与40%性能优化实战

SpeexDSP音频处理库深度解析&#xff1a;3种核心算法实现与40%性能优化实战 【免费下载链接】speexdsp Speex audio processing library - THIS IS A MIRROR, DEVELOPMENT HAPPENS AT https://gitlab.xiph.org/xiph/speexdsp 项目地址: https://gitcode.com/gh_mirrors/sp/sp…...

编程新知 2026/5/16 14:11:24

高效风扇控制完全指南：5步打造静音散热系统

高效风扇控制完全指南&#xff1a;5步打造静音散热系统 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/FanContro…...

编程新知 2026/5/16 13:49:49

构建个人技能中心：Git+Markdown打造结构化知识库实践

1. 项目概述&#xff1a;一个技能驱动的开源知识库 最近在整理自己的技术栈和项目经验时&#xff0c;我一直在思考一个问题&#xff1a;如何将那些零散的、在不同项目中反复验证过的“技能点”系统化地沉淀下来&#xff0c;形成一个可以随时查阅、复用和迭代的“个人工具箱”&…...

编程新知 2026/5/16 13:49:48

如何智能批量添加EXIF水印：摄影师的自动化参数标注解决方案

如何智能批量添加EXIF水印&#xff1a;摄影师的自动化参数标注解决方案 【免费下载链接】semi-utils 一个批量添加相机机型和拍摄参数的工具&#xff0c;后续「可能」添加其他功能。 项目地址: https://gitcode.com/gh_mirrors/se/semi-utils 摄影爱好者和专业摄影师都面…...

编程新知 2026/5/16 12:11:57