Work library for Forge
Project description
forge-tailwind
Use Tailwind CSS with Django without requiring JavaScript or npm.
Made possible by the Tailwind standalone CLI.
$ forge tailwind
Usage: forge tailwind [OPTIONS] COMMAND [ARGS]...
Tailwind CSS
Options:
--help Show this message and exit.
Commands:
compile Compile a Tailwind CSS file
init Install Tailwind, create a tailwind.config.js...
update Update the Tailwind CSS version
Installation
First, install forge-tailwind from PyPI:
pip install forge-tailwind
Create a new tailwind.config.js file in your project root:
forge tailwind init
This will also create a tailwind.css file at static/src/tailwind.css where additional CSS can be added.
You can customize where these files are located if you need to,
but this is the default (requires STATICFILES_DIRS = [BASE_DIR / "static"]).
The src/tailwind.css file is then compiled into dist/tailwind.css by running tailwind compile:
forge tailwind compile
When you're working locally, add --watch to automatically compile as changes are made:
forge tailwind compile --watch
Then include the compiled CSS in your base template <head>:
<link rel="stylesheet" href="{% static 'dist/tailwind.css' %}">
In your repo you will notice a new .forge directory that contains tailwind (the standalone CLI binary) and tailwind.version (to track the version currently installed).
You should add .forge to your .gitignore file.
Updating Tailwind
This package manages the Tailwind versioning by comparing .forge/tailwind.version to the FORGE_TAILWIND_VERSION variable that is injected into your tailwind.config.js file.
const FORGE_TAILWIND_VERSION = "3.0.24"
module.exports = {
theme: {
extend: {},
},
plugins: [
require("@tailwindcss/forms"),
],
}
When you run tailwind compile,
it will automatically check whether your local installation needs to be updated and will update it if necessary.
You can use the update command to update your project to the latest version of Tailwind:
tailwind update
Adding custom CSS
If you need to actually write some CSS,
it should be done in app/static/src/tailwind.css.
@tailwind base;
@tailwind components;
/* Add your own "components" here */
.btn {
@apply bg-blue-500 hover:bg-blue-700 text-white;
}
@tailwind utilities;
/* Add your own "utilities" here */
.bg-pattern-stars {
background-image: url("/static/images/stars.png");
}
Read the Tailwind docs for more about using custom styles →
Deployment
If possible, you should add static/dist/tailwind.css to your .gitignore and run the forge tailwind compile --minify command as a part of your deployment pipeline.
When you run forge tailwind compile, it will automatically check whether the Tailwind standalone CLI has been installed, and install it if it isn't.
When using Forge on Heroku, we do this for you automatically in our Forge buildpack.
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
File details
Details for the file forge_tailwind-1.0.0.tar.gz.
File metadata
- Download URL: forge_tailwind-1.0.0.tar.gz
- Upload date:
- Size: 6.0 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: poetry/1.3.2 CPython/3.11.1 Linux/5.15.0-1031-azure
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | c549568a13a162e65a15c7a0580d0fcaf34cbcc159cc94d15ce2546550c557b8 |
|
| MD5 | 4f3b50da67b838cce6bf3dab08e1118c |
|
| BLAKE2b-256 | 5a33c195c7171d0daec713d2be9aae952bf1353d7e122e6060eefc16b7f8fdd1 |
File details
Details for the file forge_tailwind-1.0.0-py3-none-any.whl.
File metadata
- Download URL: forge_tailwind-1.0.0-py3-none-any.whl
- Upload date:
- Size: 6.5 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: poetry/1.3.2 CPython/3.11.1 Linux/5.15.0-1031-azure
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 701b58c03ba35a3c72bdad3d346618a13fef4e11411d30dfe10d1ace12180f13 |
|
| MD5 | 119b923f8c7549f1d15297abb16076bb |
|
| BLAKE2b-256 | c28fcd6915947992d053c2a83c96eaf30d6ff03edd17296dab5c67ac0c68d963 |
