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

如何使用 Tailwind CSS 构建响应式网站：详细指南

news 来源：原创 2025/7/19 18:45:44

文章目录

- 前言
- 一、安装 Tailwind CSS
- 二、配置 Tailwind CSS
- 三、使用 Tailwind CSS 构建响应式网站
- 四、优化和部署
- 结语

前言

在当今的数字时代，网站不仅需要在桌面浏览器上看起来出色，还需要在移动设备和平板电脑上提供一致的用户体验。响应式设计成为了实现这一目标的标准做法。Tailwind CSS 是一款低级别的 CSS 框架，它不提供预设的设计或组件，而是提供了一系列高度可复用的类，使开发者能够快速构建定制化的响应式网站。

一、安装 Tailwind CSS

要开始使用 Tailwind CSS，首先需要安装 Node.js 和 npm（Node Package Manager）。这是因为 Tailwind CSS 使用 PostCSS 进行编译，而 PostCSS 是一个使用 JavaScript 插件转换 CSS 的工具。

安装 Node.js 和 npm：
访问 Node.js 官网下载并安装最新版本的 Node.js，这会自动安装 npm。
安装 Tailwind CSS：
在你的项目文件夹中打开终端，然后运行以下命令来安装 Tailwind CSS：
```
npm install tailwindcss postcss autoprefixer
```
初始化 Tailwind CSS：
安装完成后，使用以下命令生成 Tailwind 的配置文件和初始的 PostCSS 配置文件：
```
npx tailwindcss init -p
```
这条命令会在项目根目录下创建两个文件：tailwind.config.js 和 postcss.config.js。tailwind.config.js 用于自定义 Tailwind 的行为，而 postcss.config.js 则用于配置 PostCSS。

二、配置 Tailwind CSS

编辑 tailwind.config.js 文件来配置 Tailwind 的主题和插件。这个文件是 Tailwind 的核心，允许你修改框架的行为，比如调整颜色、间距、字体等。

配置内容路径：
在 content 数组中指定所有包含 Tailwind 类的文件路径。这有助于减少生产环境中的未使用样式。
```
module.exports = {content: ["./pages/**/*.{js,ts,jsx,tsx}","./components/**/*.{js,ts,jsx,tsx}",],// 其他配置...
}
```

自定义主题：
在 theme 对象中，你可以覆盖或扩展 Tailwind 默认的主题设置。例如，增加新的颜色或调整现有的间距值。

module.exports = {// ...theme: {extend: {colors: {'primary': '#3b82f6', // 自定义主色调},spacing: {'128': '32rem', // 添加自定义间距},},},// ...
}

配置断点：
在 screens 对象中定义响应式断点。这些断点决定了不同屏幕尺寸下的布局变化。

module.exports = {// ...theme: {screens: {'sm': '640px','md': '768px','lg': '1024px','xl': '1280px','2xl': '1536px',},},// ...
}

三、使用 Tailwind CSS 构建响应式网站

Tailwind CSS 提供了大量的实用程序类，可以直接在 HTML 中使用这些类来快速构建页面。以下是几个常用的类及其用途：

布局类
- container：创建一个居中且有最大宽度的容器。
- flex 和 grid：用于创建弹性布局和网格布局。
- flex-col 和 flex-row：分别用于垂直和水平排列子元素。
对齐类
- items-center：垂直居中对齐。
- justify-between：两端对齐。
- text-center：文本居中对齐。
颜色类
- bg-blue-500：背景色为蓝色。
- text-gray-900：文字颜色为深灰色。
尺寸类
- w-full 和 h-full：宽度和高度为100%。
- p-4 和 m-2：内边距为16px，外边距为8px。
响应式类
- sm:w-full：在小屏幕设备上宽度为100%。
- md:w-1/2：在中等屏幕设备上宽度为50%。
- lg:block：在大屏幕设备上显示为块级元素。

示例：创建一个响应式导航栏

假设我们要创建一个简单的响应式导航栏，它在小屏幕上堆叠显示，在大屏幕上水平排列。

