|
37 | 37 | python manage.py tailwind init
|
38 | 38 | ```
|
39 | 39 |
|
| 40 | + If you are using [pdm](https://pdm-project.org/), you might need to ensure `pip` is installed in your virtualenv: |
| 41 | + |
| 42 | + ```bash |
| 43 | + pdm run python -m ensurepip |
| 44 | + ``` |
| 45 | + |
| 46 | + See [pdm's documentation](https://pdm-project.org/en/latest/usage/venv/#including-pip-in-your-virtual-environment) |
| 47 | + for more information. |
| 48 | + |
40 | 49 | > Note: By default, we create an app compatible with Tailwind CSS version 4. If you want to create an app compatible
|
41 | 50 | > with Tailwind CSS version 3, you can use the `--tailwind-version 3` flag:
|
42 | 51 |
|
43 | 52 | ```bash
|
44 | 53 | python manage.py tailwind init --tailwind-version 3
|
45 | 54 | ```
|
46 | 55 |
|
47 |
| -4. Add your newly created `'theme'` app to `INSTALLED_APPS` in `settings.py`: |
| 56 | +5. Add your newly created `'theme'` app to `INSTALLED_APPS` in `settings.py`: |
48 | 57 |
|
49 | 58 | ```python
|
50 | 59 | INSTALLED_APPS = [
|
|
54 | 63 | ]
|
55 | 64 | ```
|
56 | 65 |
|
57 |
| -5. Register the generated `'theme'` app by adding the following line to `settings.py`: |
| 66 | +6. Register the generated `'theme'` app by adding the following line to `settings.py`: |
58 | 67 |
|
59 | 68 | ```python
|
60 | 69 | TAILWIND_APP_NAME = 'theme'
|
61 | 70 | ```
|
62 | 71 |
|
63 |
| -6. Install *Tailwind CSS* dependencies by running the following command: |
| 72 | +7. Install *Tailwind CSS* dependencies by running the following command: |
64 | 73 |
|
65 | 74 | ```bash
|
66 | 75 | python manage.py tailwind install
|
|
72 | 81 | python manage.py tailwind install --no-package-lock
|
73 | 82 | ```
|
74 | 83 |
|
75 |
| -7. The *Django Tailwind* comes with a simple `base.html` template located at |
| 84 | +8. The *Django Tailwind* comes with a simple `base.html` template located at |
76 | 85 | `your_tailwind_app_name/templates/base.html`. You can always extend or delete it if you already have a layout.
|
77 | 86 |
|
78 |
| -8. If you are not using the `base.html` template that comes with *Django Tailwind*, add `{% tailwind_css %}` to |
| 87 | +9. If you are not using the `base.html` template that comes with *Django Tailwind*, add `{% tailwind_css %}` to |
79 | 88 | your `base.html` template:
|
80 | 89 |
|
81 | 90 | ```html
|
|
90 | 99 |
|
91 | 100 | The `{% tailwind_css %}` tag includes Tailwind's stylesheet.
|
92 | 101 |
|
93 |
| -9. Let's also add and configure `django_browser_reload`, which takes care of automatic page and CSS refreshes in |
| 102 | +10. Let's also add and configure `django_browser_reload`, which takes care of automatic page and CSS refreshes in |
94 | 103 | development mode. Add it to `INSTALLED_APPS` in `settings.py`:
|
95 | 104 |
|
96 | 105 | ```python
|
|
102 | 111 | ]
|
103 | 112 | ```
|
104 | 113 |
|
105 |
| -10. Staying in `settings.py`, add the middleware: |
| 114 | +11. Staying in `settings.py`, add the middleware: |
106 | 115 |
|
107 | 116 | ```python
|
108 | 117 | MIDDLEWARE = [
|
|
115 | 124 | The middleware should be listed after any that encode the response, such as Django’s `GZipMiddleware`. The
|
116 | 125 | middleware automatically inserts the required script tag on HTML responses before `</body>` when `DEBUG` is `True`.
|
117 | 126 |
|
118 |
| -11. Include `django_browser_reload` URL in your root `urls.py`: |
| 127 | +12. Include `django_browser_reload` URL in your root `urls.py`: |
119 | 128 |
|
120 | 129 | ```python
|
121 | 130 | from django.urls import include, path
|
|
125 | 134 | ]
|
126 | 135 | ```
|
127 | 136 |
|
128 |
| -12. Finally, you should be able to use *Tailwind CSS* classes in HTML. Start the development server by running the |
| 137 | +13. Finally, you should be able to use *Tailwind CSS* classes in HTML. Start the development server by running the |
129 | 138 | following command in your terminal:
|
130 | 139 |
|
131 | 140 | ```bash
|
|
0 commit comments