Angular Tailwind

Overview:

The project is focused on learning Tailwind CSS within the Angular framework. The project is still a work in progress and features items such as Sidebar, Dark Theme, Navbar, Footer, Auth Module, Dashboard Module, Standalone components, Angular Signals, Multi-Theme, Tests E2E, User Module, Guards, and Animations. It also provides commands for various tasks like starting the server, linting, and testing. The project utilizes packages like angular-svg-icon, apexcharts, ng-apexcharts, prettier, prettier-plugin-tailwindcss, tailwind-scrollbar, and tailwindcss.

Features:

• Sidebar: Provides a convenient navigation menu.
• Dark Theme: Offers a dark color scheme interface.
• Navbar: Easily accessible navigation bar.
• Footer: Information at the bottom of the page.
• Auth Module: Handles user authentication.
• Dashboard Module: Displays key information at a glance.
• Standalone components: Independent reusable elements.
• Angular Signals: Communication within Angular components.
• Multi-Theme: Supports multiple themes for customization.
• Tests E2E: End-to-end testing functionalities.

Installation:

To install the project dependencies, follow these steps:

1. Run npm install to install all the required packages.
2. Start the server in development mode using npm start.
3. Perform linting on the project with npm run lint.
4. Use npm run prettier to run Prettier on the entire source folder.
5. Check for Prettier errors using npm run prettier:verify.
6. Execute Prettier on only staged files with npm run prettier:staged.
7. Run playwright end-to-end tests with UI using npm run e2e-ui.

Summary:

The project is a practical approach to learning Tailwind CSS with Angular, incorporating essential features like sidebar, dark theme, navigation components, and modules for authentication and data visualization. It aims to provide a comprehensive understanding of these technologies through practical implementation and testing methodologies.