Skip to main content

​
Overview

The Sushi Restaurant App uses Ionic’s theming system alongside Tailwind CSS. While Tailwind handles most utility-based styling, Ionic’s theming system controls component-level styles and provides CSS variables for consistent design tokens.

​
Theme Structure

​
Variables File

The theme/variables.scss file is where Ionic theme customization would typically occur:
theme/variables.scss
// For information on how to create your own theme, please refer to:
// https://ionicframework.com/docs/theming/
This app uses a minimal Ionic theme configuration, relying primarily on Tailwind utilities for styling. The default Ionic color palette is used for base component styles.

​
Global Styles Integration

The global.scss file shows how Ionic CSS and Tailwind are integrated:
global.scss
/* Core CSS required for Ionic components to work properly */
@import "@ionic/angular/css/core.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Basic CSS for apps built with Ionic */
@import "@ionic/angular/css/normalize.css";
@import "@ionic/angular/css/structure.css";
@import "@ionic/angular/css/typography.css";
@import "@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "@ionic/angular/css/padding.css";
@import "@ionic/angular/css/float-elements.css";
@import "@ionic/angular/css/text-alignment.css";
@import "@ionic/angular/css/text-transformation.css";
@import "@ionic/angular/css/flex-utils.css";

​
Import Order

  1. Ionic Core: Required base styles for components
  2. Tailwind Base/Components/Utilities: Utility-first styling system
  3. Ionic Utilities: Optional helper classes for padding, alignment, etc.

​
Ionic Component Styling

​
Headers and Toolbars

Ionic components are styled using a combination of Ionic attributes and Tailwind classes: 
<ion-header class="ion-no-border" [translucent]="true">
  <ion-toolbar class="bg-blue-900 text-black shadow-md">
    <ion-title class="text-center text-xl font-bold tracking-widest uppercase">
      🌊 El Faro del Mar
    </ion-title>
  </ion-toolbar>
</ion-header>
Key Ionic features:
  • ion-no-border: Removes default border from header
  • [translucent]: Enables transparency effects on iOS
  • slot=“start”: Positions back button on the left
  • defaultHref: Sets fallback navigation for back button

​
Content Areas

<ion-content [fullscreen]="true" class="bg-cyan-50">
  <!-- App content -->
</ion-content>
Attributes:
  • [fullscreen]: Extends content behind the header for smooth scrolling
  • class: Tailwind utilities override default Ionic background

​
Lists and Items

<ion-list class="bg-transparent" lines="none">
  <!-- List items -->
</ion-list>
Ionic attributes explained:
  • lines=“none”: Removes default item dividers
  • detail=“true”: Shows detail arrow/chevron
  • detail-icon: Customizes the detail icon
  • slot=“start”: Positions avatar/icon before label

​
Images and Avatars

Avatar with Border
<ion-avatar class="border-2 border-teal-400 p-0.5 bg-white shadow-sm">
  <ion-img
    [src]="registro.foto"
    class="rounded-full object-cover"
  ></ion-img>
</ion-avatar>
Hero Image
<img
  [src]="registro.foto"
  class="w-full h-full object-cover opacity-90"
  alt="Foto de {{registro.nombre}}"
/>
Use ion-img for lazy-loaded images within Ionic components like ion-avatar. Use standard <img> tags when you need more control over styling with Tailwind classes.

​
Icons

Ionic icons are styled with Tailwind utilities: 
<!-- Icon in colored background -->
<div class="bg-teal-100 p-3 rounded-full">
  <ion-icon
    name="restaurant-outline"
    class="text-2xl text-teal-600"
  ></ion-icon>
</div>

<!-- Icon in button -->
<ion-icon name="trash-outline" class="text-xl mr-2"></ion-icon>

<!-- Icon in list item -->
<ion-icon
  slot="start"
  name="checkmark-circle"
  class="text-teal-500 text-xl"
></ion-icon>
Icon sizing with Tailwind:
  • text-xl: ~20px
  • text-2xl: ~24px
  • text-3xl: ~30px

