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

Tailwind CSS 开发入门：掌握基础语法要点

article 2026/1/2 22:52:13

在前端开发中，Tailwind CSS 以原子化设计和实用类系统，构建精美页面的得力工具，摒弃传统 CSS 繁琐写法。掌握其基础语法是熟练运用它的关键，下面将详细介绍核心基础语法。

一、核心基础语法

1. 颜色类

Tailwind CSS 提供了丰富的颜色类，用于设置元素的背景色、文本颜色等。

语法格式

{属性}-{颜色}-{深浅度}

示例
  • 文本颜色：
<p class="text-red-500">这是红色文本</p>

在上述代码里，text 表示设置文本颜色，red 是颜色名称，500 代表颜色的深浅度。

  • 背景颜色：
<div class="bg-blue-300">这是浅蓝色背景</div>

这里的 bg 意味着设置背景颜色，blue 是颜色，300 是颜色深浅度。

2. 间距类

间距类用于设置元素的内边距（padding）和外边距（margin）。

语法格式

{属性简写}{方向}-{尺寸}

示例
  • 内边距：
<div class="p-4">这是一个有内边距的元素</div>

p 代表 padding，4 是预设的尺寸值。

<div class="pt-6">这是一个顶部有内边距的元素</div>

pt 表示 padding-top，6 是尺寸值。

  • 外边距：
<div class="mb-8">这是一个底部有外边距的元素</div>

mb 指的是 margin-bottom，8 是尺寸值。

3. 字体类

字体类用于设置字体的大小、粗细、对齐方式等。

示例
  • 字体大小：
<h1 class="text-4xl">这是一个大标题</h1>

text-4xl 把字体大小设为四倍大字体。

  • 字体粗细：
<p class="font-bold">这是加粗的文本</p>

font-bold 让文本字体加粗。

  • 文本对齐：
<div class="text-center">这是居中对齐的文本</div>

text-center 使文本居中对齐。

4. 布局类

布局类可用来设置元素的显示方式、浮动、定位等。

示例
  • 显示方式：
<div class="flex">这是一个弹性布局的元素</div>

flex 把元素的显示方式设为弹性布局。

  • 浮动：
<div class="float-left">这是向左浮动的元素</div>

float-left 让元素向左浮动。

  • 定位：
<div class="fixed top-0 left-0">这是固定定位在左上角的元素</div>

fixed 表示固定定位，top-0 和 left-0 把元素定位到左上角。

5. 响应式前缀

Tailwind CSS 支持响应式设计，通过添加响应式前缀，可以在不同屏幕尺寸下应用不同的样式。

常用前缀
  • sm:：小屏幕（≥640px）
  • md:：中等屏幕（≥768px）
  • lg:：大屏幕（≥1024px）
  • xl:：特大屏幕（≥1280px）
示例
<div class="bg-red-500 sm:bg-blue-500 md:bg-green-500">小屏幕时背景为红色，中等屏幕为蓝色，大屏幕为绿色
</div>

6. 状态变体

状态变体用于在元素处于特定状态时应用不同的样式，如鼠标悬停、聚焦等。

常用变体
  • hover:：鼠标悬停状态
  • focus:：元素获得焦点状态
示例
<a href="#" class="text-blue-500 hover:text-red-500">鼠标悬停时文本颜色变红
</a>

在这段代码中，正常状态下文本颜色是蓝色，鼠标悬停时变为红色。

二、实战示例：基础产品展示页面

1. 构建页面框架

 使用 Kooboo 在线创建网站，选择新建空白站点 -> 设计页面，构建大致的页面框架

2. 引入 Tailwind CSS

在<head></head>中引入 Tailwind CSS 框架、其运行时脚本以及 Font Awesome 图标库，从而让你能够使用 Tailwind CSS 的实用类来快速构建页面样式，利用 Font Awesome 图标库来添加丰富的图标，并且可以通过运行时脚本对 Tailwind CSS 进行动态配置。

// 通过 link 标签从 CDN（内容分发网络）引入了 Tailwind CSS 框架的最小化版本
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">// 使用 script 标签从 CDN 引入了 Tailwind CSS 的运行时脚本。
// 这个脚本允许你在项目里动态配置 Tailwind CSS，例如通过 JavaScript 来修改 Tailwind 的配置、启用或禁用某些功能等。
<script src="https://cdn.tailwindcss.com"></script>// 通过 link 标签从 CDN 引入了 Font Awesome 图标库的最小化版本。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">

