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).