Tailwind CSS 示例

卡片组件

在这里，我们展示了一个经典的卡片组件。它使用了 Tailwind CSS 的工具类来快速构建响应式布局，包含了阴影、圆角和一些内边距等样式，使其看起来更具层次感和现代感。

使用 Tailwind CSS 可以快速构建响应式卡片组件，具备良好的默认样式和扩展性。

这里展示了几个不同状态的按钮，包括默认状态、禁用状态和成功/警告按钮。所有按钮都使用了 Tailwind CSS 的交互状态类，例如 hover 和 disabled，以实现不同的视觉效果。

提示框是通知用户的重要信息或警告的组件。通过 Tailwind CSS 的背景色和边框样式，可以轻松制作不同类型的提示框。

信息提示：

这是一个信息提示框，适用于展示普通的通知信息。

警告提示：

这是一个警告提示框，适用于展示重要警告信息。

错误提示：

这是一个错误提示框，适用于展示错误信息或需要修正的操作。

标签组件可以用来展示内容的分类或标签，帮助用户快速了解内容的类型或主题。

标签 1标签 2标签 3

响应式布局网格可以根据不同屏幕尺寸自动调整显示方式。通过使用 Tailwind CSS 的 grid 类，你可以方便地创建灵活的布局，适应桌面、平板和手机等不同设备。

区块 1

区块 2

区块 3

区块 4

区块 5

区块 6

区块 7

Tailwind CSS 的 Typography 插件（@tailwindcss/typography）为你提供了精美的排版样式，特别适用于 Markdown 内容。使用 prose 类，你可以让文本、列表、引用和代码块等内容呈现出优雅的样式。

使用 Tailwind 的 Typography 插件，可以让原本没有样式的 Markdown 内容拥有很棒的默认排版。

做你该做的事，其他的交给时间 ~

你可以插入一段内联代码：

比如 npm install tailwindcss

👉 更多内容请访问 Tailwind 官方文档。