English | 中文
Develop with Tailwind CSS in Django flavour.
pip install django-tailwindcss
CLI file can be download from https://github.com/tailwindlabs/tailwindcss/releases
tailwind.config.js can be found at https://tailwindcss.com/docs/installation
Example:
module.exports = {
content: ["./**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Store tailwindcss-linux-x64 (for linux) and tailwind.config.js at the same directory of manage.py.
And your project proj should be like:
proj
├── proj
│ └── settings.py
├── manage.py
├── tailwindcss-linux-x64
└── tailwind.config.js
INSTALLED_APPS = [
...
"tailwindcss",
...
]# BASE_DIR = Path(__file__).resolve().parent
TAILWINDCSS_CLI_FILE = BASE_DIR / 'tailwindcss-linux-x64'
TAILWINDCSS_CONFIG_FILE = BASE_DIR / 'tailwind.config.js'
# For file mode
TAILWINDCSS_OUTPUT_FILE = 'style.css'{% load tailwindcss %}
<html>
<head>
...
{% tailwindcss %}
...
</head>
...
</html>Use maketailwindcss command to generate tailwindcss file in Path(settings.STATIC_ROOT) / settings.TAILWINDCSS_OUTPUT_FILE.
python manage.py maketailwindcss
{% tailwindcss %} output will be changed to use exist file.
django-tailwindcss CSS generation step is deferred until the first visit to a page that uses the tailwindcss tag. The generated CSS is stored in the cache to speed up page loading and prevent blocking the Django process, and for modified and reloaded CSS there is still a waiting period before it takes effect automatically.
This works well with the default LocMemCache caching backend, but when using the DummyCache backend it degrades to a pre-0.3.0 state, as this backend has no cache at all.
Note that when using the Memcached, Redis, DatabaseCache, FileBasedCache caching backends, the cache is not automatically cleared as the LocMemCache backend is when the process is restarted, so this may result in out-of-date CSS being used after updating a file, for which the refreshtailwindcss management command has been added to facilitate manual refreshing of the cache.
python manage.py refreshtailwindcss
django-tailwindcss generates CSS each time django startup and file changes.
And {% tailwindcss %} outputs are same as:
<style>/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}...</style>So you usually only need to add it once.
If you add raw argument like {% tailwindcss raw=True %}, the output are same as:
/*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}...If you generated tailwindcss file, the output are same as:
<link rel="stylesheet" type="text/css" href="...">