⚡ Angular Tailwind Auth Panel

• Angular app using Webpack & Tailwindcss components to display a login dashboard
• Tutorial code from CodingAndCaffeine, Youtube channel - see 👏 Inspiration below.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Tailwind Auth Panel
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Webpack explained in Webpack documentation Concepts
• To build for production Tailwind’s purge option is used to tree-shake unused styles and optimize final build size.
• angular.json file modified to use custom builder and webpack.config.js file

📷 Screenshots

📶 Technologies

• Angular framework v16
• Webpack v5 static module bundler for modern JavaScript applications.
• Tailwindcss v3 CSS framework
• postcss-loader v7 Loader to process CSS with PostCSS. Transformations that are applied to the source code of a module, to pre-process files as you import or “load” them.
• postcss-scss v4 SCSS parser for PostCSS.
• ngx-build-plus v16 to extend the Angular CLI’s default build behavior. Allows a partial custom webpack config. to be merged with the CLI’s one.

💾 Setup

• Run npm i to install dependencies.
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

🔧 Testing

• Run ng test to run Jasmine unit tests via Karma
• Run ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples

• extract from app.component.html showing tailwindcss used to style input checkbox & label

<div class="flex items-center">
  <input
    id="remember_me"
    name="remember_me"
    type="checkbox"
    class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
  />
  <label for="remember_me" class="block ml-2 text-sm text-gray-900">
    Remember me
  </label>
</div>

🆒 Features

• Tailwindcss sign-in form component simply copy-pasted into app.
• Build file is a compact 244kb thanks to Tailwind’s purge option (manually enabled in tailwind.config.js) that tree-shakes unused styles and optimizes the final build size.

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• Daniel Laera: How To Add Tailwind In Angular 11 Project
• Angular 11 and Tailwind; Let’s go!
• Tailwindcss docs: Optimizing for Production
• Trungk18.com: How to configure TailwindCSS with Angular and why you should use it
• Angular Architects: article: Extending the Angular CLI’s build process without ejecting
• S. Dielmann: Microfrontend with Angular and Webpack Module Federation
• Stackoverflow: Karma Jasmine…Uncaught Error…

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]