<nav class="bg-white shadow-md py-4"><div class="container mx-auto flex justify-between items-center"><a href="#" class="text-blue-500 text-lg font-bold">Logo</a><ul class="hidden md:flex space-x-4"><li><a href="#" class="text-gray-700 hover:text-blue-500">Home</a></li><li><a href="#" class="text-gray-700 hover:text-blue-500">About</a></li><li><a href="#" class="text-gray-700 hover:text-blue-500">Contact</a></li></ul><button class="md:hidden text-gray-700 focus:outline-none"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button></div>
</nav>

在这个例子中，我们使用了 flex 和 justify-between 类来创建一个水平对齐的导航栏。hidden md:flex 类确保导航链接在小屏幕上隐藏，在中等及以上屏幕显示。按钮则只在小屏幕上显示，用于触发移动菜单。

四、优化和部署

优化构建：
使用 Tailwind 的 PurgeCSS 插件来移除生产环境中未使用的 CSS 样式，从而减小最终 CSS 文件的大小。
```
module.exports = {// ...purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],// ...
}
```
构建CSS：
在项目的根目录下创建一个 CSS 文件，例如 input.css，并导入 Tailwind 的层：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

编译CSS：
使用 npm 脚本来编译 CSS 文件。在 package.json 中添加一个脚本：

"scripts": {"build:css": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
}

然后运行：

npm run build:css

部署：
将编译后的 CSS 文件链接到你的 HTML 文件中，并将整个项目部署到你的服务器或托管平台上。

结语

通过以上步骤，你应该已经掌握了如何使用 Tailwind CSS 构建响应式网站的基本方法。Tailwind 的灵活性和强大的类库使其成为现代前端开发的一个有力工具。随着你对 Tailwind 的深入了解，你将能够更加高效地构建出美观且功能丰富的用户界面。

如何使用 Tailwind CSS 构建响应式网站：详细指南

文章目录前言一、安装 Tailwind CSS二、配置 Tailwind CSS三、使用 Tailwind CSS 构建响应式网站四、优化和部署结语前言在当今的数字时代，网站不仅需要在桌面浏览器上看起来出色，还需要在移动设备和平板电脑上提供一致的用户体验。响应式设计成为了…...

编程日记 2025/7/19 18:45:44

LabVIEW发动机热磨合试验台

在汽车发动机的研发和质量控制中，发动机热磨合试验是关键环节。它能够检验发动机在实际运行条件下的性能，及时发现异响、振动、漏油等潜在问题。通过搭建基于LabVIEW的高效测试平台，可以显著提高发动机的可靠性和使用寿命。下面介绍LabVIEW开…...

编程日记 2025/7/14 8:33:41

【GPT】力量训练是什么，必要吗，有可以替代的方式吗

什么是力量训练？ 力量训练是一种通过抵抗力（如重量、阻力带、自身体重等）来刺激肌肉收缩，从而提高肌肉力量、耐力和体积的运动形式。它包括以下常见形式： 自由重量训练：使用哑铃、杠铃、壶铃等。固定器械…...

编程日记 2025/7/19 18:38:22

pikachu文件上传漏洞通关详解

声明：文章只是起演示作用，所有涉及的网站和内容，仅供大家学习交流，如有任何违法行为，均和本人无关，切勿触碰法律底线目录概念：什么是文件上传漏洞一、客户端check二、MIME type三、getimagesi…...

编程日记 2025/7/19 18:42:02

java hashCode() 详解

hashCode() 是 Java 中 Object 类提供的一个重要方法，它在 Java 集合框架中扮演着关键角色，特别是在使用哈希表相关的集合（如 HashMap、HashSet 和 Hashtable）时。以下是对 hashCode() 方法的详解，包括概念、用法、规…...

编程日记 2025/7/17 23:29:35

鸿蒙学习自由流转与分布式运行环境-价值与架构定义(1)

文章目录价值与架构定义1、价值2、架构定义随着个人设备数量越来越多，跨多个设备间的交互将成为常态。基于传统 OS 开发跨设备交互的应用程序时，需要解决设备发现、设备认证、设备连接、数据同步等技术难题，不但开发成本高，还存…...

编程日记 2025/7/19 18:38:22

JavaWeb

JavaWeb 一、JavaWeb 是什么？二、JavaWeb 发展阶段三、JavaWeb 常用架构Servlet JSP 架构SSH 架构SSM 架构SpringBoot架构SpringCloud架构四、JavaWeb 项目结构（带web.xml的）五、如何打包六、war包部署1. Tomcat 介绍2. Tomcat目录结构3. 开…...

