Skip to content

Latest commit

 

History

History
176 lines (138 loc) · 4.74 KB

README.md

File metadata and controls

176 lines (138 loc) · 4.74 KB
Raw

Dj-Tailwind

Integrating Django with Tailwind (Without Using any Packadge) Guide

🚀 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

Requirements :

🔔 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 )

Setup :

1. Install Virtualenv and Requirements.txt :

 python -m venv venv

 .\venv\Scripts\activate

2. Django Server setup

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

3. Install Tailwindcss (Along with Postcss and Vite)

 npm init -y
 npm install -D tailwindcss postcss autoprefixer vite
 npx tailwindcss init -p

4. Configuring project architechture in myapp

Now 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)

5. Configuring Tailwind Portions

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

Screenshot (870)

6. HTML file codes

  • 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 %}