NextJs
React
Tailwindcss
NextAuth
Typescript
ELearning Tailwind NextJs Template is built with Tailwindcss and Nextjs.
This theme is ready to use and can be fully customized to your requirements.
To customize, you should have knowledge of NextJs, ReactJs, Tailwind and JSX to be able to modify this template.
|—
packages|—
markdown|—
public|—
src|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
app|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|—
(site) (Contains all the pages)|
|
|
|
|
|—
(auth)|
|
|
|—
signin|
|—
signup|—
documentation|—
api|
|
|
|—
auth|
|—
contex|—
Context|
|
|—
authDialogContext.tsx
|—
global.css|—
layout.tsx|—
not-found.tsx|—
page.tsx|—
components (All the components of this template.)|—
styles|—
types|—
utils|—
next.config.mjs|—
postcss.config.mjs|—
package.json|—
tailwind.config.ts|—
tsconfig.jsonBefore proceeding, you need to have the latest stable node.js
Open the package folder and install its dependencies. We recommend yarn or npm.
cd project-folder
npm install
cd project-folder
yarn install
Once install is done, you can run the app.
npm run dev or yarn run dev
This command will start a local web server http://localhost:3000:
> e-learning_project@2.0.0 dev
> next dev
-Next.js 14.2.4
-Local: http://localhost:3000
After adding the URL, run the command below to build the app.
npm run build or yarn build
Finally, your website is ready to be deployed.
1. Override Colors
For any change in colors: tailwind.config.ts
primary: "#6556ff",secondary: "#1a21bc",grey: "#57595f",slateGray: "#f6faff",deepSlate: "#d5effa",success: "#43c639",midnight_text: "#222c44",
2. Override Theme Colors
For changes, go to: tailwind.config.ts
primary: "#6556ff",secondary: "#1a21bc",
1. Change Font family over here: src/app/layout.tsx
import { Poppins } from "next/font/google";
const font = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700"], });
1. Change Logo over here: src/components/Layout/Header/Logo/index.tsx
<Link href="/">
<Image
src="/images/logo/logo.png"
alt="logo"
width=160
height=50
quality=100
style={width: "auto", height: "auto"}
/>