# forge-tailwind
Use [Tailwind CSS](https://tailwindcss.com/) with [Django](https://www.djangoproject.com/) *without* requiring JavaScript or npm.
Made possible by the [Tailwind standalone CLI](https://tailwindcss.com/blog/standalone-cli).
```console
$ 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](https://pypi.org/project/forge-tailwind/):
```sh
pip install forge-tailwind
```
Create a new `tailwind.config.js` file in your project root:
```sh
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`:
```sh
forge tailwind compile
```
When you're working locally, add `--watch` to automatically compile as changes are made:
```sh
forge tailwind compile --watch
```
Then include the compiled CSS in your base template `<head>`:
```html
<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.
```js
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:
```sh
tailwind update
```
## Adding custom CSS
If you need to actually write some CSS,
it should be done in `app/static/src/tailwind.css`.
```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 →](https://tailwindcss.com/docs/adding-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](https://github.com/forgepackages/heroku-buildpack-forge/blob/master/bin/files/post_compile).
Raw data
{
"_id": null,
"home_page": "https://www.forgepackages.com/",
"name": "forge-tailwind",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8,<4.0",
"maintainer_email": "",
"keywords": "django,saas,forge,framework",
"author": "Dave Gaeddert",
"author_email": "dave.gaeddert@dropseed.dev",
"download_url": "https://files.pythonhosted.org/packages/5a/33/c195c7171d0daec713d2be9aae952bf1353d7e122e6060eefc16b7f8fdd1/forge_tailwind-1.0.0.tar.gz",
"platform": null,
"description": "# forge-tailwind\n\nUse [Tailwind CSS](https://tailwindcss.com/) with [Django](https://www.djangoproject.com/) *without* requiring JavaScript or npm.\n\nMade possible by the [Tailwind standalone CLI](https://tailwindcss.com/blog/standalone-cli).\n\n```console\n$ forge tailwind\nUsage: forge tailwind [OPTIONS] COMMAND [ARGS]...\n\n Tailwind CSS\n\nOptions:\n --help Show this message and exit.\n\nCommands:\n compile Compile a Tailwind CSS file\n init Install Tailwind, create a tailwind.config.js...\n update Update the Tailwind CSS version\n```\n\n## Installation\n\nFirst, install `forge-tailwind` from [PyPI](https://pypi.org/project/forge-tailwind/):\n\n```sh\npip install forge-tailwind\n```\n\nCreate a new `tailwind.config.js` file in your project root:\n\n```sh\nforge tailwind init\n```\n\nThis will also create a `tailwind.css` file at `static/src/tailwind.css` where additional CSS can be added.\nYou can customize where these files are located if you need to,\nbut this is the default (requires `STATICFILES_DIRS = [BASE_DIR / \"static\"]`).\n\nThe `src/tailwind.css` file is then compiled into `dist/tailwind.css` by running `tailwind compile`:\n\n```sh\nforge tailwind compile\n```\n\nWhen you're working locally, add `--watch` to automatically compile as changes are made:\n\n```sh\nforge tailwind compile --watch\n```\n\nThen include the compiled CSS in your base template `<head>`:\n\n```html\n<link rel=\"stylesheet\" href=\"{% static 'dist/tailwind.css' %}\">\n```\n\nIn 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).\nYou should add `.forge` to your `.gitignore` file.\n\n## Updating Tailwind\n\nThis 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.\n\n```js\nconst FORGE_TAILWIND_VERSION = \"3.0.24\"\n\nmodule.exports = {\n theme: {\n extend: {},\n },\n plugins: [\n require(\"@tailwindcss/forms\"),\n ],\n}\n```\n\nWhen you run `tailwind compile`,\nit will automatically check whether your local installation needs to be updated and will update it if necessary.\n\nYou can use the `update` command to update your project to the latest version of Tailwind:\n\n```sh\ntailwind update\n```\n\n## Adding custom CSS\n\nIf you need to actually write some CSS,\nit should be done in `app/static/src/tailwind.css`.\n\n```css\n@tailwind base;\n\n\n@tailwind components;\n\n/* Add your own \"components\" here */\n.btn {\n @apply bg-blue-500 hover:bg-blue-700 text-white;\n}\n\n@tailwind utilities;\n\n/* Add your own \"utilities\" here */\n.bg-pattern-stars {\n background-image: url(\"/static/images/stars.png\");\n}\n\n```\n\n[Read the Tailwind docs for more about using custom styles \u2192](https://tailwindcss.com/docs/adding-custom-styles)\n\n## Deployment\n\nIf 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.\n\nWhen you run `forge tailwind compile`, it will automatically check whether the Tailwind standalone CLI has been installed, and install it if it isn't.\n\nWhen using Forge on Heroku, we do this for you automatically in our [Forge buildpack](https://github.com/forgepackages/heroku-buildpack-forge/blob/master/bin/files/post_compile).\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Work library for Forge",
"version": "1.0.0",
"split_keywords": [
"django",
"saas",
"forge",
"framework"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "c28fcd6915947992d053c2a83c96eaf30d6ff03edd17296dab5c67ac0c68d963",
"md5": "119b923f8c7549f1d15297abb16076bb",
"sha256": "701b58c03ba35a3c72bdad3d346618a13fef4e11411d30dfe10d1ace12180f13"
},
"downloads": -1,
"filename": "forge_tailwind-1.0.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "119b923f8c7549f1d15297abb16076bb",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8,<4.0",
"size": 6525,
"upload_time": "2023-01-20T02:42:50",
"upload_time_iso_8601": "2023-01-20T02:42:50.482742Z",
"url": "https://files.pythonhosted.org/packages/c2/8f/cd6915947992d053c2a83c96eaf30d6ff03edd17296dab5c67ac0c68d963/forge_tailwind-1.0.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "5a33c195c7171d0daec713d2be9aae952bf1353d7e122e6060eefc16b7f8fdd1",
"md5": "4f3b50da67b838cce6bf3dab08e1118c",
"sha256": "c549568a13a162e65a15c7a0580d0fcaf34cbcc159cc94d15ce2546550c557b8"
},
"downloads": -1,
"filename": "forge_tailwind-1.0.0.tar.gz",
"has_sig": false,
"md5_digest": "4f3b50da67b838cce6bf3dab08e1118c",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8,<4.0",
"size": 6007,
"upload_time": "2023-01-20T02:42:51",
"upload_time_iso_8601": "2023-01-20T02:42:51.749573Z",
"url": "https://files.pythonhosted.org/packages/5a/33/c195c7171d0daec713d2be9aae952bf1353d7e122e6060eefc16b7f8fdd1/forge_tailwind-1.0.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-01-20 02:42:51",
"github": false,
"gitlab": false,
"bitbucket": false,
"lcname": "forge-tailwind"
}
JSON