---
title: "Tailwind CSS进阶：定制化与扩展 - Carl Wang"
description: 本文介绍tailwindcss的高级用法，包括tailwind-merge、tailwind-variants等工具的使用，以及一些优秀的UI框架推荐。
canonical_url: "https://carlwang.com/zh/posts/tailwind-advanced-customization"
last_updated: "2025-03-27T00:00:00.000Z"
meta:
  "og:description": 本文介绍tailwindcss的高级用法，包括tailwind-merge、tailwind-variants等工具的使用，以及一些优秀的UI框架推荐。
  "og:image": "https://carlwang.com/og-image.png"
  "og:image:alt": "Carl Wang — notes on software, products, and ecommerce."
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Tailwind CSS进阶：定制化与扩展 - Carl Wang"
  "twitter:image": "https://carlwang.com/og-image.png"
---

> Index of every page on this site: [llms.txt](https://carlwang.com/llms.txt)

[札记](https://carlwang.com/zh/topics/learning)·2025年3月27日

# **Tailwind CSS进阶：定制化与扩展**

本文介绍tailwindcss的高级用法，包括tailwind-merge、tailwind-variants等工具的使用，以及一些优秀的UI框架推荐。

本文将介绍一些tailwindcss的高级用法。

## Tailwind Merge

[**https://github.com/dcastil/tailwind-merge**](https://github.com/dcastil/tailwind-merge)

## Tailwind Variants

[**https://github.com/heroui-inc/tailwind-variants**](https://github.com/heroui-inc/tailwind-variants) [**https://tailwind-variants.org/**](https://tailwind-variants.org/)

## UI Frameworks

- [**https://www.heroui.com/**](https://www.heroui.com/)
- [**https://ui.nuxt.com/**](https://ui.nuxt.com/)

[MacOS 常用命令](https://carlwang.com/zh/posts/macos-terminal-commands) [Tailwind CSS间距（Spacing）实现原理](https://carlwang.com/zh/posts/tailwind-spacing)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://carlwang.com/zh#website","@type":"WebSite","description":"Carl Wang 关于软件、产品与电子商务的文章与笔记。","inLanguage":"zh-Hans","name":"Carl Wang","url":"https://carlwang.com/zh","publisher":{"@id":"https://carlwang.com/#identity"},"translationOfWork":{"@id":"https://carlwang.com/#website"}},{"@id":"https://carlwang.com/zh/posts/tailwind-advanced-customization#webpage","@type":"WebPage","dateModified":"2025-03-27T00:00:00.000Z","datePublished":"2025-03-27T00:00:00.000Z","description":"本文介绍tailwindcss的高级用法，包括tailwind-merge、tailwind-variants等工具的使用，以及一些优秀的UI框架推荐。","name":"Tailwind CSS进阶：定制化与扩展","url":"https://carlwang.com/zh/posts/tailwind-advanced-customization","breadcrumb":{"@id":"https://carlwang.com/zh/posts/tailwind-advanced-customization#breadcrumb"},"isPartOf":{"@id":"https://carlwang.com/zh#website"},"potentialAction":[{"@type":"ReadAction","target":["https://carlwang.com/zh/posts/tailwind-advanced-customization"]}]},{"@id":"https://carlwang.com/#identity","@type":"Person","name":"Carl Wang","url":"https://carlwang.com","sameAs":["https://x.com/carlwangx","https://github.com/carlwangx"]},{"@id":"https://carlwang.com/zh/posts/tailwind-advanced-customization#article","dateModified":"2025-03-27T00:00:00.000Z","datePublished":"2025-03-27T00:00:00.000Z","description":"本文介绍tailwindcss的高级用法，包括tailwind-merge、tailwind-variants等工具的使用，以及一些优秀的UI框架推荐。","headline":"Tailwind CSS进阶：定制化与扩展","inLanguage":"zh-Hans","thumbnailUrl":"https://carlwang.com/og-image.png","url":"https://carlwang.com/zh/posts/tailwind-advanced-customization","@type":["Article","BlogPosting"],"author":{"@id":"https://carlwang.com/#identity"},"image":{"@id":"https://carlwang.com/#/schema/image/1"},"isPartOf":{"@id":"https://carlwang.com/zh/posts/tailwind-advanced-customization#webpage"},"mainEntityOfPage":{"@id":"https://carlwang.com/zh/posts/tailwind-advanced-customization#webpage"},"publisher":{"@id":"https://carlwang.com/#identity"}},{"@id":"https://carlwang.com/zh/posts/tailwind-advanced-customization#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"首页","item":"https://carlwang.com/zh","position":1},{"@type":"ListItem","name":"札记","item":"https://carlwang.com/zh/topics/learning","position":2},{"@type":"ListItem","name":"Tailwind CSS进阶：定制化与扩展","position":3}]},{"@id":"https://carlwang.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://carlwang.com/og-image.png","inLanguage":"zh-Hans","url":"https://carlwang.com/og-image.png"}]}
```

## Sitemap

See the full [sitemap](https://carlwang.com/sitemap.md) for all pages.