https://github.com/onwidget/tailnext
⭕️ TailNext: Free template using Next.js 14 app router and Tailwind CSS.
https://github.com/onwidget/tailnext
astrowind blog javascript landing landing-page next-boilerplate nextjs nextjs-13 nextjs-template qwind react-components react-template reactjs tailnext tailwind tailwind-css-template tailwindcss theme
Last synced: 9 days ago
JSON representation
⭕️ TailNext: Free template using Next.js 14 app router and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/onwidget/tailnext
- Owner: onwidget
- License: mit
- Created: 2022-09-04T07:39:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-26T05:40:42.000Z (9 months ago)
- Last Synced: 2025-05-08T02:42:20.494Z (13 days ago)
- Topics: astrowind, blog, javascript, landing, landing-page, next-boilerplate, nextjs, nextjs-13, nextjs-template, qwind, react-components, react-template, reactjs, tailnext, tailwind, tailwind-css-template, tailwindcss, theme
- Language: TypeScript
- Homepage: https://tailnext.vercel.app/
- Size: 5.96 MB
- Stars: 389
- Watchers: 11
- Forks: 147
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Tailnext
**Tailnext** is a free and open-source template to make your website using **[NextJS](https://nextjs.org/) + [Tailwind CSS](https://tailwindcss.com/)**. Ready to start a new project and designed taking into account best practices.
## Features
- ✅ Integration with **Tailwind CSS** supporting **Dark mode**.
- ✅ **Production-ready** scores in [Lighthouse](https://web.dev/measure/) and [PageSpeed Insights](https://pagespeed.web.dev/) reports.
- ✅ **Image optimization** and **Font optimization**.
- ✅ Fast and **SEO friendly blog**.
- ✅ Generation of **project sitemap** and **robots.txt** based on your routes.
[](https://onwidget.com)
[](https://github.com/onwidget/tailnext/blob/main/LICENSE.md)
[](https://github.com/onwidget)
[](https://github.com/onwidget/tailnext#contributing)
[](https://snyk.io/test/github/onwidget/tailnext)
Table of Contents
- [Demo](#demo)
- [Getting started](#getting-started)
- [Project structure](#project-structure)
- [Commands](#commands)
- [Configuration](#configuration)
- [Deploy](#deploy)
- [Roadmap](#roadmap)
- [Contributing](#contributing)
- [Acknowledgements](#acknowledgements)
- [License](#license)
## Demo
📌 [https://tailnext.vercel.app/](https://tailnext.vercel.app/)
## Getting started
- Clone: `git clone https://github.com/onwidget/tailnext.git`
- Enter in the directory: `cd tailnext`
- Install dependencies: `npm install`
- Start the development server: `npm run dev`
- View project in local environment: `localhost:3000`
### Project structure
Inside **Tailnext** template, you'll see the following folders and files:
```
/
├── .storybook/
├── app/
│ ├── (blog)
│ │ ├── [slug]
| | | └── page.js
| | └── blog
| | └── page.js
│ ├── head.js
│ ├── layout.js
│ └── page.js
├── public/
│ └── favicon.svg
├── src/
│ ├── assets/
│ │ ├── images/
| | └── styles/
| | └── base.css
│ ├── components/
│ │ ├── atoms/
| | └── widgets/
| | ├── Header.astro
| | ├── Footer.astro
| | └── ...
│ │── content/
│ | └── blog/
│ | ├── demo-post-1.md
│ | └── ...
│ ├── stories/
│ ├── utils/
│ └── config.mjs
├── package.json
└── ...
```
[](https://githubbox.com/onwidget/tailnext/tree/main)
> **Seasoned next.js expert?** Delete this file. Update `config.mjs` and contents. Have fun!
### Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :-------------------- | :------------------------------------------- |
| `npm install` | Install dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run storybook` | Open storybook to view stories by widgets |
| `npm run format` | Format codes with Prettier |
| `npm run lint:eslint` | Run Eslint |
### Configuration
Coming soon ..
### Deploy
#### Deploy to production (manual)
You can create an optimized production build with:
```shell
npm run build
```
Now, your website is ready to be deployed. All generated files are located at
`dist` folder, which you can deploy the folder to any hosting service you
prefer.
#### Deploy to Netlify
Clone this repository on own GitHub account and deploy to Netlify:
[](https://app.netlify.com/start/deploy?repository=https://github.com/onwidget/tailnext.git)
#### Deploy to Vercel
Clone this repository on own GitHub account and deploy to Vercel:
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fonwidget%2Ftailnext)
## Roadmap
Coming soon ..
## Contributing
If you have any idea, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request.
That would be very useful for all of us and we would be happy to listen and take action.
## Acknowledgements
Initially created by [onWidget](https://onwidget.com) and maintained by a community of [contributors](https://github.com/onwidget/tailnext/graphs/contributors).
## License
**Tailnext** is licensed under the MIT license — see the [LICENSE](https://github.com/onwidget/tailnext/blob/main/LICENSE.md) file for details.