Easily use tailwind css with Flask projects
Project description
Flask-Tailwind-Manager
Flask-Tailwind-Manager provides a simple interface to use TailwindCSS with your Flask project. It will let you hide it in a folder called .tailwind so you dont have to see any node_modules or any other javascript. Even tho you DO need npm and npx to be available on your machine.
🚧 This package is under heavy development..
Installation
Install the extension with pip:
pip install flask-tailwind-manager
Configuration
This are some of the settings available. All of the configurations are optional, and in most cases it should work without any configuration.
| Config | Description | Type | Default |
|---|---|---|---|
| TAILWIND_CWD | CWD for node_modules. | str | .tailwind |
| TAILWIND_OUTPUT_PATH | CSS file output path inside app static. | str | css/style.css |
| TAILWIND_NPM_BIN_PATH | Npm binary path. | str | npm |
| TAILWIND_NPX_BIN_PATH | Npx binary path. | str | npx |
| TAILWIND_TEMPLATE_FOLDER | Name of the templates folder. | str | templates |
Usage
Once installed Flask-TailwindCSS is easy to use. Let's walk through setting up a basic application. Also please note that this is a very basic guide: we will be taking shortcuts here that you should never take in a real application.
To begin we'll set up a Flask app:
from flask import Flask
from flask_tailwind import TailwindCSS
app = Flask(__name__)
tailwind = TailwindCSS()
tailwind.init_app(app)
Using the CLI tool.
Once you completed the extension configuration, you can access the Flask-TailwindCSS CLI tool. There is 4 useful commands you will use.
- Installing Node and TailwindCSS basic configuration. By default this extension will generate a
tailwind.config.jsgeneric file, ready to use. If you need to futher customize you will need to edit this file accordingly.
flask tailwind init
-
Once installed all modules will be found on
.tailwindfolder (or CWD you define). The default configuration will look for changes at{APP_NAME}/**/{TEMPLATES_FOLDER}/*{.html,.jinja,.j2}. You can always modifytailwind.config.jsfile in order to customize it. -
To start watching files and changes. use the
startcommand as follows.
flask tailwind start
- Almost every time you are using you will install plugins like Preline, Flowbite, daysiUI, etc... For this cases you can use the
npxornpmcommands. In the following example we will install the PrelineUI plugin as follows.
flask tailwind npm i preline
- After the installation you will have to configure it manually.
This will ensure the plugins are installed in the correct CWD.
Load resources
Once the extension is set up, this will make available the tailwind_css function into the templates context so you could load the generated css like this.
<head>
{{ tailwind_css() }}
</head>
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for flask_tailwind_manager-0.0.4.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 5050c3c861e3e050c33de53a2b8a5c1b3753e66a4798d1de86cb5ae259b004ae |
|
| MD5 | 054c96155aa6abf28a2eee2231e0284c |
|
| BLAKE2b-256 | f276232e31a3945e6ae64f4d282fb719b6920252b3b647097061ba1b15a12e40 |
Hashes for flask_tailwind_manager-0.0.4-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | be9266a382a4580c6d0bf18c0e6acf8972a96804a97ac426fee9dc454b253ec2 |
|
| MD5 | b1a6355d95d03cbde8e38e270e3cf050 |
|
| BLAKE2b-256 | 7a824a796b75898002c67e8ddbb521dacda45763cd3f38126c4226416affbd7d |
