Ionic + Capacitor with Tailwind in TypeScript

A starter template for Ionic + Capacitor with Tailwind in TypeScript with an opinionated modular project structure.

Technologies

How to Reuse Locally?

Use degit to download the repository locally.

❓ What is degit?
degit downloads a copy of git repository with downloading its entire git history.

Install degit globally.

npm install -g degit

Download the latest version

degit utsavdotpro/starter-ionic-capacitor-tailwind-ts

Getting started

Prepare development environment

pnpm install # install node dependencies & sync the assets with native projects

Working with Web

pnpm start # start the development server
pnpm build # generate the production build

Working with iOS

pnpm ios # start the project in simulator
pnpm build:ios # generate the production build & open in Xcode

Working with Android

pnpm android # start the project in emulator
pnpm build:android # generate the production build & open in Android Studio

Project Structure

|-- android                   ℹ️ generated android project
|-- ios                       ℹ️ generated ios project
|-- public                    ℹ️ keep your static resource files
|-- src
|   |-- common
|   |   |-- components
|   |   |   |-- elements      ℹ️ keep your state-less components
|   |   |   |                 ℹ️ keep your state-full components
|   |   |-- hoc
|   |   |-- hooks
|   |   |-- layouts
|   |   |-- sections          ℹ️ keep your common sections
|   |-- core
|   |   |-- config            ℹ️ keep your configuration files
|   |   |-- constants
|   |   |-- interfaces
|   |   |-- utils
|   |-- lib
|   |-- pages                 ℹ️ pages & their components
|   |-- theme

How to's

Update App Logo

https://github.com/ionic-team/capacitor-assets#usage

• Create following three variants of the logo in the resources/
  • icon-foreground.png
  • icon-background.png
  • icon-only.png - actual logo with background
• Run the following command:

  npx @capacitor/assets generate