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

Tailwind CSS_现代 Web 开发的实用指南

article 2026/4/3 5:26:24

1. 引言

1.1 Tailwind CSS 概述

什么是 Tailwind CSS？

Tailwind CSS 是一种低级优先级的实用工具优先（utility-first）CSS 框架，它提供了一组灵活的基础类来构建自定义设计。与传统的 CSS 框架不同，Tailwind 不提供预设的组件样式或布局，而是通过组合简单的 CSS 类来实现复杂的设计。

实用工具优先的设计理念

Tailwind CSS 的核心理念是“实用工具优先”，即提供大量原子化的 CSS 类，开发者可以通过这些类快速构建界面，而无需编写额外的 CSS 文件。这种方式使得开发过程更加直观和高效，同时也提高了代码的可维护性和一致性。

Tailwind CSS 的优势和特点

  • 灵活性：可以根据项目需求自由组合类名，创建独特的设计。
  • 一致性：通过统一的类名命名规范，确保整个项目的样式一致。
  • 性能优化：通过 PurgeCSS 等工具可以移除未使用的样式，减少最终生成的 CSS 文件大小。
  • 社区支持：活跃的社区提供了丰富的插件、工具和教程。

1.2 为什么选择 Tailwind CSS

提高开发效率

使用 Tailwind CSS 可以显著减少编写和调试 CSS 的时间。开发者可以直接在 HTML 中应用类名，快速调整样式，而无需频繁切换到 CSS 文件中进行修改。

更灵活的设计

Tailwind 提供了丰富的实用工具类，涵盖了布局、外观、间距、字体等各个方面。开发者可以根据需要自由组合这些类，轻松实现复杂的响应式设计。

社区支持与生态

Tailwind 拥有一个庞大的社区，提供了大量的插件、工具和教程。无论是新手还是有经验的开发者，都可以从中受益，快速上手并提升开发效率。

2. 安装与配置

2.1 安装 Tailwind CSS

使用 CDN 快速引入

对于小型项目或快速原型开发，可以直接通过 CDN 引入 Tailwind CSS：

<!DOCTYPE html>
<html>
<head><link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body><!-- Your HTML content here -->
</body>
</html>

使用 npm 和 PostCSS 配置项目

对于大型项目或生产环境，建议使用 npm 和 PostCSS 进行安装和配置：

  1. 初始化项目并安装依赖：

    npx create-tailwindcss-app my-app
cd my-app
npm install tailwindcss postcss autoprefixer --save-dev

  2. 创建 Tailwind 配置文件：

    npx tailwindcss init

  3. 在 tailwind.config.js 中配置 Tailwind：

    module.exports = {purge: [],darkMode: false, // or 'media' or 'class'theme: {extend: {},},variants: {extend: {},},plugins: [],
}

  4. 在 CSS 文件中引入 Tailwind 样式：

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

  5. 使用 PostCSS 处理 CSS 文件：

    // package.json
"scripts": {"build:css": "postcss src/styles.css -o dist/styles.css"
}

  6. 构建项目：

    npm run build:css

集成到现有项目中

如果已经在使用其他 CSS 框架或工具链，可以通过 Tailwind 的插件和工具轻松集成。例如，在 Vue.js 或 React 项目中，可以通过 Webpack 或 Vite 来配置 Tailwind。

2.2 配置 Tailwind CSS

初始化配置文件 (tailwind.config.js)

tailwind.config.js 是 Tailwind 的核心配置文件，用于自定义主题、添加插件和扩展功能。以下是一个基本的配置示例：

module.exports = {purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],darkMode: false, // or 'media' or 'class'theme: {extend: {colors: {primary: '#0070f3',secondary: '#ff6b6b',},spacing: {'8xl': '96rem',},},},variants: {extend: {},},plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography'),],
}

自定义主题配置

Tailwind 允许你自定义颜色、间距、字体等主题元素。通过修改 theme.extend，你可以根据项目需求添加新的样式：

theme: {extend: {colors: {primary: '#0070f3',secondary: '#ff6b6b',},spacing: {'8xl': '96rem',},fontFamily: {sans: ['Inter', 'sans-serif'],},},
},

添加插件和扩展

Tailwind 提供了丰富的插件，如 @tailwindcss/forms 和 @tailwindcss/typography，可以帮助你快速实现常见的 UI 组件和排版样式。安装插件后，只需在 plugins 数组中添加即可：

plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography'),
],

3. 基础用法

3.1 常用类名介绍

