Building the web UI (editing the html and css)

My script mainly uses ReactJS (opens in a new tab) and TailwindCSS (opens in a new tab), which is usually located in the web directory of my scripts. To get started here are the steps needed.

Requirements

Open a terminal in vscode or cmd or your favorite IDE. Step1

Navigate to the web directory using cd your_path/web Step2

Run npm install in the terminal. Step3

Edit the html and css through the JSX files in the web/src/.. directory.

Finally after you are done run npm run build. This will build the html directory folder with bundled and minimized files. Step4

Since we use TailwindCSS you can refer for full documentation. For starter you can read about the fundamental part here (opens in a new tab).

For example if you want to change the colors of my UI you can change the classNames using the classes (opens in a new tab) from Tailwind docs.

bossmenu1 bossmenu1_ign

bossmenu2 bossmenu2_ign

Last updated on October 13, 2024