Logo

dev-resources.site

for different kinds of informations.

How to install React and Tailwind in Termux

Published at
12/12/2024
Categories
programming
webdev
cli
termux
Author
ipigantenk
Categories
4 categories in total
programming
open
webdev
open
cli
open
termux
open
Author
10 person written this
ipigantenk
open
How to install React and Tailwind in Termux

Hello! this is my first post on dev.to. i hope y'all understand to my tutorial. how to install react on termux android. ๐Ÿ˜๐Ÿ˜

1. Update your packages in termux

First, you need to update the packages in termux. here is the command how to update the packages :

pkg update && pkg upgrade -y
Enter fullscreen mode Exit fullscreen mode

2. Install nodejs in termux
Next, you need to install nodejs in termux :

pkg install nodejs -y
Enter fullscreen mode Exit fullscreen mode

3. Create your react app
You need to create app here is the command looks like :

npx create-react-app <your-project-name>
cd <your-project-name>
Enter fullscreen mode Exit fullscreen mode

e.g

npx create-react-app react-app
cd react-app
Enter fullscreen mode Exit fullscreen mode

4. Install tailwind css
You need to install tailwind with npm here is the command :

npm install -D tailwindcss
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

5. Edit configuration tailwind css
You need configuration tailwind css for react in tailwind.config.js file. you can use nano or vim to open the file configuration.

If you don't have nano in termux you need to install it
pkg install nano -y
now you can use nano like this :
nano <your-file-name>

so, we comeback to the topic we open the file configuration in termux with text editor like this :

nano tailwind.config.js
Enter fullscreen mode Exit fullscreen mode

edit inside file or replace the text with this :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

after that save the file in nano with ctrl + x, y, enter

6. Add @tailwindcss in file css
open the file index.css in folder ./src/index.css with nano like this :

nano ./src/index.css
Enter fullscreen mode Exit fullscreen mode

add @tailwindcss at top of the line file

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Now you can run the react app with tailwind in termux :). you can run the react app with :

npm run dev
Enter fullscreen mode Exit fullscreen mode

or

npm run start
Enter fullscreen mode Exit fullscreen mode

that is my tutorial i hope you all understand with my tutorial hehe. because is my first post you can support me i will post the tutorial next time haha.

Source :

https://tailwindcss.com/docs/guides/create-react-app

termux Article's
30 articles in total
Favicon
่ฎฉๅฎ‰ๅ“ๆ‰‹ๆœบไธๅ†ๅƒ็ฐ๏ผšๅœจๅฎ‰ๅ“ๆ‰‹ๆœบไธŠๆญๅปบ Rust ๅผ€ๅ‘็Žฏๅขƒ
Favicon
How to install React and Tailwind in Termux
Favicon
Small prototype... easy coding flash cards on android
Favicon
Run qBittorrent in Android
Favicon
Setup pygame in termux
Favicon
Termux-Ngrok Configuration
Favicon
How To Install Termux Box In Termux
Favicon
My personal detox command
Favicon
Como rodar um servidor NodeJS em um smartphone Android
Favicon
Run a Linux Distro in your Android device
Favicon
Install Official VS Code on Android
Favicon
Automatically Change IP Address ุชุบูŠุฑ ุงูŠ ุจูŠ ุจุดูƒู„ ุชู„ู‚ุงุฆูŠ ูƒุงู„ูŠ ู„ูŠู†ูƒุณ
Favicon
Linux On The Go (Termux)
Favicon
How To Install Lemon Rat In Termux 2024
Favicon
git diary
Favicon
Line Highlighting in Zsh Termux
Favicon
How To Install Code-Server On Android
Favicon
Installing NodeJS In Termux
Favicon
Obsidian Notes with git-crypt ๐Ÿ”
Favicon
Install Pfetch on Termux
Favicon
Youtube Two Click MP3 Downloader - Termux!
Favicon
HOW TO INSTALL NGROK IN TERMUX ANDROID
Favicon
Setting up Termux and a Linux Distro on Android
Favicon
New Github Repo
Favicon
Termux logo in python
Favicon
Termux getting terminated after 15s on starting the VNC server.
Favicon
Setting Up Termux and Node.js on Android for Web Development
Favicon
Programando pelo Tablet
Favicon
How to connect your android device to github using ssh key with termux
Favicon
Host TOR Hidden service (DARK WEB website) on a smartphone !!

Featured ones: