Skip to main content

​
Overview

Happy Habitat uses TailwindCSS v4.1.13 as its primary utility-first CSS framework. The new v4 version introduces a CSS-first configuration approach that simplifies setup and improves performance.

​
Installation

TailwindCSS v4 is installed via npm along with PostCSS:
package.json
{
  "dependencies": {
    "tailwindcss": "^4.1.13",
    "@tailwindcss/postcss": "^4.1.13",
    "postcss": "^8.5.6"
  }
}

​
Configuration

​
CSS-First Configuration

Tailwind v4 uses a CSS-first configuration approach instead of the traditional JavaScript config file. The configuration is defined directly in src/styles.css:
src/styles.css
@import "tailwindcss";
@plugin "daisyui"{
  themes: lemonade --default, dark --prefersdark, forest, winter, lemonade, autumn, lofi;
  root: ":root";
  include: ;
  exclude: ;
  logs: true;  
}

​
Key Changes from v3 to v4

  1. No tailwind.config.js file - Configuration is now in CSS
  2. CSS imports - Use @import "tailwindcss" instead of @tailwind directives
  3. Plugin configuration - Plugins are configured using @plugin at-rule
  4. Simplified setup - Less JavaScript configuration needed

​
Usage in Components

​
Utility Classes

Tailwind utility classes are used extensively throughout the application for styling: 
<div class="card w-full max-w-md bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title justify-center text-2xl mb-4">Title</h2>
  </div>
</div>

​
Responsive Design

Tailwind provides responsive utilities using breakpoint prefixes: 
<select class="select select-bordered select-sm
               text-xs
               w-24 sm:w-28 md:w-32">
  <!-- options -->
</select>
Breakpoints:
  • sm: - Small devices (640px+)
  • md: - Medium devices (768px+)
  • lg: - Large devices (1024px+)
  • xl: - Extra large devices (1280px+)
  • 2xl: - 2X large devices (1536px+)

​
Layout Utilities

​
Flexbox

<div class="flex items-center gap-2">
  <svg class="shrink-0 h-6 w-6">...</svg>
  <div class="flex-1">Content</div>
</div>

​
Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- Grid items -->
</div>

​
Spacing

Tailwind uses a consistent spacing scale: 
<!-- Padding -->
<div class="p-2 px-4 py-6">
  
<!-- Margin -->
<div class="m-4 mb-2 mt-6">
  
<!-- Gap -->
<div class="flex gap-2">
Spacing scale: 1 unit = 0.25rem (4px)
  • p-2 = 0.5rem (8px)
  • p-4 = 1rem (16px)
  • p-6 = 1.5rem (24px)

​
Typography

<!-- Font size -->
<h1 class="text-2xl">Large Title</h1>
<p class="text-sm">Small text</p>
<span class="text-xs">Extra small</span>

<!-- Font weight -->
<h3 class="font-bold">Bold heading</h3>
<p class="font-semibold">Semi-bold text</p>

<!-- Text alignment -->
<div class="text-center">Centered</div>
<div class="text-left">Left aligned</div>

​
Colors

Tailwind provides semantic color utilities that work with DaisyUI themes: 
<!-- Background colors -->
<div class="bg-base-100">Base background</div>
<div class="bg-base-200">Secondary background</div>
<div class="bg-primary">Primary color</div>

<!-- Text colors -->
<span class="text-primary">Primary text</span>
<span class="text-error">Error text</span>

​
Borders and Shadows

<!-- Borders -->
<div class="border border-gray-300 rounded-lg">
  
<!-- Rounded corners -->
<div class="rounded-md">Medium rounded</div>
<div class="rounded-full">Fully rounded (circle)</div>

<!-- Shadows -->
<div class="shadow-sm">Small shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>

​
Dynamic Classes with Angular

​
Conditional Classes

<input
  class="input input-bordered w-full"
  [class.input-error]="!formUtils.isValidField(loginForm, 'username')"
  formControlName="username"
/>

​
String Interpolation

// Component
getAlertClass(): string {
  switch (this.notification().type) {
    case NotificationType.SUCCESS:
      return 'alert-success';
    case NotificationType.ERROR:
      return 'alert-error';
    default:
      return 'alert-info';
  }
}

// Template
<div class="alert {{ getAlertClass() }} shadow-lg mb-2">

​
Common Patterns