编程日记 2025/7/15 10:06:13

加快发展社会保障事业的必要性

题目【2011年浙江公务员考试】（二）某市将召开一次加快发展社会保障事业的形势分析会。会上，某领导要就加快发展社会保障事业的必要性做主题发言。请结合给定资料7~8，为领导拟一份发言要点。（25分） 要求&a…...

编程日记 2025/7/19 7:26:32

责任链模式在spring security过滤器链中的应用

责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它允许多个对象按照顺序处理请求，并且每个对象可以选择自己是否处理该请求或将其传递给下一个对象。在Spring Security中，责任链模式得到了广泛应…...

编程日记 2025/7/19 18:33:50

Netty基本原理

目录前言原生NIO VS Netty 原生NIO存在的问题 Netty的优点线程模型传统阻塞 I/O (Blocking I/O) 2. 非阻塞 I/O (Non-blocking I/O) 3. 多路复用 I/O (Multiplexed I/O) 4. Reactor 模式常见的 Reactor 模式的变体： Netty线程模型工作原理前言 N…...

编程日记 2025/7/19 18:34:57

卡码网刷题链接：98. 所有可达路径一、题目简述二、编程demo 方法①邻接矩阵 from collections import defaultdict #简历邻接矩阵 def build_graph(): n, m map(int,input().split()) graph [[0 for _ in range(n1)] for _ in range(n1)]for _ in range(m): …...

编程日记 2025/7/19 18:42:03

Haproxy

一、haproxy简介 HAProxy 是法国开发者威利塔罗 (Willy Tarreau) 在 2000 年使用 C 语言开发的一个开源软件是一款具备高并发 ( 万级以上 ) 、高性能的 TCP 和 HTTP 负载均衡器支持基于 cookie 的持久性，自动故障切换，支持正则表达式及 web 状态统…...

编程日记 2025/7/15 19:36:15

旋转磁体产生的场 - 实验视频资源下载

先发几个视频，是2019年所作的实验内容更多视频，到某宝找我吧。注意：是收费的。 20190312-180244-旋转磁体产生的场造成激光功率减小 https://download.csdn.net/download/u014161757/90038058 20190313-090956-旋转磁体产生的场对真空介电…...

编程日记 2025/7/19 18:33:51

Java Map

在Java的集合框架中，Map接口用于存储键值对，提供了一种基于键进行查找和操作的数据结构。Map接口的实现类提供了丰富的方法来操作键值对，例如添加、删除、更新和查找。本文将详细介绍Java中的Map接口及其常见实现类，包括HashMap、…...

编程日记 2025/7/19 18:44:13

长三角文博会：Adobe国际认证体系推动设计人才评价新标准

2024年11月22日，由上海、江苏、浙江、安徽三省一市党委宣传部共同发起的第五届长三角文化博览会（简称“长三角文博会”）在上海国家会展中心盛大启幕。长三角文博会自2018年起已成功举办多届，已成为展示区域文化产业发展成果、推动…...

编程日记 2025/7/19 18:38:21

GoogleTest做单元测试

目录环境准备GoogleTest 环境准备 git clone https://github.com/google/googletest.git说cmkae版本过低了，解决方法进到googletest中 cmake CMakeLists.txt make sudo make installls /usr/local/lib存在以下文件说明安装成功中间出了个问题就是，…...

编程日记 2025/7/19 18:26:17

CSDN 博客自动发布脚本（Python 含自动登录、定时发布）

文章目录关于 csdn auto publisher使用关于 csdn auto publisher 源码地址：https://github.com/ezscode/csdn_auto_publisher 使用 def test_simple_pub():file_path /Users/xx/Documents/xxx/tool.md article Article(file_path) article.tags [python] art…...

编程日记 2025/7/15 23:10:37

RL78/G15 Fast Prototyping Board Arduino IDE 平台开发过程

这是一篇基于RL78/G15 Fast Prototyping Board的Arduino IDE开发记录 RL78/G15 Fast Prototyping Board硬件简介（背景）基础测试（方法说明/操作说明）开发环境搭建（方法说明/操作说明代码结果）Arduino IDE RL…...