3. 设置导航栏区域

<!-- 导航栏 --><nav class="bg-gray-800 text-white py-4 border-b-2 border-gray-600"><div class="container mx-auto px-4 flex justify-between items-center"><a href="#" class="text-2xl font-bold hover:text-gray-300">产品展示</a><div class="space-x-4"><a href="#" class="hover:text-gray-300 hover:border-b-2 hover:border-white">首页</a><a href="#" class="hover:text-gray-300 hover:border-b-2 hover:border-white">产品</a><a href="#" class="hover:text-gray-300 hover:border-b-2 hover:border-white">关于我们</a></div></div></nav>
  • 整体容器：
    • <nav> 标签是 HTML5 中用于定义导航链接的标签。
    • bg-gray-800 为导航栏设置了深灰色的背景颜色。
    • text-white 让导航栏内的文字颜色为白色。
    • py-4 给导航栏添加了垂直方向的内边距。
    • border-b-2 border-gray-600 为导航栏底部添加了一条 2px 宽的深灰色边框。

 4. 引导区域

 <!-- 引导区域 --><section class="bg-gray-800 text-white py-16 flex-grow flex items-center justify-center"><div class="container mx-auto px-4 text-center"><h1 class="text-4xl font-bold mb-4">优质产品，满足您的需求</h1><p class="text-lg mb-8">我们提供多种高品质的产品，为您的生活带来便利。</p><a href="#" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md">查看所有产品</a></div></section>
  • 整体容器：
    • <section> 标签用于定义页面中的一个章节，这里作为英雄区域。
    • bg-gray-800 为英雄区域设置了深灰色背景。
    • text-white 让文字颜色为白色。
    • py-16 为英雄区域添加了较大的垂直内边距。
    • flex-grow 使该区域占据剩余的可用空间。
    • flex items-center justify-center 让内容在垂直和水平方向上都居中显示。

5. 产品列表区域

<!-- 产品列表 --><main class="container mx-auto px-4 py-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 hidden md:block"><div class="bg-white p-6 rounded-lg shadow hover:shadow-xl transition-shadow"><img src="https://picsum.photos/200/200" alt="产品图片" class="w-full h-48 object-cover mb-4"><h2 class="text-xl font-bold mb-2">产品名称 1</h2><p class="text-gray-600 mb-4">这是产品 1 的描述信息，它具有很多优秀的特性。</p><a href="#" class="text-blue-500 hover:underline">查看详情</a></div><div class="bg-white p-6 rounded-lg shadow hover:shadow-xl transition-shadow"><img src="https://picsum.photos/200/200" alt="产品图片" class="w-full h-48 object-cover mb-4"><h2 class="text-xl font-bold mb-2">产品名称 2</h2><p class="text-gray-600 mb-4">这是产品 2 的描述信息，功能十分强大。</p><a href="#" class="text-blue-500 hover:underline">查看详情</a></div><div class="bg-white p-6 rounded-lg shadow hover:shadow-xl transition-shadow"><img src="https://picsum.photos/200/200" alt="产品图片" class="w-full h-48 object-cover mb-4"><h2 class="text-xl font-bold mb-2">产品名称 3</h2><p class="text-gray-600 mb-4">这是产品 3 的描述信息，值得拥有。</p><a href="#" class="text-blue-500 hover:underline">查看详情</a></div></main>
  • 整体容器：
    • <main> 标签用于定义文档的主要内容。
    • container mx-auto px-4 让产品列表水平居中并添加水平内边距。
    • py-4 为产品列表添加了垂直内边距。
    • grid 使容器成为网格布局容器。
    • grid-cols-1 md:grid-cols-2 lg:grid-cols-3 表示在小屏幕下为 1 列，中等屏幕下为 2 列，大屏幕下为 3 列。
    • gap-6 为网格项之间添加了间距。
    • hidden md:block 表示在小屏幕下隐藏，中等及以上屏幕显示。

6. 页脚

<!-- 页脚 --><footer class="bg-gray-800 text-white py-4"><div class="container mx-auto px-4 text-center"><p>&copy; 2025 产品展示版权所有</p><div class="mt-2 space-x-4"><a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a><a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a><a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a></div></div></footer>
  • 整体容器：
    • <footer> 标签用于定义文档的页脚。
    • bg-gray-800 为页脚设置深灰色背景。
    • text-white 让页脚文字颜色为白色。
    • py-4 为页脚添加垂直内边距。

最终显示效果：

相关文章：

