Next.js docs recommend starting a new app using create-next-app. The first couple of times I used the command, I got slightly different initial config files. I guess it is fair to assume that the Next.js team is actively working on improving the defaults. After running the command, I usually add the same initial dependencies and dev dependencies to the project. I could create a template repository with all these changes, but I prefer to use the command and make the necessary changes to the default files. This way, I can be sure that I am always in sync with the latest changes to the Next.js defaults.

create-next-app

npx create-next-app@latest

I usually go with the defaults for the prompts.

What is your project named? magic-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? No

Dependencies

npm i clsx tailwind-merge

• tailwind-merge - Merge Tailwind CSS classes without style conflicts
• clsx - A tiny (239B) utility for constructing className strings conditionally

Based on these dependencies, I add shadcn's cn utility functions to my project:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Dev Dependencies

npm i -D autoprefixer prettier prettier-plugin-tailwindcss

• autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use
• prettier - An opinionated code formatter
• prettier-plugin-tailwindcss - A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindFunctions": ["clsx", "cn"]  
}

1. We add the clsx and cn functions to the tailwindFunctions array in the .prettierrc file. This way, Prettier will sort the tailwind classes passed to these functions as well.

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    'tailwindcss/nesting': {},  
    tailwindcss: {},
    autoprefixer: {},  
  },
};
 
export default config;

1. tailwindcss/nesting adds support for nested classes in Tailwind CSS. It is bundled with Tailwind CSS, so we don't need to install it separately.
2. autoprefixer adds vendor prefixes to CSS. Must be added at the end of the plugins.

Editor Setup

I use VS Code for web dev projects. To help with tailwindcss classes, I use the recommended Tailwind CSS IntelliSense extension.

With the recent VS Code updates, we can now have custom labels for the editor tabs. The labels can be defined using variables in the settings.json file.

{
  "css.customData": [".vscode/tailwind.css-data.json"],
  "css.lint.unknownAtRules": "ignore",
  "workbench.editor.customLabels.patterns": {
    "**/app/**/page.tsx": "${dirname} - Page",
    "**/app/**/index.tsx": "${dirname} - Index",
    "**/app/**/layout.tsx": "${dirname} - Layout",
    "**/app/**/template.tsx": "${dirname} - Template",
  }
}