76
loading...
Tailwindcss: Fall in Love with Writing CSS Again for your Django Application
If you're a developer, chances are that you've been in this situation before. You're writing CSS for your Django app, and it's not really coming naturally to you. The code is looking sloppy and unorganized, so the whole project looks like a mess! That's where Tailwindcss comes in handy: You can start using Tailwindcss to write clean and organized CSS for your Django application and forget about messy CSS for the rest of your life!
In this post, we are going to see how you can install Tailwindcss for your Django application.
virtualenv -p python3 tailwindcss && source tailwindcss/bin/activatepip3 install djangodjango-admin startproject mysite && cd mysite && python3 manage.py startapp corepython3 manage.py runservermkdir static && mkdir static/cssmkdir jstools && cd jstoolsjstools folder
npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -pscripts section to following
"scripts": {
"build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css",
"test": "echo \"Error: no test specified\" && exit 1"
},module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
enabled: false, //true for production build
content: [
'../**/templates/*.html',
'../**/templates/**/*.html'
]
},
theme: {
extend: {},
},
variants: {},
plugins: [],
}tailwind.css and add the following in it
@tailwind base;
@tailwind components;
@tailwind utilities;jstools directory and run:
npm run buildThis generates
styles.css and styles.min.cssstyles.min.css and voilà you have tailwind in your project
<link href="${static.url('css/style.min.css')}" rel="stylesheet">76