Tailwind 提供了大量的实用工具类，涵盖布局、外观、间距、字体等方面。以下是常用类名的介绍：

  • 布局类

    • container: 创建一个居中的容器。
    • flex: 使用 Flexbox 布局。
    • grid: 使用 Grid 布局。
    <div class="container mx-auto p-4"><div class="flex justify-center items-center"><div class="grid grid-cols-2 gap-4

相关文章：

Tailwind CSS_现代 Web 开发的实用指南

1. 引言 1.1 Tailwind CSS 概述 什么是 Tailwind CSS？ Tailwind CSS 是一种低级优先级的实用工具优先（utility-first）CSS 框架，它提供了一组灵活的基础类来构建自定义设计。与传统的 CSS 框架不同，Tailwind 不提供预设的组件样式或布局，而是通过组合简单的 CSS 类来实…...

编程日记 2025/8/4 10:53:15

【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（9）

1.问题描述&#xff1a; 通过push token向鸿蒙手机推送一条通知&#xff0c;收到通知后&#xff0c;通知右侧不展示图片。 解决方案&#xff1a; 检查一下是否存在图片风控&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/push-image-co…...

编程日记 2025/8/2 7:09:08

2024年国赛高教杯数学建模D题反潜航空深弹命中概率问题解题全过程文档及程序

2024年国赛高教杯数学建模 D题 反潜航空深弹命中概率问题 原题再现 应用深水炸弹&#xff08;简称深弹&#xff09;反潜&#xff0c;曾是二战时期反潜的重要手段&#xff0c;而随着现代军事技术的发展&#xff0c;鱼雷已成为现代反潜作战的主要武器。但是&#xff0c;在海峡或…...

编程日记 2026/3/10 21:16:05

将宇宙不同温度下的能量表现形式 类比为量子计算机的波函数解码过程

以下是基于您提出的核心观点&#xff08;将宇宙不同温度下的能量表现形式类比为量子计算机的波函数解码过程&#xff09;撰写的论文框架设计&#xff0c;包含创新性理论与跨学科研究方法&#xff1a; --- **标题** 《量子信息视角下的宇宙热力学&#xff1a;从普朗克温度到…...

编程日记 2025/8/3 9:48:27

矩阵 trick 系列 题解

1.AT_dp_r Walk&#xff08;矩阵图论&#xff09; 题意 一个有向图有 n n n 个节点&#xff0c;编号 1 1 1 至 n n n。 给出一个二维数组 A 1... n , 1... n A_{1...n,1...n} A1...n,1...n​&#xff0c;若 A i , j 1 A_{i,j}1 Ai,j​1 说明节点 i i i 到节点 j j j …...

编程日记 2025/8/3 18:18:11

obj离线加载（vue+threejs）+apk方式浏览

demo需求&#xff1a;移动端&#xff0c;实现obj本地离线浏览 结合需求&#xff0c;利用&#xff08;vue2threejs173&#xff09;进行obj的加载&#xff0c;然后采用apk方式&#xff08;hbuilderX打包发布&#xff09;移动端浏览&#xff1b; https://github.com/bianbian886/…...

编程日记 2026/3/9 16:22:35

关于mysql 表中字段存储JSON对象对JSON对象中的bolean字段进行查询的方式

业务场景如题 JSON对象为 表为客诉表中的 发现利用原有的xml中的 and a1.order_list ->‘$[*].isZg’ request.isZg 后续发现需要更改为有效 本文作为自己日常工作记录用&#xff0c;有遇到相同问题的可以作为参考。...

编程日记 2026/3/11 3:08:15

WordPress Course Booking System SQL注入漏洞复现 (CVE-2025-22785)（附脚本）

免责申明： 本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权，请及时与我们联系，我们将尽快处理并删除相关内容。 0x0…...

编程日记 2026/2/16 22:47:47

Kylin麒麟操作系统 | 系统监控

以下所使用的环境为&#xff1a; 虚拟化软件&#xff1a;VMware Workstation 17 Pro 麒麟系统版本&#xff1a;Kylin-Server-V10-SP3-2403-Release-20240426-x86_64 一、系统状态查询工具 1. 静态显示系统进程信息ps ps命令会生成一个静态列表&#xff0c;列表中显示的进程其…...

编程日记 2026/4/1 8:11:32

vLLM服务设置开机自启动（Linux）

要在开机时进入指定的 conda 环境并启动此 vllm 服务&#xff0c;您可以通过以下步骤设置一个 systemd 服务来自动执行脚本。 一、第一步&#xff1a;创建一个启动脚本 1.打开终端并创建启动脚本&#xff0c;例如 /home/username/start_vllm.sh&#xff08;请替换 username 为…...

