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

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

news 文章来源：https://blog.csdn.net/weixin_52173250/article/details/145393861 2025/5/5 18:38:53

一、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

数模测评：doubao1.5＞deepseek-v3＞gpt-o1

本次测试了当前评价最高的三款大模型doubao1.5、gpt-o1、deepseek-v3(r1崩溃)&#xff0c;都是采用无提示词的硬核提问方式&#xff0c;测试视频如下。 gpto1、doubao1.5、deepseek测评 测试方式&#xff1a; 上传美赛六道题目文件 直接提问以下5句话&#xff1a; 这是一道数学…...

编程日记 2025/2/2 3:55:32

晴，初三，年已过

既然直播如此影响情绪&#xff0c;为什么还要直播&#xff1f;因为无聊&#xff1f;明明那么多事情可以打发时间。 真不想懂。 今日初三&#xff0c;昨天晚上小舅家聚&#xff0c;今天大舅家聚&#xff0c;计划明天小姨妈家聚。 今晚喝了点大舅哥哥泡的白葡萄酒&#xff0c;…...

编程日记 2025/2/2 3:54:31

Vue3 v-bind 和 v-model 对比

1. 基本概念 1.1 v-bind 单向数据绑定从父组件向子组件传递数据简写形式为 : 1.2 v-model 双向数据绑定父子组件数据同步本质是 v-bind 和 v-on 的语法糖 2. 基础用法对比 2.1 表单元素绑定 <!-- v-bind 示例 --> <template><input :value"text&quo…...

编程日记 2025/2/2 3:41:15

Smalltalk语言是何物?面向对象鼻祖Simula的诞生？Simula和Smalltalk有什么区别?面向对象设计?

Smalltalk语言是何物? Smalltalk语言的前身可以追溯到Flex系统&#xff0c;这是由Alan Kay最早提出的。在随后的发展中&#xff0c;Smalltalk逐渐演化&#xff0c;并出现了Smalltalk-72和Smalltalk-76等版本。最终&#xff0c;在经过近10年的研究与发展后&#xff0c;Xerox研究…...

编程日记 2025/2/2 3:40:13

KVM/ARM——基于ARM虚拟化扩展的VMM

1. 前言 ARM架构为了支持虚拟化做了些扩展&#xff0c;称为虚拟化扩展(Virtualization Extensions)。原先为VT-x创建的KVM(Linux-based Kernel Virtual Machine)适配了ARM体系结构&#xff0c;引入了KVM/ARM (the Linux ARM hypervisor)。KVM/ARM没有在hypervisor中引入复杂的…...

编程日记 2025/2/2 3:37:10

Windows系统中Docker可视化工具对比分析，Docker Desktop，Portainer，Rancher

Docker可视化工具对比分析&#xff0c;Docker Desktop&#xff0c;Portainer&#xff0c;Rancher Windows系统中Docker可视化工具对比分析1. 工具概览2. Docker Desktop官网链接&#xff1a;主要优点&#xff1a;主要缺点&#xff1a;版本更新频率&#xff1a; 3. Portainer官网…...

编程日记 2025/2/2 3:35:08

【架构面试】二、消息队列和MySQL和Redis

MQ MQ消息中间件 问题引出与MQ作用 常见面试问题&#xff1a;面试官常针对项目中使用MQ技术的候选人提问&#xff0c;如如何确保消息不丢失&#xff0c;该问题可考察候选人技术能力。MQ应用场景及作用&#xff1a;以京东系统下单扣减京豆为例&#xff0c;MQ用于交易服和京豆服…...

编程日记 2025/2/2 3:33:05

算法【完全背包】

完全背包与01背包的区别仅在于每种商品可以选取无限次。时间复杂度O(物品数量 * 背包容量) 下面通过题目加深理解。 题目一 测试链接&#xff1a;疯狂的采药 - 洛谷 分析&#xff1a;这是一道完全背包的模板题。对于第i个物品的可能性展开也有两种&#xff0c;第一种是不取第…...

编程日记 2025/2/2 3:32:04

二叉树的遍历

有一个结点的二叉树。给出每个结点的两个子结点编号&#xff0c;建立一棵二叉树&#xff0c;如果是叶子结点&#xff0c;则输入 0 0。 建好树这棵二叉树之后&#xff0c;依次求出它的前序、中序、后序列遍历。 输入格式: 第一行一个整数n &#xff0c;表示结点数。 之后n 行…...

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

1.31 实现五个线程的同步

1.使用互斥锁实现 1>程序代码 #include <stdio.h> #include <string.h> #include <unistd.h> #include <stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <pthread.h> #include &l…...

编程日记 2025/2/2 3:24:56