编程日记 2025/7/19 8:26:58

VsCode 插件推荐（个人常用）

VsCode 插件推荐（个人常用）...

编程日记 2025/7/4 15:56:19

零基础学安全--云技术基础

目录学习连接前言云技术历史云服务公有云服务商云分类基础设施即服务（IaaS） 平台即服务（PaaS） 软件即服务（SaaS） 云架构虚拟化容器云架构设计组件选择基础设施即代码集成部署…...

编程日记 2025/7/17 23:31:41

docker如何安装redis

第一步如果未指定redis，则安装的是最新版的 docker pull redis 创建一个目录 mkdir /usr/local/docker/redis 然后直接可以下载redis，这是方式确实不怎么好，应该找在官网上找对应的redis配置文件 wget http://download.redis.io/redis-stab…...

编程日记 2025/7/16 1:07:24

搜维尔科技：仿人双臂遥操作系统，力反馈灵巧手操作解决方案

仿人双臂遥操作系统，力反馈灵巧手操作解决方案搜维尔科技：仿人双臂遥操作系统，力反馈灵巧操作解决方案...

编程日记 2025/7/9 14:28:04

C++ 优先算法 —— 无重复字符的最长子串（滑动窗口）

目录题目： 无重复字符的最长子串 1. 题目解析 2. 算法原理 Ⅰ. 暴力枚举 Ⅱ. 滑动窗口（同向双指针） 3. 代码实现 Ⅰ. 暴力枚举 Ⅱ. 滑动窗口题目： 无重复字符的最长子串 1. 题目解析题目截图： 此题所说的…...

编程日记 2025/7/19 10:39:32

R语言绘图过程中遇到图例的图块中出现字符“a“的解决方法

R语言绘图过程中遇到图例的图块中出现字符的解决方法因为我遇到这个问题的时候没在网上找到合适的方法，找到个需要付费的，算了。也许是因为问的方式不同，问了半天AI也回答出来，莫名有些烦躁，打算对代码做个分析&…...

编程日记 2025/7/13 1:15:42

海康面阵、线阵、读码器及3D相机接线说明

为帮助用户快速了解和配置海康系列设备的接线方式，本文将针对海康面阵相机、线阵相机、读码器和3D相机的主要接口及接线方法进行全面整理和说明。一、海康面阵相机接线说明海康面阵相机使用6-pin P7接口，其功能设计包括电源输入、光耦隔离信号输入输出…...

编程日记 2025/7/19 18:36:06

Lua--1.基础知识

Lua基础知识变量简单的4种变量类型复杂的4种变量类型type函数字符串操作长度获取--#多行打印字符串拼接别的类型转字符串-- tostring()字符串提供的公共方法运算符算术运算符-- - * / % ^条件运算符-- > < > < ~(不等于是 ~)逻辑运算符-- and or not位运算、…...

编程日记 2025/7/17 15:05:32

从Full-Text Search全文检索到RAG检索增强

从Full-Text Search全文检索到RAG检索增强时光飞逝，转眼间六年过去了，六年前铁蛋优化单表千万级数据查询性能的场景依然历历在目，铁蛋也从最开始做CRUD转行去了大数据平台开发，混迹包装开源的业务，机缘巧合下做了实时…...

编程日记 2025/7/9 7:34:52

Qt桌面应用开发第八天（读写文件文件编码文件流）

目录 1.读文件 2.写文件及编码格式 2.1写文件 2.2编码格式 3.文件信息读取 4.文件流 4.1QTextStream 4.2QDataStream 1.读文件需求：一个pushButton，点击之后可以选择一个txt文件的路径，路径会显示在lineEdit上，txt文件的…...

编程日记 2025/7/19 16:14:12

玩转 Burp Suite (1)

内容预览 ≧∀≦ゞ玩转 Burp Suite (1)声明Burp Suite 简介Dashboard（仪表盘）1. 默认任务管理2. 暂停任务3. 新建扫描任务4. 使用总结 Target（目标）1. SIte Map （站点地图）2. Scope（范围&#…...

编程日记 2025/7/19 18:39:43

MyBatis高级扩展