Tailwind CSS 开发入门：掌握基础语法要点

在前端开发中&#xff0c;Tailwind CSS 以原子化设计和实用类系统&#xff0c;构建精美页面的得力工具&#xff0c;摒弃传统 CSS 繁琐写法。掌握其基础语法是熟练运用它的关键&#xff0c;下面将详细介绍核心基础语法。 一、核心基础语法 1. 颜色类 Tailwind CSS 提供了丰富…...

编程日记 2025/12/27 17:15:49

Java八股 深入理解Spring的AOP 面向切面编程 底层 保姆级教程 手写例子

目录 概念 AOP 术语 1. 连接点&#xff08;Jointpoint&#xff09;&#xff1a; 2. 切入点&#xff08;Pointcut&#xff09;&#xff1a; 3. 通知&#xff08;Advice&#xff09;&#xff1a; 4. 方面/切面&#xff08;Aspect&#xff09;&#xff1a; 5. 引入&#xff…...

编程日记 2025/12/27 18:23:45

保生产 促安全 迎国庆

2021年的国庆节已经临近&#xff0c;与此同时陕化也迎来了祖国母亲的第七十二个生日&#xff0c;在这个普天同庆的日子里&#xff0c;陕化BDO分厂丁二醇单元化工一组的员工依然会坚守在工作的一线&#xff0c;为“保生产 促安全 迎国庆”护航掌舵&#xff0c;化工一组一直秉持着…...

编程日记 2025/12/10 12:31:05

【Flutter DevTools】性能优化的瑞士军刀

一、性能分析&#xff1a;帧率与资源监控 1.1 帧率监控&#xff08;Performance面板&#xff09; 通过Performance面板可实时捕获应用的渲染流水线数据。开发者点击"Record"按钮后&#xff0c;DevTools会以时间轴形式展示每一帧的构建、布局、绘制耗时。当帧率低于…...

编程日记 2025/12/11 18:30:30

C++std::map

1. 概述​​ ​​定义​​&#xff1a;std::map 是C标准模板库&#xff08;STL&#xff09;中的关联容器&#xff0c;以键值对&#xff08;key-value pairs&#xff09;形式存储元素&#xff0c;支持快速查找和有序访问。 ​​- 头文件​​&#xff1a;#include ​​底层实现​…...

编程日记 2025/12/27 2:15:15

dispaly: inline-flex 和 display: flex 的区别

display: inline-flex 和 display: flex 都是 CSS 中用于创建弹性盒子布局&#xff08;Flexbox&#xff09;的属性值&#xff0c;但它们之间有一些关键的区别&#xff0c;主要体现在元素如何在页面上被渲染和它们对周围元素的影响。 主要区别 1&#xff0c;块级 vs 行内块级 d…...

编程日记 2025/12/27 7:08:38

性能比拼: Elixir vs Go(第二轮)

本内容是对知名性能评测博主 Anton Putra Elixir vs Go (Golang) Performance Benchmark (Round 2) 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准 这是第二轮关于 Elixir 和 Go 的对比测试。我收到了一份来自 Elixir 创作者的 Pull Request &#xff0c;并且我认为…...

编程日记 2025/12/29 0:22:37

鸿蒙NEXT开发键值型数据工具类（ArkTs）