​
Buttons

While Ionic provides ion-button, this app uses native HTML buttons with Tailwind styling: 
<button
  (click)="deleteRegistro()"
  class="w-full mt-4 bg-red-500 hover:bg-red-600 text-white font-bold py-4 rounded-2xl shadow-md border-b-4 border-red-700 active:border-b-0 active:mt-5 transition-all flex justify-center items-center"
>
  <ion-icon name="trash-outline" class="text-xl mr-2"></ion-icon>
  Eliminar Platillo
</button>
Native buttons with Tailwind provide more styling flexibility than ion-button, but ion-button offers better platform-specific styling and ripple effects.

​
Customizing Ionic Colors

To customize Ionic’s color palette, you would add CSS variables to variables.scss:
Example Custom Colors
:root {
  /** Primary - Deep Ocean Blue **/
  --ion-color-primary: #1e3a8a;
  --ion-color-primary-rgb: 30, 58, 138;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #1a3279;
  --ion-color-primary-tint: #354e96;

  /** Secondary - Teal Accent **/
  --ion-color-secondary: #2dd4bf;
  --ion-color-secondary-rgb: 45, 212, 191;
  --ion-color-secondary-contrast: #000000;
  --ion-color-secondary-contrast-rgb: 0, 0, 0;
  --ion-color-secondary-shade: #28bba8;
  --ion-color-secondary-tint: #42d8c5;

  /** Background **/
  --ion-background-color: #ecfeff;
  --ion-background-color-rgb: 236, 254, 255;
}
These variables would then be used with Ionic’s color attribute: 
<ion-toolbar color="primary">
  <ion-title>El Faro del Mar</ion-title>
</ion-toolbar>

<ion-button color="secondary">Ver Menú</ion-button>
The current app doesn’t use Ionic color attributes, opting instead for direct Tailwind classes. Adding CSS variables is only necessary if you want to use Ionic’s color attribute system.

​
Dark Mode

Ionic includes dark mode support, but it’s currently disabled in the app:
global.scss
/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
To enable dark mode:
1

Choose a dark mode strategy

  • dark.always.css: Always use dark mode
  • dark.class.css: Enable dark mode with a CSS class
  • dark.system.css: Follow system preference
2

Uncomment the import

@import "@ionic/angular/css/palettes/dark.class.css";
3

Add dark mode variants to Tailwind classes

<ion-content class="bg-cyan-50 dark:bg-gray-900">
  <h1 class="text-blue-900 dark:text-cyan-400">Title</h1>
</ion-content>

​
Platform-Specific Styling

Ionic automatically applies platform-specific styles. You can customize this behavior: 
<!-- iOS-specific styling -->
<ion-header [translucent]="true">
  <!-- Translucent headers work best on iOS -->
</ion-header>

<!-- Platform detection in TypeScript -->
<ion-toolbar [class.md-toolbar]="platform.is('android')">
  <!-- Custom Android styling -->
</ion-toolbar>

​
Best Practices

Use Ionic Utilities

Leverage Ionic’s built-in utilities like ion-no-border, ion-text-center, and slot attributes before writing custom CSS.

Transparent Backgrounds

Set class="bg-transparent" on Ionic components when applying Tailwind backgrounds to parent containers.

Component Attributes First

Use Ionic attributes (lines, detail, slot) for component behavior, Tailwind classes for visual styling.

Respect Platform Conventions

Let Ionic handle platform-specific styling automatically rather than forcing a single design across platforms.

​
Ionic vs Tailwind Decision Guide

Use Ionic WhenUse Tailwind When
Need platform-specific behaviorApplying colors and spacing
Using component slots/attributesCreating custom layouts
Implementing navigation patternsStyling individual elements
Need ripple effectsNeed hover/focus states
Using Ionic iconsApplying typography

​
Component-Specific SCSS

Page-specific styles can be added to component SCSS files:
home.page.scss (example)
#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
In this app, most page-specific SCSS files are minimal or empty since Tailwind handles the styling directly in templates.

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us