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/tailwind
Tailwind 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 mode
The 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