Develop with Tailwind CSS in Django flavour.
Project description
English | 中文
django-tailwindcss
Develop with Tailwind CSS in Django flavour.
Quick Start
1. Install django-tailwindcss from pip
pip install django-tailwindcss
2. Download Tailwind CSS CLI file and create tailwind.config.js
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
3. Add tailwindcss to your settings.INSTALLED_APPS
INSTALLED_APPS = [
...
"tailwindcss",
...
]
4. Create these variables in your settings
# BASE_DIR = Path(__file__).resolve().parent
TAILWINDCSS_CLI_FILE = BASE_DIR / 'tailwindcss-linux-x64'
TAILWINDCSS_CONFIG_FILE = BASE_DIR / 'tailwind.config.js'
5. Use tailwindcss tag in your base template
{% load tailwindcss %}
<html>
<head>
...
{% tailwindcss %}
...
</head>
...
</html>
Internal
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.
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
Close
Hashes for django_tailwindcss-0.2.2-py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 477dfb1d1c5a06f3bd94287700337f7f438361ae54fbb37da9717b30d48a82dd |
|
| MD5 | 5d31adf9614e6818d77d72e8886203ab |
|
| BLAKE2b-256 | 3696cbbd2585ae39b740533ed718cbbc6ca9653532ad79db90a44bcbe8995e8d |