import { AppUtil } from ./AppUtil; import { distributedKVStore } from kit.ArkData; import { BusinessError } from kit.BasicServicesKit;/*** 键值型数据库工具类* author CSDN-鸿蒙布道师* since 2025/04/18*/ export class KvUtil {private static kvStore: distribut…...

编程日记 2025/12/19 5:24:12

【数字图像处理】立体视觉信息提取

双目立体视觉原理 设一个为参考平面&#xff0c;一个为目标平面。增加了一个摄像头后&#xff0c;P与Q在目标面T上有分别的成像点 双目立体视觉&#xff1a;从两个不同的位置观察同一物体&#xff0c;用三角测量原理计算摄像机到该物体的距离的 方法 原理&#xff1a;三角测量…...

编程日记 2025/12/27 12:57:42

Linux ssh免密登陆设置

使用 ssh-copy-id 命令来设置 SSH 免密登录&#xff0c;并确保所有相关文件和目录权限正确设置&#xff0c;可以按照以下步骤进行&#xff1a; 步骤 1&#xff1a;在源服务器&#xff08;198.120.1.109&#xff09;生成 SSH 密钥对 如果还没有生成 SSH 密钥对&#xff0c;首先…...

编程日记 2025/12/10 23:44:57

CentOS7执行yum命令报错 Could not retrieve mirrorlist http://mirrorlist.centos.org

CentOS7执行yum命令报错 引更新yum源备份原有源创建新的源文件清理并重建缓存 引 CentOS 7 系统无法连接到 CentOS 的官方镜像站点。这通常是由于网络问题或 CentOS 7 已停止维护导致的&#xff08;2024年6月30日后 CentOS 7 已进入 EOL&#xff09; 报错明细&#xff1a; 已…...

编程日记 2025/12/11 0:38:22

【漏洞复现】Struts2系列

【漏洞复现】Struts2系列 1. 了解Struts21. Struts2 S2-061 RCE &#xff08;CVE-2020-17530&#xff09;1. 漏洞描述2. 影响版本3. 复现过程 1. 了解Struts2 Apache Struts2是一个基于MVC设计模式的Web应用框架&#xff0c;会对某些标签属性&#xff08;比如 id&#xff09;的…...

编程日记 2025/12/30 14:30:12

Sentinel源码—5.FlowSlot借鉴Guava的限流算法二

大纲 1.Guava提供的RateLimiter限流使用示例 2.Guava提供的RateLimiter简介与设计 3.继承RateLimiter的SmoothBursty源码 4.继承RateLimiter的SmoothWarmingUp源码 3.继承RateLimiter的SmoothBursty源码 (1)SmoothBursty的初始化流程 (2)SmoothBursty的初始化完成后的变量…...

编程日记 2025/12/28 12:32:16

下载electron 22.3.27 源码错误集锦

下载步骤同 electron源码下载及编译_electron源码编译-CSDN博客 问题1 从github 下载 dugite超时&#xff0c;原因没有找到 Validation failed. Expected 8ea2d0d3c9d9e4615069913207371ffe892dc10fb93975972f2f6e668f2e3b3a but got e3b0c44298fc1c149afbf4c8996fb92427ae41e…...

编程日记 2025/12/22 17:34:35

安卓的桌面 launcher是什么

安卓的桌面Launcher是一种安卓应用程序&#xff0c;它主要负责管理和展示手机主屏幕的界面以及相关功能&#xff0c;为用户提供与设备交互的主要入口。以下是其详细介绍&#xff1a; 功能 主屏幕管理&#xff1a;用户可以在主屏幕上添加、删除和排列各种应用程序图标、小部件…...

编程日记 2025/12/11 1:08:40

基础数学知识-线性代数

1. 矩阵相乘 c i j = a i k ∗ b k j c_{ij} = a_{ik} * b_{kj} cij​=aik​∗bkj​ 1. 范数 1. 向量的范数 任意一组向量设为 x ⃗ = ( x 1 , x 2 , . . . , x N ) \vec{x}=(x_1,x_2,...,x_N) x =(x1​,x2​,...,xN​) 如下： 向量的1范数： 向量的各个元素的绝对值之和∥ …...

编程日记 2025/12/10 13:39:21

kubeadm极速部署Kubernetes 1.26.X 版本集群

1.1 Kubernetes 1.26版本集群部署环境准备 1.1.1 主机操作系统说明 序号操作系统及版本备注1CentOS7u9 1.1.2 主机硬件配置说明 需求CPU内存硬盘角色主机名值4C8G100GBmastermaster01值4C8G100GBworker(node)node01值4C8G100GBworker(node)node02 1.1.3 主机配置 1.1.3.1…...

编程日记 2025/12/10 14:16:35

重构未来智能：Anthropic 解码Agent设计哲学三重奏

第一章 智能体进化论&#xff1a;从工具到自主体的认知跃迁 1.1 LLM应用范式演进图谱 阶段技术形态应用特征代表场景初级阶段单功能模型硬编码规则执行文本摘要/分类进阶阶段工作流编排多模型协同调度跨语言翻译流水线高级阶段自主智能体动态决策交互编程调试/客服对话 1.1.…...

编程日记 2025/12/30 22:39:05

互联网大厂Java面试：微服务与分布式系统挑战

互联网大厂Java面试&#xff1a;微服务与分布式系统挑战 在互联网的大潮中&#xff0c;无数程序员怀揣着梦想&#xff0c;希望能在一线大厂找到自己的位置。今天的故事主角是马飞机&#xff0c;一位充满幽默感但技术略显水货的程序员。他来到了一家知名互联网公司参加Java开发…...

编程日记 2025/12/11 1:56:44

Gradle与Idea整合

文章目录 1. Groovy 简介2. Groovy 安装[非必须]3. 在idea中创建java工程 1. Groovy 简介 在某种程度上&#xff0c;Groovy可以被视为Java的一种脚本化改良版,Groovy也是运行在JVM上&#xff0c;它可以很好地与Java代码及其相关库进行交互操作。它是一种成熟的面向对象编程语言…...

编程日记 2025/12/28 11:13:17

基于springboot+vue的校园二手物品交易平台

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…...

编程日记 2025/12/28 5:11:02

PoCL环境搭建

PoCL环境搭建 **一.关键功能与优势****二.设计目的****三.测试步骤**1.创建容器2.安装依赖3.编译安装pocl4.运行OpenCL测试程序 Portable Computing Language (PoCL) 简介 Portable Computing Language (PoCL) 是一个开源的、符合标准的异构计算框架&#xff0c;旨在为 OpenCL…...

编程日记 2025/6/18 15:33:42

【前端Skill】点击目标元素定位跳转IDE中的源代码

参考&#xff1a;https://juejin.cn/post/7326002010084311079 快手开源项目&#xff1a; https://github.com/zh-lx/code-inspector 目前在umi项目中用到 记录一下umi项目中如何使用 安装 npm i code-inspector-plugin -D --registryhttps://registry.npmmirror.com/ 配…...

编程日记 2025/12/11 0:00:02

OpenCV图像上加数字水印示例

OpenCV计算机视觉开发实践&#xff1a;基于Qt C - 商品搜索 - 京东 14.1 基本概念 当今&#xff0c;生成式人工智能&#xff08;Artificial Intelligence Generated Content&#xff0c;AIGC&#xff09;的火爆引燃了数字水印&#xff0c;说实话数字水印并不是一项新的技术&…...

编程日记 2026/1/1 10:07:13

Python爬虫从入门到实战详细版教程Char01：爬虫基础与核心技术

1.1 什么是网络爬虫？ 1.1.1 定义与分类 网络爬虫：互联网世界的“信息捕手” 网络爬虫（Web Crawler），又称网络蜘蛛或网络机器人，是一种通过预设规则自动访问网页、提取数据的程序系统。从技术视角看，其核心任务是通过模拟浏览器行为向目标服务器发起请求，解析网页内容…...

编程日记 2025/12/28 22:14:06

使用blob文件流

1.后端 GetMapping(value "/static/**")public void view(HttpServletRequest request, HttpServletResponse response) {// ISO-8859-1 > UTF-8 进行编码转换String imgPath extractPathFromPattern(request);if(oConvertUtils.isEmpty(imgPath) || imgPath&q…...

编程日记 2025/12/22 6:32:31

Day-1 漏洞攻击实战

实训任务1 漏洞攻击实战一 使用 御剑 得到网站后台地址 数据库登录与日志配置​​ 使用默认密码 root:root 登录phpMyAdmin&#xff0c;执行 SHOW VARIABLES LIKE general% 查看日志状态。 开启日志功能&#xff1a;set global general_log "ON";&#xff08;配图&…...

编程日记 2025/12/31 11:02:09

AOSP Android14 Launcher3——RecentsView最近任务数据加载

最近任务是Launcher中的一个重要的功能&#xff0c;显示用户最近使用的应用&#xff0c;并可以快速切换到其中的应用&#xff1b;用户可以通过底部上滑停顿进入最近任务&#xff0c;也可以在第三方应用底部上滑进最近任务。 这两种场景之前的博客也介绍过&#xff0c;本文就不…...

编程日记 2025/12/29 14:21:24

基于深度学习的校园食堂菜品智能结算系统

校园食堂菜品智能结算系统说明文档 1. 系统概述 本系统是一款基于YOLO深度学习算法的校园食堂菜品智能结算平台&#xff0c;旨在通过计算机视觉技术实现食堂菜品的自动识别与结算&#xff0c;提高结算效率&#xff0c;减少人工成本&#xff0c;优化用户体验。系统采用PyQt5框…...

编程日记 2025/12/28 12:28:23

【UniApp】Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass

从 HBuilderX 4.56 &#xff0c;vue2 项目也将默认使用 dart-sass 预编译器。 vue2开发者sass预处理注意&#xff1a; sass的预处理器&#xff0c;早年使用node-sass&#xff0c;也就是vue2最初默认的编译器。 sass官方推出了dart-sass来替代。node-sass已经停维很久了。 另…...

编程日记 2025/12/28 18:17:45