Dr.Tonks

春风若有怜花意,可否许我再少年

公告1.2

3D数据大屏在线演示平台已经上线！

Learn More

778 字

4 分钟

Tailwind CSS初步学习

2025-10-10

前端

Tailwind

/

CSS

Tailwind CSS 初步学习#

什么是 Tailwind CSS#

Tailwind CSS 是一个功能优先的前端CSS框架，通过提供低级别的工具类来快速构建自定义设计。它回归了传统的行内样式的编写，这导致了一些问题，比如大幅降低了代码的可读性和复用性（尽管Tailwind CSS提供了一系列工具来解决这个问题，但是在类名属性里写@apply的方法无疑是封装再封装、套娃再套娃的下下策。）但是Tailwind CSS的学习是前端工作必不可少的一部分，因为~~写起来真的很爽~~ 现在AI Agent辅助工具横行（github copilot、cursor、Claude code…），这个样式库开发工具无疑是强大、便利的，也因此被大量的组件库收录和使用，这导致为了读懂和编辑某些组件库的代码，Tailwind CSS本身的学习需要被提上日程。

特点：

实用工具优先
高度可定制
响应式设计
无预设样式

核心概念#

1. 实用工具优先#

每个类都对应一个特定的 CSS 属性，通过组合类名来构建界面。

1
<!-- 传统 CSS -->
2
<div class="card"></div>
3

4
<!-- Tailwind CSS -->
5
<div class="bg-white rounded-lg shadow-md p-6"></div>

2. 响应式设计#

使用前缀来定义不同屏幕尺寸的样式。

1
<div class="w-full md:w-1/2 lg:w-1/3"></div>

常用工具类#

布局 (Layout)#

1
<div class="flex justify-center items-center">
2
  <div class="w-1/2 p-4 m-4"></div>
3
</div>

间距 (Spacing)#

m-4 - 外边距 1rem
p-4 - 内边距 1rem
mt-2 - 上外边距 0.5rem
px-4 - 水平内边距 1rem

颜色 (Colors)#

1
<div class="bg-blue-500 text-white border border-gray-300"></div>

排版 (Typography)#

1
<h1 class="text-3xl font-bold text-gray-800 text-center"></h1>
2
<p class="text-base text-gray-600 leading-relaxed"></p>

边框 (Borders)#

1
<div class="border border-gray-300 rounded-lg shadow-sm"></div>

背景 (Background)#

1
<div class="bg-gradient-to-r from-blue-400 to-purple-500"></div>

响应式设计#

断点前缀#

sm: - 640px+
md: - 768px+
lg: - 1024px+
xl: - 1280px+
2xl: - 1536px+

1
<div class="w-full md:w-1/2 lg:w-1/4"></div>
2
<div class="text-sm md:text-base lg:text-lg"></div>

状态变体#

交互状态#

1
<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300">
2
  点击我
3
</button>

表单状态#

1
<input class="border border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">

其他状态#

1
<div class="group hover:bg-gray-100">
2
  <p class="text-gray-600 group-hover:text-gray-900"></p>
3
</div>

自定义配置#

扩展主题#

1
module.exports = {
2
  theme: {
3
    extend: {
4
      colors: {
5
        'brand': {
6
          100: '#f7fafc',
7
          500: '#667eea',
8
          900: '#1a202c',
9
        }
10
      },
11
      spacing: {
12
        '72': '18rem',
13
        '84': '21rem',
14
      }
15
    },
16
  },
17
}

自定义工具类#

1
@layer utilities {
2
  .scroll-snap-none {
3
    scroll-snap-type: none;
4
  }
5
  .scroll-snap-x {
6
    scroll-snap-type: x mandatory;
7
  }
8
}

最佳实践#

1. 组件提取#

对于重复使用的样式组合，提取为组件：

1
<!-- 提取前 -->
2
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
3
  按钮
4
</button>
5

6
<!-- 提取后使用 @apply -->
7
<button class="btn-primary">
8
  按钮
9
</button>
10

11
<style>
12
.btn-primary {
13
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
14
}
15
</style>

2. 使用 PurgeCSS#

生产环境优化，移除未使用的 CSS：

1
module.exports = {
2
  purge: [
3
    './src/**/*.html',
4
    './src/**/*.vue',
5
    './src/**/*.jsx',
6
  ],
7
}

3. 保持可维护性#

避免过长的类名列表
使用有意义的组件名称
合理使用 @layer 指令

4. 性能优化技巧#

1
// 只启用需要的功能
2
module.exports = {
3
  corePlugins: {
4
    float: false,
5
    clear: false,
6
  }
7
}

实用技巧#

任意值#

使用方括号添加任意值：

1
<div class="top-[117px] w-[200px] bg-[#bada55]"></div>

深色模式#

1
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white"></div>

1
module.exports = {
2
  darkMode: 'class', // 或 'media'
3
}

当前博客的主题切换缺乏了一些过渡，然而不使用GASP的情况下实现丝滑切换比较困难，Element+的模式也有一定的缺陷，难以解决。

Tailwind CSS初步学习

https://blog.tonks.top/posts/tailwindcss/

作者

Dr.Tonks

发布于

2025-10-10

许可协议

CC BY-NC-SA 4.0

部分信息可能已经过时

多数据源贷款及风控平台Web管理端设计思路

多数据源贷款及风控平台后端模型设计思路