https://github.com/theodorusclarence/nextjs-tailwind-starter

A starter for Next.js and Tailwindcss, with Seo component.
https://github.com/theodorusclarence/nextjs-tailwind-starter

nextjs nextjs-starter tailwind

Last synced: 2 months ago
JSON representation

A starter for Next.js and Tailwindcss, with Seo component.

• Host: GitHub
• URL: https://github.com/theodorusclarence/nextjs-tailwind-starter
• Owner: theodorusclarence
• Created: 2021-01-12T09:30:10.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-24T20:22:47.000Z (about 1 year ago)
• Last Synced: 2024-10-02T08:52:49.161Z (3 months ago)
• Topics: nextjs, nextjs-starter, tailwind
• Language: JavaScript
• Homepage: https://nextjs-tailwind-starter.theodorusclarence.com
• Size: 906 KB
• Stars: 32
• Watchers: 3
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Disclosure

This starter is no longer actively maintained, but dependency will still be updated every Monday.

If you prefer highly maintained starter using TypeScript, please check my [Next.js + Tailwind CSS + TypeScript Starter](https://github.com/theodorusclarence/ts-nextjs-tailwind-starter)

# Next.js + Tailwind CSS Starter

This is a NextJs and Tailwind project bootstrapped using nextjs-tailwind-starter created by [Theodorus Clarence](https://github.com/theodorusclarence/nextjs-tailwind-starter).

See the deployment on [https://nextjs-tailwind-starter.theodorusclarence.com/](https://nextjs-tailwind-starter.theodorusclarence.com/)

![Screenshots](https://www.site-shot.com/cached_image/3aslTKJcEeuO5AJCrBEAAg)

## Getting Started

To use this starter, you can use create-next-app to do it by:

```bash

npx create-next-app -e https://github.com/theodorusclarence/nextjs-tailwind-starter project-name

```

or

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftheodorusclarence%2Fnextjs-tailwind-starter)

First, run the development server:

```bash

npm run dev

# or

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

## What's Inside

### Inter Fonts

Inter fonts is self hosted. The default weights are `400, 600, 700`. To add more, use fontsquirrel.

### UnstyledLink Component

Used as a component for Next.js Link. Will render out Next/Link if the href started with `/` or `#`, else will render an `a` tag with `target='_blank'`.

### CustomLink Component

An extension of UnstyledLink Component, you can add your default styling for a button/link.

```jsx

  {props.children}

```

### Default Favicon Declaration

Use [Favicon Generator](https://www.favicon-generator.org/) and then overwrite the files in `/public/favicon`

### Just-In-Time Tailwindcss

Defaulted to true, you can uncomment the `mode='jit'` in `/tailwind.config.js`

### Default Styles

There are default styles for responsive heading sizes, and `.layout` to support a max-width for larger screen size.

### Seo Component

Configure the default in `/components/Seo.jsx`. If you want to use the default, just add `` on top of your page. 

You can also customize it per page by overriding the title, description as props

```jsx

```