<!-- This file is compiled from plain-tailwind/plain/tailwind/README.md. Do not edit this file directly. -->
# plain.tailwind
Integrate Tailwind CSS without JavaScript or npm.
Made possible by the [Tailwind standalone CLI](https://tailwindcss.com/blog/standalone-cli),
which is installed for you.
```console
$ plain tailwind
Usage: plain 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
Add `plain.tailwind` to your `INSTALLED_PACKAGES`:
```python
# settings.py
INSTALLED_PACKAGES = [
# ...
"plain.tailwind",
]
```
Create a new `tailwind.config.js` file in your project root:
```sh
plain 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_DIR = BASE_DIR / "static"`).
The `src/tailwind.css` file is then compiled into `dist/tailwind.css` by running `tailwind compile`:
```sh
plain tailwind compile
```
When you're working locally, add `--watch` to automatically compile as changes are made:
```sh
plain tailwind compile --watch
```
Then include the compiled CSS in your base template `<head>`:
```html
{% tailwind_css %}
```
In your repo you will notice a new `.plain` directory that contains `tailwind` (the standalone CLI binary) and `tailwind.version` (to track the version currently installed).
You should add `.plain` to your `.gitignore` file.
## Updating Tailwind
This package manages the Tailwind versioning by comparing the value in your `pyproject.toml` to `.plain/tailwind.version`.
```toml
# pyproject.toml
[tool.plain.tailwind]
version = "3.4.1"
```
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
plain 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 `plain tailwind compile --minify` command as a part of your deployment pipeline.
When you run `plain tailwind compile`, it will automatically check whether the Tailwind standalone CLI has been installed, and install it if it isn't.
When using Plain on Heroku, we do this for you automatically in our [Plain buildpack](https://github.com/plainpackages/heroku-buildpack-plain/blob/master/bin/files/post_compile).
Raw data
{
"_id": null,
"home_page": "https://plainframework.com",
"name": "plain.tailwind",
"maintainer": null,
"docs_url": null,
"requires_python": "<4.0,>=3.11",
"maintainer_email": null,
"keywords": null,
"author": "Dave Gaeddert",
"author_email": "dave.gaeddert@dropseed.dev",
"download_url": "https://files.pythonhosted.org/packages/ad/87/247733c2e5cb5dd78bd5717eaae5c8985ed71c8ee343bcf5e96ffdfca41a/plain_tailwind-0.3.1.tar.gz",
"platform": null,
"description": "<!-- This file is compiled from plain-tailwind/plain/tailwind/README.md. Do not edit this file directly. -->\n\n# plain.tailwind\n\nIntegrate Tailwind CSS without JavaScript or npm.\n\nMade possible by the [Tailwind standalone CLI](https://tailwindcss.com/blog/standalone-cli),\nwhich is installed for you.\n\n```console\n$ plain tailwind\nUsage: plain 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\nAdd `plain.tailwind` to your `INSTALLED_PACKAGES`:\n\n```python\n# settings.py\nINSTALLED_PACKAGES = [\n # ...\n \"plain.tailwind\",\n]\n```\n\nCreate a new `tailwind.config.js` file in your project root:\n\n```sh\nplain 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_DIR = BASE_DIR / \"static\"`).\n\nThe `src/tailwind.css` file is then compiled into `dist/tailwind.css` by running `tailwind compile`:\n\n```sh\nplain tailwind compile\n```\n\nWhen you're working locally, add `--watch` to automatically compile as changes are made:\n\n```sh\nplain tailwind compile --watch\n```\n\nThen include the compiled CSS in your base template `<head>`:\n\n```html\n{% tailwind_css %}\n```\n\nIn your repo you will notice a new `.plain` directory that contains `tailwind` (the standalone CLI binary) and `tailwind.version` (to track the version currently installed).\nYou should add `.plain` to your `.gitignore` file.\n\n## Updating Tailwind\n\nThis package manages the Tailwind versioning by comparing the value in your `pyproject.toml` to `.plain/tailwind.version`.\n\n```toml\n# pyproject.toml\n[tool.plain.tailwind]\nversion = \"3.4.1\"\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\nplain tailwind 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 `plain tailwind compile --minify` command as a part of your deployment pipeline.\n\nWhen you run `plain tailwind compile`, it will automatically check whether the Tailwind standalone CLI has been installed, and install it if it isn't.\n\nWhen using Plain on Heroku, we do this for you automatically in our [Plain buildpack](https://github.com/plainpackages/heroku-buildpack-plain/blob/master/bin/files/post_compile).\n",
"bugtrack_url": null,
"license": "BSD-3-Clause",
"summary": "Integrate Tailwind CSS with Plain.",
"version": "0.3.1",
"project_urls": {
"Documentation": "https://plainframework.com/docs/",
"Homepage": "https://plainframework.com",
"Repository": "https://github.com/dropseed/plain"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "8691bd2b34b0555a4fdde4c3059d46999001b3de44446c4fab2c23a1442a9387",
"md5": "690c0be277b5b15f766cb4660f5f91e3",
"sha256": "a196e3bf16b91deb96c5439d0f0102f3de73a034a7060bc26050fa8bd9b4b105"
},
"downloads": -1,
"filename": "plain_tailwind-0.3.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "690c0be277b5b15f766cb4660f5f91e3",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": "<4.0,>=3.11",
"size": 9488,
"upload_time": "2024-10-15T19:51:58",
"upload_time_iso_8601": "2024-10-15T19:51:58.632230Z",
"url": "https://files.pythonhosted.org/packages/86/91/bd2b34b0555a4fdde4c3059d46999001b3de44446c4fab2c23a1442a9387/plain_tailwind-0.3.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "ad87247733c2e5cb5dd78bd5717eaae5c8985ed71c8ee343bcf5e96ffdfca41a",
"md5": "d0a1041f62be5dd4ebd3ca70f990820e",
"sha256": "98d3190c19ed36bcee752a039f2a57dc18ab61c0102c1e156ea6e688ccda4c4c"
},
"downloads": -1,
"filename": "plain_tailwind-0.3.1.tar.gz",
"has_sig": false,
"md5_digest": "d0a1041f62be5dd4ebd3ca70f990820e",
"packagetype": "sdist",
"python_version": "source",
"requires_python": "<4.0,>=3.11",
"size": 6004,
"upload_time": "2024-10-15T19:51:59",
"upload_time_iso_8601": "2024-10-15T19:51:59.869748Z",
"url": "https://files.pythonhosted.org/packages/ad/87/247733c2e5cb5dd78bd5717eaae5c8985ed71c8ee343bcf5e96ffdfca41a/plain_tailwind-0.3.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-10-15 19:51:59",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "dropseed",
"github_project": "plain",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "plain.tailwind"
}
JSON
