Metadata-Version: 2.4
Name: plain.tailwind
Version: 0.11.1
Summary: Integrate Tailwind CSS with Plain.
Author-email: Dave Gaeddert <dave.gaeddert@dropseed.dev>
License-Expression: BSD-3-Clause
License-File: LICENSE
Requires-Python: >=3.11
Requires-Dist: plain<1.0.0
Requires-Dist: requests>=2.0.0
Requires-Dist: tomlkit>=0.12.1
Description-Content-Type: text/markdown

# 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:
  build  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 build`:

```sh
plain tailwind build
```

When you're working locally, add `--watch` to automatically compile as changes are made:

```sh
plain tailwind build --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 build --minify` command as a part of your deployment pipeline.

When you run `plain tailwind build`, 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).
