Create project
Start by creating a new Gatsby project using create-gatsby
:
npm init gatsby
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
Edit tsconfig.json file
Add the following code to the tsconfig.json
file to resolve paths:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
Create gatsby-node.ts file
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"),
},
},
});
};
Follow the Steps
Follow the steps and install dependencies and copy paste code of the components
Add Utils file
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
That's it
You can now start adding components to your project.