注意： 本指南适用于使用 Tailwind CSS v3 的 Gatsby。对于新项目，我们推荐使用支持 Tailwind CSS v4 的其他框架之一。
创建项目
🌐 Create project
首先使用 create-gatsby 创建一个新的 Gatsby 项目：
🌐 Start by creating a new Gatsby project using create-gatsby:
npm init gatsby配置你的 Gatsby 项目以使用 TypeScript 和 Tailwind CSS
🌐 Configure your Gatsby project to use TypeScript and Tailwind CSS
你将被问到几个问题来配置你的项目：
🌐 You will be asked a few questions to configure your project:
✔ What would you like to call your site?
· your-app-name
✔ What would you like to name the folder where your site will be created?
· your-app-name
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· Choose whatever you want
✔ Would you like to install a styling system?
· Tailwind CSS
✔ Would you like to install additional features with other plugins?
· Choose whatever you want
✔ Shall we do this? (Y/n) · Yes编辑 tsconfig.json 文件
🌐 Edit tsconfig.json file
将以下代码添加到 tsconfig.json 文件以解析路径：
🌐 Add the following code to the tsconfig.json file to resolve paths:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}创建 gatsby-node.ts 文件
🌐 Create gatsby-node.ts file
如果你的项目根目录中尚不存在 gatsby-node.ts 文件，请创建一个，并将下面的代码添加到 gatsby-node 文件中，以便你的应用可以解析路径：
🌐 Create a gatsby-node.ts file at the root of your project if it doesn’t already exist, and add the code below to the gatsby-node file so your app can resolve paths:
import * as path from "path"
export const onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
alias: {
"@/components": path.resolve(__dirname, "src/components"),
"@/lib/utils": path.resolve(__dirname, "src/lib/utils"),
},
},
})
}运行 CLI
🌐 Run the CLI
运行 shadcn init 命令来设置你的项目：
🌐 Run the shadcn init command to setup your project:
pnpm dlx shadcn@latest init
就是这样
🌐 That's it
你现在可以开始向你的项目添加组件。
🌐 You can now start adding components to your project.
pnpm dlx shadcn@latest add button
上面的命令将会把 Button 组件添加到你的项目中。然后你可以这样导入它：
🌐 The command above will add the Button component to your project. You can then import it like this:
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}