A simple package for adding a dev server to your flask app that automatically compiles the tailwindcss of the templates on file save and triggers a browser reload to sync the changes on the fly.

# using poetry
poetry add --group=dev flask-livetw

# using pip
pip install flask-livetw

To start using this package, simply go to your project root folder, run the following command and follow along the steps.

# using poetry
poetry shell
flask-livetw init

# using pip
"activate your virtual environment like you normally do"
flask-livetw init

Note 1: To skip requirements check use the -Y or --yes flag.

Note 2: To use default values for the initialization use the -D or --default flag.

FLASK_ROOT = "src"

STATIC_FOLDER = "src/static"

TEMPLATE_FOLDER = "src/templates"
TEMPLATE_GLOB = "src/templates/**/*.html"
ROOT_LAYOUT_FILE = "src/templates/layout.html"

LIVE_RELOAD_FILE = "src/static/.dev/live_reload.js"

GLOBALCSS_FILE = "src/static/.dev/global.css"
TAILWIND_FILE = "src/static/.dev/tailwind.css"
MINIFIED_TAILWIND_FILE = "src/static/tailwind_min.css"

UPDATE_GITIGNORE = False

Example as file system tree:

project_root
├── src
│   ├── static
│   │   ├── .dev
│   │   │   ├── global.css
│   │   │   ├── live_reload.js
│   │   │   └── tailwind.css
│   │   ├── tailwind_min.css
│   │   ...
│   └── templates
│       ├── layout.html
│       ...
├── .gitignore
├── pyproject.toml
...

In order to use the commands, you need to activate your virtual environment first.

# using poetry
poetry shell

# using pip
"activate your virtual environment like you normally do"

Each command has its own help page, you can use the -h or --help flag to see the available options.

flask-livetw dev

By default the command starts:

• a flask server in debug mode
• a live reload websocket server
• a tailwindcss in watch mode

During development time the enviroment variable LIVETW_DEV is set to TRUE, os.environ["LIVETW_DEV"] == "TRUE". This is useful for conditional code execution.

Builds the tailwindcss of the templates as a single css file.

flask-livetw build

By default the builded tailwindcss file will be minified.

During building time the enviroment variable LIVETW_BUILD is set to TRUE, os.environ["LIVETW_BUILD"] == "TRUE". This is useful for conditional code execution.

flask-livetw local-install

This command creates a local script that mimics the flask-livetw command and adds the necessary dependencies to your project in order to use the dev and build commands.

After the installation, you can use the dev and build commands as follows:

./dev.py dev
./dev.py build

Contributions are welcome, feel free to submit a pull request or an issue.

• pytailwindcss
• python-dotenv
• tomli
• websockets

MIT