编程日记 2026/4/1 7:54:28

MongoDB#Code和Function

背景 在MongoDB Shell中, 使用db.system.js.inertOne 新增一个自定义函数后&#xff0c;读取值类型显示Code Class&#xff0c;该如何使用&#xff1f;Code类型和Function能互相转换吗&#xff1f; 实践 // 保存一个函数到 system.js 集合 db.system.js.insertOne({_id: &qu…...

编程日记 2026/3/11 19:59:47

MT-Metrics

MT-Metrics 是一类用于评估生成文本质量的指标&#xff0c;最初用于机器翻译任务&#xff0c;后来扩展到生成任务&#xff08;如对话生成、文本摘要等&#xff09;。它的核心思想是通过比较生成文本与参考文本之间的相似性&#xff08;如词汇重叠、句法结构、语义相似性&#x…...

编程日记 2026/4/1 22:29:23

几个api

几个api 原型链 可以阅读此文 Function instanceof Object // true Object instanceof Function // true Object.prototype.isPrototypeOf(Function) // true Function.prototype.isPrototypeOf(Object) // true Object.__proto__ Function.prototype // true Function.pro…...

编程日记 2026/3/13 10:29:01

数字IC后端设计实现OCC(On-chip Clock Controller)电路介绍及时钟树综合案例

数字IC后端时钟树综合专题&#xff08;OCC电路案例分享&#xff09; 复杂时钟设计时钟树综合(clock tree synthesis)常见20个典型案例 1、什么是OCC&#xff1f; 片上时钟控制器(On-chip Clock Controllers &#xff0c;OCC)&#xff0c;也称为扫描时钟控制器(Scan Clock Con…...

编程日记 2026/4/1 0:52:53

SurfaceFlinger代码笔记

drawLayers是做client合成&#xff0c;合成完以后的buffer会放在RenderSurface里 FrameBufferSurface里的buffer是通过setClientTarget给到HWC的&#xff08;HWC应该给client合成的buffer留了一个slot) Output.cpp这个文件非常关键&#xff0c;代表着具体一个Display的操作 d…...

编程日记 2026/2/16 5:25:20

Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录

一、需求描述 最近经常使用Trae生成一些小组件和功能代码&#xff08;对Trae赶兴趣的可以看之前的文章《TraeAi上手体验》&#xff09;&#xff0c;刚好在用uniapp开发微信小程序时需要开发一个输入密码的弹框组件&#xff0c;于是想用Trae来实现。原型设计稿如下&#xff1a;…...

编程日记 2026/4/2 20:33:07

软件测试丨Docker与虚拟机架构对比分析

Docker 与虚拟机&#xff08;VM&#xff09;在架构上有显著区别&#xff0c;主要体现在资源利用、性能、隔离性和启动时间等方面。以下是两者的主要架构区别&#xff1a; 1. 架构层次 Docker: 主机操作系统&#xff1a;Docker 直接运行在宿主机的操作系统上。Docker 引擎&…...

编程日记 2026/2/5 22:42:24

在VsCode中选择conda编译器环境

当vscode出现始终在激活一个已经不存在的虚拟环境&#xff0c;可选择手动将其调换 在 Visual Studio Code (VSCode) 中选择 Python 虚拟环境的步骤如下&#xff1a; 确保安装了 Python 插件&#xff1a;首先&#xff0c;你需要确保已经安装了适用于 VSCode 的 Python 插件。你…...

编程日记 2026/3/30 18:32:32

微信小程序 - 条件渲染（wx:if、hidden）与列表渲染（wx:for）

一、条件渲染概述 条件渲染用于根据特定条件决定是否渲染某部分内容 微信小程序提供了两种方式实现条件渲染&#xff0c;分别是 wx:if、hidden 二、条件渲染 1、wx:if &#xff08;1&#xff09;基本介绍 wx:if 根据 condition 的真假决定是否渲染该组件及其子组件 condit…...

编程日记 2025/8/11 21:30:08

【STL】4.＜list＞

list 前言list容器一.list初始化二.常用函数三.排序 总结 前言 stl系列主要讲述有关stl的文章&#xff0c;使用STL可以大大提高程序开发的效率和代码的可维护性&#xff0c;且在算法比赛中&#xff0c;STL可以帮助我们更方便地实现各种算法。提高我们的效率。 list容器 要使用…...

编程日记 2026/2/19 2:08:34

华为AP 4050DN-HD的FIT AP模式改为FAT AP，家用FAT基本配置