​
Container with Max Width

<div class="w-full max-w-md mx-auto px-4">
  <!-- Centered container with max width -->
</div>

​
Full Width Forms

<div class="form-control w-full mb-4">
  <label class="label">
    <span class="label-text">Field Label</span>
  </label>
  <input type="text" class="input input-bordered w-full" />
</div>

​
Flexible Menus

<ul class="menu w-full min-w-10 flex overflow-x-auto whitespace-nowrap bg-base-200 p-2">
  <!-- Menu items -->
</ul>

​
Custom Utilities and @apply

​
Using @apply Directive

The @apply directive allows you to extract repeated utility patterns into custom CSS classes. This is used selectively in the codebase for component-specific styles:
generic-list.component.css
/* Estilos adicionales para el componente generic-list */
.table {
  @apply w-full;
}

.table tbody tr {
  @apply transition-colors;
}

/* Estilos para el estado vacío */
.card-body {
  @apply min-h-[200px];
}

/* Estilos para botones de acción */
.action-button {
  @apply min-w-fit;
}
banner-carousel.component.css
/* Estilos adicionales para el componente banner-carousel */
.carousel {
  @apply w-full;
}

.carousel-item {
  @apply w-full relative;
}

.carousel-item img {
  @apply w-full object-cover;
}

/* Overlay para el contenido del banner */
.carousel-item .banner-overlay {
  @apply absolute inset-0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4), transparent);
}

​
When to Use @apply

Use @apply when:
  • You need to reuse complex utility combinations
  • Component-specific styles benefit from abstraction
  • You’re creating custom animations or gradients
Avoid @apply when:
  • Simple utility classes suffice
  • You’re duplicating existing DaisyUI components
  • The pattern only appears once

​
Custom Layers

Tailwind v4 allows custom utilities via CSS layers: 
@layer utilities {
  .animate-in {
    animation: slideIn 0.3s ease-in;
  }
  
  .slide-in-from-top {
    transform: translateY(-20px);
  }
}

​
Best Practices

​
1. Use Semantic DaisyUI Classes

Prefer DaisyUI component classes over pure Tailwind when possible: 
<!-- Good: DaisyUI semantic classes -->
<button class="btn btn-primary">Click me</button>

<!-- Avoid: Pure Tailwind recreation -->
<button class="px-4 py-2 bg-blue-500 text-white rounded">Click me</button>

<!-- Good: Logical grouping -->
<select class="select select-bordered select-sm
               text-xs
               w-24 sm:w-28 md:w-32">

<!-- Avoid: Random order -->
<select class="text-xs w-24 select sm:w-28 select-sm md:w-32 select-bordered">

​
3. Responsive Design First

Consider mobile-first responsive design: 
<!-- Mobile first approach -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

​
4. Avoid Inline Styles

Use Tailwind classes instead of inline styles: 
<!-- Good -->
<div class="text-red-500">Error</div>

<!-- Avoid -->
<div style="color: red;">Error</div>

​
Integration with Angular

​
Component Styling

Components use inline templates with Tailwind classes: 
@Component({
  selector: 'hh-nav-bar',
  imports: [CommonModule, FormsModule],
  templateUrl: './nav-bar.component.html'
})
export class NavBarComponent {
  // Component logic
}

​
Component-Level CSS Files

While most components rely solely on Tailwind utility classes, some components use dedicated CSS files for:
  1. Complex responsive layouts (header.component.css)
  2. Component-specific utilities via @apply
  3. Custom animations and transitions
Example of component-specific CSS:
header.component.css
/* Optimizaciones adicionales para el header */
:host {
  display: block;
  width: 100%;
  max-width: 100%;
}

section {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 640px) {
  section {
    gap: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Asegurar que los textos no se desborden */
h1, h2 {
  word-break: break-word;
  overflow-wrap: break-word;
}
When to use component CSS:
  • Complex media queries that benefit from traditional CSS
  • Host element styling (:host)
  • Custom gradients or complex backgrounds
  • Component-specific animations
When to use Tailwind classes only:
  • Simple layouts and styling
  • Standard responsive patterns
  • DaisyUI component compositions

​
Resources

​
Next Steps

DaisyUI Components

Learn about DaisyUI component library integration

Theme Configuration

Configure and customize DaisyUI themes

Build docs developers (and LLMs) love

Get started for freeTalk to us