一、Mapper批量映射优化: 1.需求: Mapper 配置文件很多时，在全局配置文件中一个一个注册太麻烦，希望有一个办法能够一劳永逸 2.配置方式: Mybatis允许在指定Mapper映射文件时，只指定其所在的包: <mappers><package name"c…...

编程日记 2025/7/15 11:36:29

蓝桥杯c++算法秒杀【6】之动态规划【下】（数字三角形、砝码称重(背包问题)、括号序列、异或三角：：：非常典型的必刷例题！！！）

别忘了请点个赞收藏关注支持一下博主喵！！！! ! ! ! ！ 关注博主，更多蓝桥杯nice题目静待更新:) 动态规划三、括号序列【问题描述】给定一个括号序列，要求尽可能少地添加若干括号使得括号序列变得合…...

编程日记 2025/7/19 9:46:58

MR30分布式 IO 模块在冷却水泵系统中的卓越应用

在当今各类工业生产以及大型设施运行的场景中，冷却水泵系统起着至关重要的作用，它犹如保障整个运转体系顺畅运行的 “血液循环系统”，维持着设备适宜的温度环境，确保其稳定、高效地工作。而随着科技的不断发展，明达技术…...

编程日记 2025/7/17 19:08:00

微前端基础知识入门篇（二）

概述在上一篇介绍了一些微前端的基础知识，详见微前端基础知识入门篇(一)。本文主要介绍qiankun微前端框架的实战入门内容。 qiankun微前端实践通过Vite脚手架分别创建三个程序，主应用A为：vite+vue3+ts,两个微应用分别为B：vite+vue3+ts;C:vite+React+ts。因为qiankun的…...

编程日记 2025/7/10 1:06:33

直接抄作业！Air780E模组LuatOS开发：位运算(bit)示例

在嵌入式开发中，位运算是一种高效且常用的操作技巧。本文将介绍如何使用Air780E模组和LuatOS进行位运算，并通过示例代码帮助读者快速上手。一、位运算概述位运算是一种在计算机系统中对二进制数位进行操作的运算。由于计算机内部数据的存储和处理都是…...

编程日记 2025/7/16 12:34:48

从零开始理解JVM：对象的生命周期之对象销毁（垃圾回收）

一、JVM参数在学垃圾回收器之前，我们先要知道，jvm参数是怎么回事。因为配置各种回收器，必须对应各种参数设置。标准参数（-） 所有的JVM实现都必须实现这些参数的功能，而且向后兼容 -help-version 非标准参…...

编程日记 2025/7/15 21:33:21

计算机网络的发展

目录起源与早期发展 ARPANET与TCP/IP协议的诞生互联网的诞生与普及高速互联网与无线网络的兴起移动互联网与云计算的崛起物联网、区块链与自动驾驶技术的兴起起源与早期发展计算机网络的雏形最早可以追溯到20世纪60年代，主要是为了共享大型计算资源。当…...

编程日记 2025/7/15 11:48:54

python3 自动更新的缓存类

这个类会在后台自动更新缓存数据，你只需要调用方法来获取数据即可。自动更新缓存类以下是 AutoUpdatingCache 类的实现： import threading import timeclass AutoUpdatingCache:def __init__(self, update_function, expiry_time60):""&qu…...

编程日记 2025/7/15 3:58:22

PICO 获取设备号 SN码

