:zap: Angular Tailwind Auth Panel

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

:page_facing_up: Table of contents

• :zap: Angular Tailwind Auth Panel
  • :page_facing_up: Table of contents
  • :books: General info
  • :camera: Screenshots
  • :signal_strength: Technologies
  • :floppy_disk: Setup
  • :wrench: Testing
  • :computer: Code Examples
  • :cool: Features
  • :clipboard: Status & To-Do List
  • :clap: Inspiration
  • :file_folder: License
  • :envelope: Contact

:books: 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

:camera: Screenshots

:signal_strength: Technologies

• Angular framework v15
• Webpack v5 static module bundler for modern JavaScript applications.
• Tailwindcss v3 CSS framework
• postcss-loader v5 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 v15 to extend the Angular CLI's default build behavior. Allows a partial custom webpack config. to be merged with the CLI's one.

:floppy_disk: 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.

:wrench: Testing

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

:computer: 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>

:cool: 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.

:clipboard: Status & To-Do List

• Status: Working.
• To-Do:Fix `__webpack_require__(...).context is not a function``error when running Jasmine testing

:clap: 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

:file_folder: License

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

:envelope: Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com