Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/greattusk/ionic-react-tailwind-template
A template for developing Ionic apps with React and Tailwind CSS, using shadcn/ui as the component library.
https://github.com/greattusk/ionic-react-tailwind-template
ionic javascript mobile-development react tailwindcss typescript
Last synced: about 18 hours ago
JSON representation
A template for developing Ionic apps with React and Tailwind CSS, using shadcn/ui as the component library.
- Host: GitHub
- URL: https://github.com/greattusk/ionic-react-tailwind-template
- Owner: GreatTusk
- License: mit
- Created: 2024-09-10T19:46:21.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-02-06T01:16:48.000Z (3 days ago)
- Last Synced: 2025-02-06T02:29:48.631Z (3 days ago)
- Topics: ionic, javascript, mobile-development, react, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 473 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ionic React Tailwind Template
This is a template for developing Ionic apps with React and Tailwind CSS, using shadcn/ui as the component library. Based on [this article](https://medium.com/@meeky.ae/integrating-tailwindcss-and-ionic-react-application-c038b95af704).
## Prerequisites
Before getting started, make sure you have the following installed:
- Node.js
- npm
- Ionic CLI
## Installation
1. Clone this repository to your local machine.
2. Navigate to the project directory.
3. Run the following command to install the dependencies:
```
npm install
```
## Running the Project
To run the project, you can use the following scripts:
- **Development Mode**: This script starts the development server and watches for changes in Tailwind CSS files.
```
npm run start:dev
```
- **Android**: This script builds the project, syncs the changes with Capacitor, and runs the project on an Android device.
```
npm run start:android
```
## Testing
- **End-to-End Tests**: This script runs the Cypress end-to-end tests.
```
npm run test.e2e
```
- **Unit Tests**: This script runs the unit tests.
```
npm run test.unit
```
## Building
- **Development Build**: This script builds the project for development.
```
npm run build
```
- **Production Build**: This script builds the project for production.
```
npm run build:css && tsc && vite build
```
## Linting
- **Linting**: This script runs the ESLint linter.
```
npm run lint
```
## Configuration
This template is configured to use with Shadcnui.
That's it! You're ready to run and develop your Ionic app with React and Tailwind CSS.
## Documentation
Here are some useful links to documentation for the technologies used in this template:
- [Ionic Documentation](https://ionicframework.com/docs) - Official documentation for Ionic framework.
- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - Official documentation for Tailwind CSS.
- [React Documentation](https://reactjs.org/docs) - Official documentation for React.
- [shadcn/ui Documentation](https://ui.shadcn.com/docs) -Official documentation for shadcn/ui.
Make sure to refer to these resources for detailed information and guides on how to use these technologies effectively.