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

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

news 2025/7/7 6:46:30

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/7/7 6:04:11

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/7/6 22:31:45

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/6/15 6:20:40

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/7/6 21:12:40

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/6/18 4:00:59

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/7/6 13:29:31

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/7/7 5:44:33

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/7/1 4:51:19

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/7/6 5:26:39

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要&#xff1a;在消费市场竞争日益激烈的当下&#xff0c;传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序&#xff0c;探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式&#xff0c;分析沉浸式体验的优势与价值…...

编程新知 2025/7/6 5:37:24