在某鱼买了两台华为AP 4050DN-HD , AP是二手的 , 在AC上上过线 , 所以就不能开机自选为FIP模式了 我没有AC无线控制器 , 就是买一个自己玩 , AP又是FIT瘦AP模式 ,所以我就想把AP的瘦AP模式改为FAT胖AP模式 1. 准备工作 1.1下载好对应软件&#xff0c;进入到 企业业务网站去下…...

编程日记 2026/3/12 6:21:52

vue 设置生产 开发 测试环境

在 Vue.js 中&#xff0c;可以通过配置不同的环境变量来区分生产、开发和测试环境的请求。一般情况下&#xff0c;我们使用 webpack 或 Vite 进行构建&#xff0c;它们都支持环境变量的配置。 以下是如何在 Vue 项目中配置不同环境的请求&#xff1a; 1. 配置 .env 文件 在项…...

编程日记 2026/2/18 3:02:43

vue3+ts+uniapp+unibest 微信小程序（第二篇）—— 图文详解自定义背景图页面布局、普通页面布局、分页表单页面布局

文章目录 简介一、自定义背景图布局1.1 效果预览1.2 实现思路1.3 custom-page 组件全量代码1.4 页面使用 二、普通页面布局2.1 效果预览2.2 实现思路2.3 公共样式部分2.4 页面使用 三、分页表单页面布局3.1 效果预览3.2 实现思路3.3 页面代码 简介 开发工具&#xff1a;VsCode…...

编程日记 2026/3/7 19:01:39

虚拟机缩放比例问题处理

上班打开虚拟机的样子。 最开始判断可能是vmtools 异常重启安装后发现没有效果 通过 xrandr 功能查询显示器信息获取显示器名 设置显示器 同时设置分辨率 也可以同时设置刷新率 注意下图中设置的关键字...

编程日记 2026/3/18 19:40:52

bean的管理-03.第三方bean

一.第三方bean的定义 对于我们自己定义的类&#xff0c;如果想要将其注入到IOC容器当中&#xff0c;可以使用Component&#xff0c;Controller&#xff0c;Service&#xff0c;Repository注解。但是对于第三方的类来说&#xff0c;并不能使用以上注解来定义&#xff0c;因此我…...

编程日记 2026/2/15 8:18:53

【Python 入门基础】—— 人工智能“超级引擎”，AI界的“瑞士军刀”，

欢迎来到ZyyOvO的博客✨&#xff0c;一个关于探索技术的角落&#xff0c;记录学习的点滴&#x1f4d6;&#xff0c;分享实用的技巧&#x1f6e0;️&#xff0c;偶尔还有一些奇思妙想&#x1f4a1; 本文由ZyyOvO原创✍️&#xff0c;感谢支持❤️&#xff01;请尊重原创&#x1…...

编程日记 2026/3/14 11:42:12

DeepSeek-R1-Zero：基于基础模型的强化学习

注&#xff1a;此文章内容均节选自充电了么创始人&#xff0c;CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》&#xff08;人工智能科学与技术丛书&#xff09;【陈敬雷编著】【清华大学出版社】 文章目录 DeepSeek大模型技术系列四DeepSeek大模型技术系列四》DeepSeek-…...

编程日记 2026/3/12 4:33:36

(dp 买入股票的最佳时机）leetcode 121

题目 题解的dp数组 0列是负数&#xff0c;这里我改成正数不再相加而是相减获取利润 class Solution { public:int maxProfit(vector<int>& prices) {int nprices.size();vector<vector<int>>dp(n,vector<int>(2));dp[0][0]prices[0];dp[0][1]0;//0…...

编程日记 2026/3/12 16:44:44

由 Mybatis 源码畅谈软件设计（三）：简单查询 SQL 执行流程

大家好&#xff0c;我是 方圆。SQL 查询是 Mybatis 中的核心流程&#xff0c;本节我们来介绍简单 SQL 的执行流程&#xff0c;过程会比较长&#xff0c;期间会认识很多重要的组件&#xff0c;比如 SqlSession、四大处理器&#xff08;Executor、StatementHandler、ParameterHan…...

编程日记 2026/4/2 17:47:01

项目实践 之 pdf简历的解析和填充（若依+vue3）

文章目录 环境背景最终效果前端讲解左侧模块解析右侧上传模块解析前端步骤 后端讲解代码前端 环境背景 若依前后端分离框架 vue最后边附有代码哦 最终效果 前端讲解 左侧模块解析 1、左侧表单使用el-form 注意&#xff1a; 1、prop出现的字段&#xff0c;需要保证是该类所…...

编程日记 2026/3/10 1:54:13