Go ahead and run this cmd: npx create-next-app@15.1.7 or npx create-next-app@latest
Initialize shadcn as neobrutalism is based on shadcn/ui, go ahead and run this cmd: npx shadcn@latest init
Install button from shadcn: npx shadcn@latest add button
Go to your page.tsx file, import the button we just now added
Apply this in the tailwind.config.js
import type { Config } from "tailwindcss";
import tailwindcssAnimate from "tailwindcss-animate";
export default {
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
main: "#88aaee",
overlay: "rgba(0,0,0,0.8)", // background color overlay for alert dialogs, modals, etc.
// light mode
bg: "#dfe5f2",
text: "#000",
border: "#000",
// dark mode
darkBg: "#272933",
darkText: "#eeefe9",
darkBorder: "#000",
secondaryBlack: "#212121", // opposite of plain white, not used pitch black because borders and box-shadows are that color
},
borderRadius: {
base: "5px",
},
boxShadow: {
light: "4px 4px 0px 0px #000",
dark: "4px 4px 0px 0px #000",
},
translate: {
boxShadowX: "4px",
boxShadowY: "4px",
reverseBoxShadowX: "-4px",
reverseBoxShadowY: "-4px",
},
fontWeight: {
base: "500",
heading: "700",
},
},
},
plugins: [tailwindcssAnimate],
} satisfies Config;
and add this into global.css
@tailwind base;
@tailwind components;
@tailwind utilities;