https://github.com/mikevpeeren/next-typescript-tailwindcss-sass-starter

Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!!
https://github.com/mikevpeeren/next-typescript-tailwindcss-sass-starter

css html javascript nextjs nextjs-starter nextjs-template react sass starter starter-template tailwind tailwind-css tailwindcss template typescript vercel vercel-deployment

Last synced: 1 day ago
JSON representation

Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!!

• Host: GitHub
• URL: https://github.com/mikevpeeren/next-typescript-tailwindcss-sass-starter
• Owner: MikevPeeren
• License: mit
• Created: 2021-12-02T19:53:04.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-20T09:44:14.000Z (6 days ago)
• Last Synced: 2025-01-20T10:36:18.325Z (6 days ago)
• Topics: css, html, javascript, nextjs, nextjs-starter, nextjs-template, react, sass, starter, starter-template, tailwind, tailwind-css, tailwindcss, template, typescript, vercel, vercel-deployment
• Language: TypeScript
• Homepage: https://next-typescript-tailwindcss-sass-starter.vercel.app
• Size: 2.1 MB
• Stars: 36
• Watchers: 2
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Next.js TypeScript TailwindCSS & Sass Starter

Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!!

## 🧐 What's inside?

This Starter includes

- ⚡️ [Next.js 15](https://nextjs.org/) - The React Framework for Production

- ⚛️ [React 19](https://reactjs.org/) - A JavaScript library for building user interfaces

- 🧪 [Vitest](https://vitest.dev/) - Vitest Next Generation Testing Framework

- 🧁 [TailwindCSS v3](https://tailwindcss.com/) - A utility-first CSS framework packed with classes

- ✨ [TypeScript](https://www.typescriptlang.org/) - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

- 🎉 [Sass](https://sass-lang.com/) - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

- 📏 [ESLint v9](https://eslint.org/) — Find and fix problems in your JavaScript code.

- 🦋 [Prettier](https://prettier.io/) — An opinionated code formatter.

- 🐶 [Husky](https://github.com/typicode/husky) - Husky improves your commits and more 🐶 woof!

- 🐶 [Lint Staged](https://github.com/okonet/lint-staged) — Run linters against staged git files and don't let 💩 slip into your code base!

- 🔎 [Bundle Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) — Analyze your project to see what bundles are too big!

The rest of the Starter is based off of the Next.js default starter.

## ⚡️ Quick Start

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter)

## 🚀 Getting Started

Run the following command to create a new project with this Starter:

```bash

yarn create next-app my-app -e https://github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter

# or

npx create-next-app my-app -e https://github.com/MikevPeeren/next-typescript-tailwindcss-sass-starter

```

Once the project and dependencies are finished installing, you can navigate to that directory and start up the development server with:

```bash

yarn dev

# or

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see your new project!

## 📚 Learn More About Next.js

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!