超快猛入门

先了解一下 Tailwindcss，可以看中文网站首页 https://www.tailwindcss.cn/ (首页翻译完成度比较高，后面的文档什么的就不要看了 October 19, 2025 )

pnpm add -D tailwindcss @tailwindcss/vite

https://tailwindcss.com/docs/installation/using-vite

小技巧

@apply 牺牲一点原子性，换得一点复用性

/* styles/components.css */
.btn-primary {
  @apply px-4 py-2 rounded-xl bg-blue-500
  hover:bg-blue-600 text-white font-semibold
  shadow-md transition-all duration-200;
}

const baseButton =
  "px-4 py-2 rounded-xl text-white font-semibold" +
  "shadow-md transition-all duration-200";
const blueButton = `${baseButton} bg-blue-500 hover:bg-blue-600`;

<button className={blueButton}>Click</button>;

掌握一些常见的 Class

先学这些然后就可以上手做页面了：

Tailwind Layout

Tailwind Cheatsheet

Gray-Matter Test

Documents

Colors & https://tailscan.com/colors

Goodies

https://lucide.dev/icons/