Tailwind CSS Generator

Tailwind CSS 网格生成器

本页面提供了一个 Tailwind CSS 网格生成器工具，可以轻松创建自定义网格布局。

How to Use Tailwind CSS Grid Generator

Choose your desired start and end colors using the color pickers.
Select the gradient direction from the dropdown menu.
Preview your gradient in the box at the top.
Copy the generated Tailwind CSS class by clicking the copy button.
Paste the copied class into your HTML element's class attribute.

Columns: 3

Rows: 3

Gap: 4

Preview

1

2

3

4

5

6

7

8

9

Generated Tailwind CSS Class

grid grid-cols-1 grid-rows-3 sm:grid-cols-2 md:grid-cols-3 gap-4