Tailwind CSS Framework for Django projects
Project description
The integration of Tailwind CSS framework with Django a.k.a. Django + Tailwind = ❤
Quick start
-
Install the python package django-tailwind from pip
pip install django-tailwindAlternatively, you can download or clone this repo and run
pip install -e .. -
Add
tailwindto INSTALLED_APPS in settings.py -
Create a tailwind-compatible Django-app, I like to call it
theme:python manage.py tailwind init theme -
Add your newly created
themeapp to INSTALLED_APPS in settings.py -
In settings.py, register tailwind app by adding the following string:
TAILWIND_APP_NAME = 'theme' -
Run a command to install all necessary dependencies for tailwind css:
python manage.py tailwind install -
Now, go and start tailwind in dev mode:
python manage.py tailwind start -
Django Tailwind comes with a simple
base.htmltemplate that can be found underyourtailwindappname/templates/base.html. You can always extend it or delete it if you have own layout. -
If you're not using
base.htmltemplate provided with Django Tailwind, addstyles.min.cssto your ownbase.htmltemplate file:<link rel="stylesheet" href="{% static 'css/styles.css' %}" type="text/css" />
-
You should now be able to use Tailwind CSS classes in your html.
-
To build a production version of CSS run:
python manage.py tailwind build.
PurgeCSS setup
To avoid importing all of Tailwind (resulting in a massive CSS filesize), set up the purge configuration in tailwind.config.js.
This file is located in the static_src folder of the app created by tailwind init {APP_NAME}.
For example, your tailwind.config.js file could look like:
module.exports = {
purge: [
// Templates within theme app (e.g. base.html)
'../templates/**/*.html',
// Templates in other apps
'../../templates/**/*.html',
],
...
}
Note that you may need to adjust those paths to suit your specific project layout. It is important to ensure that all of your HTML files are covered (or files with contain HTML content, such as .vue or .jsx files), to enusre PurgeCSS can whitelist all of your classes.
For more information on this, check out the "Controlling File Size" page of the Tailwind docs: https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css - particularly the "Removing Unused CSS" section, although the entire page is a useful reference.
To help speed up development builds, PurgeCSS is only run when you use the tailwind build management command (to create a production build of your CSS).
NPM executable path configuration
Sometimes (especially on Windows), Python executable can't find NPM installed in the system.
In this case, you need to set NPM executable path in settings.py file manually (Linux/Mac):
NPM_BIN_PATH = '/usr/local/bin/npm'
On windows it might look like:
NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd"
Please note that NPM path of your system may be different. Try to run which npm in your
command line to get the path.
Bugs and suggestions
If you have found a bug, please use the issue tracker on GitHub.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django_tailwind-0.11.0-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | a724e0fc612bfbcb566c32cefd5bf52ca1bdfe83b613c2adaebe4110195c8cf1 |
|
| MD5 | 1caaf202cac27d54200223ccbd8ad13f |
|
| BLAKE2b-256 | da23ad6bdde4484be2cbfffdfca27001fc63724288e9e147dc645318e00f8a01 |
