How to use Tailwind in Django and not die in the attempt?
Django is a powerful web framework that makes a lot of stuff for us. Tailwind is a CSS framework that allows us to make a great UI using utility classes.
First, we create a project (in my example I call it Poti because of my dog)
$ django-admin startproject poti
Now we create a core app and a folder for our static files
$ python manage.py startapp core
$ mkdir static
$ mkdir static/css
Then, we must create a folder for all our JS stuff
$ mkdir jstools && cd jstools
Once inside our folder, we run node here
$ npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -p
With all these dependencies installed, we must config…
package.json
...
"scripts": {
"build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css"
},
...
tailwind.config.js
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
enabled: false, //true for production build
content: [
'../**/templates/*.html',
'../**/templates/**/*.html'
]
},
theme: {
extend: {},
},
variants: {},
plugins: [],
}
And now make a Tailwind entry point in static/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
We are ready to build.
npm run build
This command will generate two files: styles.css and styles.min.css
Link styles.min.css to your templates and enjoy.
When you are developing and using all the capabilities of Tailwind remember to avoid the purge.