Angular 20 + Tailwind CSS + DaisyUI

A modern Angular application built with the latest Angular 20 framework, styled with Tailwind CSS v4, and enhanced with DaisyUI components.

🚀 Features

• Angular 20 - Latest version with cutting-edge features
• Tailwind CSS v4 - Next-generation utility-first CSS framework
• DaisyUI - Beautiful component library built on top of Tailwind CSS
• TypeScript - Full type safety and modern JavaScript features
• Responsive Design - Mobile-first approach with responsive utilities
• Modern Architecture - Well-organized project structure with separation of concerns

📦 Tech Stack

• Frontend Framework: Angular 20.3.0
• Styling: Tailwind CSS 4.1.15
• UI Components: DaisyUI 5.3.7
• Language: TypeScript 5.9.2
• Package Manager: npm
• Testing: Jasmine & Karma
• Build Tool: Angular CLI 20.3.5

🏗️ Project Structure

src/
├── app/
│   ├── core/           # Core functionality (guards, interceptors, services)
│   │   ├── components/ # Core reusable components
│   │   └── services/   # Core services
│   ├── shared/         # Shared components and utilities
│   │   └── components/ # Shared UI components
│   ├── pages/          # Feature pages/routes
│   ├── layouts/        # Layout components
│   ├── services/       # Application services
│   ├── guards/         # Route guards
│   ├── interceptor/    # HTTP interceptors
│   ├── directive/      # Custom directives
│   ├── pipe/           # Custom pipes
│   ├── model/          # TypeScript interfaces and models
│   ├── enumerations/   # Enums and constants
│   ├── functions/      # Utility functions
│   └── store/          # State management
├── environments/       # Environment configurations
└── styles.css         # Global styles with Tailwind imports

🛠️ Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)

Installation

1. Clone the repository

   git clone <repository-url>
   cd angular-20-tailwind-css-daisy-ui

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:4200

📜 Available Scripts

Command	Description
npm start	Start development server on http://localhost:4200
npm run build	Build the project for production
npm run watch	Build and watch for changes in development mode
npm test	Run unit tests with Karma
npm run ng	Run Angular CLI commands

🎨 Styling & Theming

This project uses Tailwind CSS v4 with DaisyUI for enhanced component styling. The configuration includes:

Available Themes

• Light (default)
• Dark (auto-switches based on user preference)
• Cupcake
• Synthwave

Customization

The styling configuration is located in src/styles.css:

@import 'tailwindcss';
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake, synthwave;
}

You can customize themes and add your own by modifying this configuration.

🏛️ Architecture

Core Principles

• Modular Design: Organized into feature modules for scalability
• Separation of Concerns: Clear separation between components, services, and utilities
• Type Safety: Full TypeScript integration for robust development
• Reusability: Shared components and services for DRY principles

Key Directories

• core/: Essential services and components used throughout the app
• shared/: Reusable components and utilities
• pages/: Route-specific components and features
• services/: Business logic and data management

🧪 Testing

The project uses Jasmine and Karma for unit testing:

# Run tests
npm test

# Run tests with coverage
npm run test -- --code-coverage

🏗️ Building for Production

# Build for production
npm run build

# The build artifacts will be stored in the `dist/` directory

📱 Responsive Design

This project follows a mobile-first approach using Tailwind CSS responsive utilities:

• Mobile: Default styles
• Tablet: md: prefix (768px+)
• Desktop: lg: prefix (1024px+)
• Large Desktop: xl: prefix (1280px+)

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Angular Team for the amazing framework
• Tailwind Labs for Tailwind CSS
• DaisyUI Team for the beautiful component library

📞 Support

If you have any questions or need help with the project:

• Create an issue for bug reports or feature requests
• Check the documentation for Angular
• Visit Tailwind CSS docs for styling help
• Browse DaisyUI components for UI elements

---

Happy Coding! 🚀