Create an Angular app with ESLint & Tailwind CSS in seconds

Introduction

I've started a couple of personal projects recently and have noticed just how long it takes to configure my Angular projects exactly how I want them. Installing and configuring things like Tailwind and ESLint should be quick and easy, but that's never the case. Enter create-angular-app.

Why?

Nobody likes switching between projects with different TypeScript compiler options, linting rules, styling frameworks and so on, but these things are important. The process for getting a project set up with them should be frictionless. I rarely deviate from my normal project configuration of ESLint, Tailwind, removing Karma & Jasmine dependencies, and adding environment files. All of these require at least one step each after using ng new.

create-angular-app solves this problem. It contains a template, where I've configured all of this for the last time. Now, when I want to create a new Angular application, I simply do

npm create @chimpbyte/angular-app@latest

and follow the simple prompts:

Easy!

What's included?

Out of the box, you get:

• Tailwind CSS
• ESLint with the rules I find most useful
• Angular routing
• Scss for custom styling if Tailwind doesn't cover it
• No automatically generated test files when running ng generate
• No Karma/Jasmine dependencies installed. If you're going to unit test your application, I'd recommend jest-preset-angular

Sounds cool, but can I tweak it how I like?

Yes, but not currently through the CLI. You can manually amend the angular.json file etc. I do plan to make certain elements optional (e.g. Tailwind) but feel free to open an issue on GitHub if you've got any suggestions.

I also plan to add more templates for other configurations I occasionally use. Again, please open an issue with any questions/suggestions.

Credits

Brandon Roberts for his create-angular-project package which I used as a starting point.