Plain is headed towards 1.0! Subscribe for development updates →

  1# plain.tailwind
  2
  3Integrate Tailwind CSS without JavaScript or npm.
  4
  5Made possible by the [Tailwind standalone CLI](https://tailwindcss.com/blog/standalone-cli),
  6which is installed for you.
  7
  8```console
  9$ plain tailwind
 10Usage: plain tailwind [OPTIONS] COMMAND [ARGS]...
 11
 12  Tailwind CSS
 13
 14Options:
 15  --help  Show this message and exit.
 16
 17Commands:
 18  build  Compile a Tailwind CSS file
 19  init     Install Tailwind, create a tailwind.config.js...
 20  update   Update the Tailwind CSS version
 21```
 22
 23## Installation
 24
 25Add `plain.tailwind` to your `INSTALLED_PACKAGES`:
 26
 27```python
 28# settings.py
 29INSTALLED_PACKAGES = [
 30    # ...
 31    "plain.tailwind",
 32]
 33```
 34
 35Create a new `tailwind.config.js` file in your project root:
 36
 37```sh
 38plain tailwind init
 39```
 40
 41This will also create a `tailwind.css` file at at the root of your repo.
 42
 43The `tailwind.css` file is then compiled into `app/assets/tailwind.min.css` by running `tailwind build`:
 44
 45```sh
 46plain tailwind build
 47```
 48
 49When you're working locally, add `--watch` to automatically compile as changes are made:
 50
 51```sh
 52plain tailwind build --watch
 53```
 54
 55Then include the compiled CSS in your base template `<head>`:
 56
 57```html
 58{% tailwind_css %}
 59```
 60
 61In 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).
 62You should add `.plain` to your `.gitignore` file.
 63
 64## Updating Tailwind
 65
 66This package manages the Tailwind versioning by comparing the value in your `pyproject.toml` to `.plain/tailwind.version`.
 67
 68```toml
 69# pyproject.toml
 70[tool.plain.tailwind]
 71version = "3.4.1"
 72```
 73
 74When you run `tailwind compile`,
 75it will automatically check whether your local installation needs to be updated and will update it if necessary.
 76
 77You can use the `update` command to update your project to the latest version of Tailwind:
 78
 79```sh
 80plain tailwind update
 81```
 82
 83## Adding custom CSS
 84
 85If you need to actually write some CSS,
 86it should be done in `app/static/src/tailwind.css`.
 87
 88```css
 89@tailwind base;
 90
 91
 92@tailwind components;
 93
 94/* Add your own "components" here */
 95.btn {
 96    @apply bg-blue-500 hover:bg-blue-700 text-white;
 97}
 98
 99@tailwind utilities;
100
101/* Add your own "utilities" here */
102.bg-pattern-stars {
103    background-image: url("/static/images/stars.png");
104}
105
106```
107
108[Read the Tailwind docs for more about using custom styles ](https://tailwindcss.com/docs/adding-custom-styles)
109
110## Deployment
111
112If possible, you should add `app/assets/tailwind.min.css` to your `.gitignore` and run the `plain tailwind build --minify` command as a part of your deployment pipeline.
113
114When you run `plain tailwind build`, it will automatically check whether the Tailwind standalone CLI has been installed, and install it if it isn't.
115
116When 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).