🚀 This repository consists about How you can use TailwindCSS framework within Django Server.
🤔 Yeah !! I know there are some packadges on this topic. But they also do the same steps like how I have done. But they lack proper changes in CSS-reloading (What I have faced 🙂)
🐎 That's why , without using those packadges , Let's manually create the environment. Believe me 🌝, that will be a more persistent alternative.
🔥 Although There are two more ways - 1) Using PlayCDN or 2) Connecting Tailwind Server Via REST API (because here the frontend is part of another project)
💡 Let's see How we can build this configuration properly .
❗❗This Technique (especially due to the effect of Django-Compressor) , may hamper your django-admin pannel's Styling
🔔 Django (Any Version , Recommended >=3.5)
🔔 Django-Compressor (For Converting the Tailwind CSS into Vanilla CSS )
🔔 Django-Browser-Reload (To Reload the all static (CSS , JS) changes in screen)
🔔 Tailwind Css (Any Version)
🔔 Any Database (For Newbiees , Prefer either Sqlite or Postgres )
python -m venv venv
.\venv\Scripts\activate
In the beginning , let's create the Django Server. Run the Following Commands to set the environment.
- Install Django
python -m pip install django- Create a Project (You can create an APP also, but for newbiees I prefer , just create the project and make necessary changes in it)
django-admin startproject myapp- Install Django-compressor and Django-browser-reload
python -m pip install django-compressor django-browser-reload npm init -y
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init -pNow let's configure the project. Before that Create two directories - templates , static in that directory where manage.py exists.
- Settings.py
INSTALLED_APPS = [
...
'compressor', #new
'django_browser_reload' #new
]
MIDDLEWARE = [
...
"django_browser_reload.middleware.BrowserReloadMiddleware", # new
]
TEMPLATES = [
{
...
'DIRS': [BASE_DIR / 'templates'], # new
...
}
...
]
COMPRESS_ROOT = BASE_DIR / 'static' # new
COMPRESS_ENABLED = True # new
STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',) # new- urls.py
from django.urls import path , include
from .views import index
urlpatterns = [
...
path('',index,name='index'),
path("__reload__/", include("django_browser_reload.urls"))
]- views.py (Create this file , this file automatically comes with django-APPS)
from django.shortcuts import render
def index(request):
return render(request, 'index.html')- templates : Folder for storing .html files
- static : For storing .css files , create two file - input.css , output.css (this css file will contain the compressed version of tailwindcss)
Now Let's configure some files that came after the installation of tailwindcss
- tailwind.config.js
module.exports = {
...
content: ['./templates/**/*.html'],
...
}- Add this lines in input.css
@tailwind base;
@tailwind components;
@tailwind utilities;- Now run two commands (every time when you do any changes in css using tailwind)
npx tailwindcss -i ./static/input.css -o ./static/output.css
python manage.py runserver- Watch this screenshot and check once with your project structure
- base.html :
{% load compress %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<title>Django + Tailwind CSS</title>
{% compress css %}
<link rel="stylesheet" href="/static/output.css">
{% endcompress %}
</head>
<body class="bg-green-50">
<div class="container mx-auto mt-4">
{% block content %}
{% endblock content %}
</div>
</body>
</html>- index.html :
{% extends "base.html" %}
{% block content %}
<h1 class="say-name font-extrabold text-center text-6xl">MY NAME IS PARTHIB</h1>
{% endblock content %}