🚀 Angular v20 Seed (with Tailwind v4 + Prettier)

This repository is a quick start seed project to build modern Angular applications with a basic but powerful setup:

• Angular v20: Latest stable Angular with standalone components, signals, Vite-powered builds, and SSR support.
• Tailwind CSS v4: Utility-first CSS framework (v4 is a full CSS preprocessor, incompatible with Sass/SCSS).
• Prettier: Opinionated code formatter for consistent code style across the team.

---

🎯 Why this seed?

• Consistency out of the box: Includes Prettier + Tailwind plugin for class sorting, for cleaner diffs
• Performance-ready: Created with SSR enabled for better Core Web Vitals, SEO, and perceived performance.
• Compatibility: Keeps Zone.js enabled for now (max ecosystem compatibility), but can be migrated to Zoneless later.
• Lightweight setup: Uses CSS (not SCSS) since Tailwind v4 replaces Sass with its own CSS preprocessing.
• AI-friendly: Works well with AI coding assistants (Cursor, Gemini, ChatGPT) and Angular’s official AI prompts.

---

📖 Usage

npm install

npm run start

Navigate to http://localhost:4200 and start building 🚀

Tailwind cutomizable styles and Prettier formatting are ready to go.

⚙️ How was the project setup

npm install -g @angular/cli

ng new seed

Options on creation:

• Stylesheet formar → CSS

  • Reason: Allows Tailwind versions ≥4, since they do not support SASS because it works as its own preprocessor.

• SSR → Yes

  • Reason: Improves Core Web Vitals (especially LCP), SEO visibility, and perceived performance for first-time visitors.
  • Impact: Pages render HTML on the server, then hydrate on the client, giving users faster initial paint and improving search indexing.
  • Best practice: Combine with provideClientHydration() for seamless hand-off.

• Zone.js → Yes

  • Reason: Keeps maximum compatibility with third-party Angular libraries and legacy patterns.
  • Trade-off: Slightly more overhead and less predictable change detection than a zoneless app, but safer as a default when ecosystem dependencies are unknown.
  • Future note: Once the project matures and we confirm all libs use signals / OnPush correctly, we can safely migrate to zoneless for performance and cleaner debugging.

• AI tools → personal choice

  • I use VSC, have Cursor installed and preffer Gemini.
  • I am not interested on paying for an AI service.
  • This eleccion is personal, so for me Cursor is the best choice + using Gemini and ChatGPT on the web with the suggested Angular v20 prompts for LLM

INSTALATIONS

Move inside the project

cd .\seed\

Install Tailwind v4

Standard and coherent styles for a seamless UI. It allows variable customization for a faster development.

npm install tailwindcss @tailwindcss/postcss postcss --force

Create a .postcssrc.json file with the content

{
 "plugins": {
 "@tailwindcss/postcss": {}
}

Import TailwindCSS on ./src/styles.css

@import "tailwindcss";

Install Prettier:

1. Install Prettier (exact version)

npm install --save-dev --save-exact prettier

Pin exact version so everyone formats code the same.

---

1. Create config files

• .prettierrc → tells tools you’re using Prettier

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

• .prettierignore → exclude build artifacts, coverage, etc.

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')

Prettier also respects .gitignore.

---

1. Format code

• Format everything:

npx prettier --write .

• Check formatting (CI):

npx prettier --check .

---

1. Editor integration

• Install Prettier plugin in VS Code (or your editor).
• The plugin uses the local version from node_modules → consistent across team.
• Best experience = auto-format on save.

---

1. Linters

• Use eslint-config-prettier so ESLint & Prettier don’t conflict:

npm install --save-dev eslint-config-prettier

---

1. Git hooks (optional but recommended)

• Install husky + lint-staged:

npm install --save-dev husky lint-staged
npx husky init

• Add pre-commit hook (.husky/pre-commit):

npx lint-staged

• package.json: It is very important to add the lint-staged configuration BEFORE the Prettier one on the package.json

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}