https://github.com/yjg30737/nextjs-tutorial

NextJS & Tailwind CSS tutorial
https://github.com/yjg30737/nextjs-tutorial

create-next-app nextjs nextjs-tailwind nextjs-typescript tailwind-css typescript

Last synced: 3 months ago
JSON representation

NextJS & Tailwind CSS tutorial

• Host: GitHub
• URL: https://github.com/yjg30737/nextjs-tutorial
• Owner: yjg30737
• License: mit
• Created: 2023-01-14T08:55:34.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T07:38:23.000Z (about 2 years ago)
• Last Synced: 2024-12-29T08:42:12.948Z (5 months ago)
• Topics: create-next-app, nextjs, nextjs-tailwind, nextjs-typescript, tailwind-css, typescript
• Language: TypeScript
• Homepage:
• Size: 157 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# nextjs-tutorial

NextJS & Tailwind CSS tutorial

## How to Use

1. git clone ~

2. npm i

3. npm run dev

## Note

Powered by NextJS & Tailwind CSS & TypeScript

Derived from create-next-app

You have to access the localhost:3000 to see the result

## Memo

Before how to use..

nextjs getting started

guide to install tailwindcss in nextjs project

After that.. for svg icon & theme switching

hero icons

Light/dark mode (article by Vikas Rai)

Light/dark mode tailwind css docs (less accurate than previous one, which is funny)  

## TODO list

### Have to do

* Responsive header

* Footer design

* Practice disclosure

* Sidebar

* Make sample articles list

* Go to the top button

* Logo design

* Hightlight the current page's navbar item, make the router

* Search feature (algolia or another version)

### Maybe later

* using react-grid-layout (for customizing layout)

* using react-beautiful-dnd (for enhancing user experience of data list management)

* using formik (arguably the most common way to make form)

...