Unity版本 2020.3.42f1c1PICO SDK版本PICO Unity Integration SDK-3.0.5-20241105Pico设备pico 4ultra 注意此api暂时只测试企业版本 pico 4ultra 代码 using Unity.XR.PICO.TOBSupport;private void Awake() {bool result PXR_Enterprise.InitEnterpriseService();Debug.L…...

编程日记 2025/7/15 9:03:49

spf算法、三类LSA、区间防环路机制/规则、虚连接

1.构建spf树： 路由器将自己作为最短路经树的树根根据Router-LSA和Network-LSA中的拓扑信息,依次将Cost值最小的路由器添加到SPF树中。路由器以Router ID或者DR标识。广播网络中DR和其所连接路由器的Cost值为0。SPF树中只有单向的最短路径,保证了OSPF区域内路由计管不…...

编程日记 2025/7/17 1:08:15

计算机基础（下）

内存管理内存管理主要做了什么？ 操作系统的内存管理非常重要，主要负责下面这些事情： 内存的分配与回收：对进程所需的内存进行分配和释放，malloc 函数：申请内存，free 函数：释放内存…...

编程日记 2025/7/16 22:37:23

OpenCV从入门到精通实战(七)——探索图像处理：自定义滤波与OpenCV卷积核

本文主要介绍如何使用Python和OpenCV库通过卷积操作来应用不同的图像滤波效果。主要分为几个步骤：图像的读取与处理、自定义卷积函数的实现、不同卷积核的应用，以及结果的展示。卷积在图像处理中，卷积是一种重要的操作，它通过…...

编程日记 2025/7/19 14:55:28

Java基础——（一）Java概述

Java特性简单性：Java与C很相似，但剔除了C中许多比较复杂并且很少使用的功能，比如头文件、指针运算、结构、联合、操作符重载、虚基类等，从而使Java更易于上手、学习。面向对象：Java是一门面向对象语言，具…...

编程日记 2025/7/14 7:51:20

关于IDE的相关知识之三【插件安装、配置及推荐的意义】

成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】今日分享关于ide插件安装、配置及推荐意义的相关内容…...

编程日记 2025/7/18 23:37:22

C++设计模式之组合模式的基本结构

组合模式的UML类图表示如下： ------------------ ------------------ | Component | <----- | Leaf | ------------------ ------------------ | operation() | | operation() | ------------------ --…...

编程日记 2025/7/17 7:19:34

Apache OFBiz xmlrpc XXE漏洞（CVE-2018-8033）

目录 1、漏洞描述 2、EXP下载地址 3、EXP利用 1、漏洞描述 Apache OFBiz是一套企业资源计划（ERP）系统。它提供了广泛的功能，包括销售、采购、库存、财务、CRM等。 Apache OFBiz还具有灵活的架构和可扩展性，允许用户根据业务需求…...

编程日记 2025/7/16 8:47:03

梯度——多元函数偏导数——梯度算子的理论基础

梯度是一个数学概念，在多维空间中表示函数在某一点处变化最快的方向和变化率。对于一个多元函数 f ( x 1 , x 2 , ⋯ , x n ) f(x_1, x_2, \cdots, x_n) f(x1,x2,⋯,xn)，其梯度是一个向量，记作 ∇ f \nabla f ∇f或者 grad f f f&…...

编程日记 2025/7/15 11:18:55

【GPT】力量训练的底层原理？

详细解读力量训练的每一个底层原理力量训练之所以有效，是因为它利用了肌肉、神经系统和生物化学反应的基本机制。以下逐一详细解析，并解释相关概念。 1. 应力-恢复-适应理论概念解析应力（Stress）：指训练带来的负…...

编程日记 2025/7/18 15:07:20

Django 路由层

1. 路由基础概念 URLconf (URL 配置)：Django 的路由系统是基于 urls.py 文件定义的。路径匹配：通过模式匹配 URL，并将请求传递给对应的视图处理函数。命名路由：每个路由可以定义一个名称，用于反向解析。 2. 基本路由配…...

编程日记 2025/7/18 18:29:10

Unity项目性能优化列表

1、对象池 2、检查内存是否泄露。内存持续上升(闭包、委托造成泄露) 3、检查DrawCall数量，尽量减少SetPassCall 4、尽量多的利用四种合批动态合批(Dynamic Batching)静态合批(Static Batching)GPUInstancingSRP Batcher 动态合批消耗内存把多个网格组合在一起合并…...

编程日记 2025/7/16 11:07:17

docker启动kafka、zookeeper、kafdrop

1、启动zookeeper docker run -d --name zookeeper -p 2181:2181 -t wurstmeister/zookeeper2、启动kafka docker run -d --name kafka --publish 9092:9092 --link zookeeper:zookeeper -e KAFKA_BROKER_ID1 -e HOST_IP127.0.0.1 -e KAFKA_ZOOKEEPER_CONNECTzookeeper:2181…...

编程日记 2025/7/14 6:53:11

文章目录

前言

一、安装 Tailwind CSS

二、配置 Tailwind CSS

三、使用 Tailwind CSS 构建响应式网站

四、优化和部署

结语

相关文章：