This is a Next.js example that you can use with create-next-app. You'll get a next starter with:
- Tailwind CSS
- With Tailwind Forms, and Inter as the default font
- TypeScript
- ESLint and Prettier
- A couple of VS Code workspace defaults
- Colored title bar
- Format on save
- Prettier as the default formatter
npx create-next-app your-app-name --example https://github.com/aedificatorum/next-starters/tree/main/tailwindTailwind CSS configured with JIT mode.
The Tailwind stylesheet (tailwind\tailwind.css) is imported globally (in _app.js).
The Tailwind configuration has been extended to include Tailwind Forms.
The default font has been changed to Inter, and the font's stylesheet is added to the <head> in _app.js.
Finally, an example custom color has been added to the config, along with am example of it being used on the index page.
// tailwind.config.js
theme: {
extend: {
colors: {
'palevioletred': '#DB7093'
}
},
},
// index.js
<h1 className="bg-palevioletred">...</h1>Including examples of both pages (e.g. index.ts) and an API route (e.g. hello.ts).
The project's baseUrl has also been set so you can use absolute imports.
ESLint is configured with Next's strict ruleset, as well as a Prettier integration (make sure you update your code style in .prettierrc).
Three new scripts have been added to package.json that run eslint/prettier.
yarn format # run prettier and apply rules
yarn lint # run eslint in report mode
yarn lint:fix # or run it in fix modeThe workspace has a few default settings (if you don't like them delete/change the settings.json file in the .vscode folder):
- Custom title bar color
- Default formatter set to the Prettier extension
- Format on save
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent