Use Tailwind

.gitignore

@@ -118,3 +118,9 @@ env/
 
 ### Configuration files ###
 .env
+
+### NPM things ###
+node_modules/
+
+### Tailwin Generated CSS ###
+todo_app/static/css/index.css

.vscode/launch.json

@@ -6,7 +6,7 @@
     "configurations": [
         {
             "name": "Python: Flask",
-            "type": "python",
+            "type": "debugpy",
             "request": "launch",
             "module": "flask",
             "env": {
@@ -21,7 +21,7 @@
         },
         {
             "name": "Python: Current File",
-            "type": "python",
+            "type": "debugpy",
             "request": "launch",
             "program": "${file}",
             "console": "integratedTerminal"

README.md

@@ -6,6 +6,28 @@
 
 The project uses poetry for Python to create an isolated environment and manage package dependencies. To prepare your system, ensure you have an official distribution of Python version 3.8+ and install Poetry using one of the following commands (as instructed by the [poetry documentation](https://python-poetry.org/docs/#system-requirements)):
 
+For styling tailwindcss is used via their CLI tool. For this to work you must also have Node installed.
+
+### VSCode
+
+It is recommended to use VSCode for this project as there is an included launch config and linting has so far been enforced using VSCode extensions. The recommended linting extensions are:
+
+- Better Jinja
+- Black Formatter
+- Mypy
+- Prettier (You will also need the NPM package, installation details described in the style section)
+
+However none of these styles are enforced yet so go wild I guess.
+
+You may also want to install other extensions to make development easier such as Pylance and Tailwind CSS IntelliSense (this extension is especially helpul if you are new to tailwind).
+
+### Node installation
+
+Node is required for the development of this app so you will need to install Node and the project dependencies. However, the site is primarily built using Python with Flask, so think very carefully before adding any packages.
+
+- Install the latest version of Node from: https://nodejs.org/en
+- Install the dependencies using `npm install`
+
 ### Poetry installation (Bash)
 
 ```bash
@@ -43,19 +65,35 @@ You must also populate the TRELLO_XXXXX variables with your own API key, token a
 ## Running the App
 
 Once the all dependencies have been installed, start the Flask app in development mode within the Poetry environment by running:
+
 ```bash
-$ poetry run flask run
+$ npm run dev
 ```
 
 You should see output similar to the following:
+
 ```bash
- * Serving Flask app 'todo_app/app'
- * Debug mode: on
-WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
- * Running on http://127.0.0.1:5000
-Press CTRL+C to quit
- * Restarting with stat
- * Debugger is active!
- * Debugger PIN: 113-666-066
+$> dev
+$> concurrently "npm run css" "poetry run flask run"
+$[0]
+$[0] > css
+$[0] > npx tailwindcss -i ./todo_app/tailwind.css -o ./todo_app/static/css/index.css --watch
+$[0]
+$[1]  * Serving Flask app 'todo_app/app'
+$[1]  * Debug mode: on
+$[1] WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
+$[1]  * Running on http://127.0.0.1:5000
+$[1] Press CTRL+C to quit
+$[1]  * Restarting with stat
+$[0]
+$[0] Rebuilding...
+$[0]
+$[0] Done in 306ms.
+$[1]  * Debugger is active!
+$[1]  * Debugger PIN: 207-877-058
+$[1] 127.0.0.1 - - [05/Apr/2024 16:49:39] "GET / HTTP/1.1" 200 -
+$[1] 127.0.0.1 - - [05/Apr/2024 16:49:39] "GET /static/css/custom.css HTTP/1.1" 304 -
+$[1] 127.0.0.1 - - [05/Apr/2024 16:49:39] "GET /static/css/index.css HTTP/1.1" 200 -
 ```
+
 Now visit [`http://localhost:5000/`](http://localhost:5000/) in your web browser to view the app.