Iftakharpy/Tailwind setup for Django.md

## Tailwind setup for Django.md

      
    Raw
  

              Tailwind setup for Django.md
            
          
    Requirements


Install Node.js and npm
Install Django with pip

Steps


Start Django project
django-admin startproject mysite


Change working directory to the project directory
cd mysite


Start a new app
python manage.py startapp myapp


Create directory for static files

For Linux
mkdir static/css/tailwind


For windows
mkdir static\css\tailwind


Edit settings of your django project. Don't forget to remove or comment out 'django.contrib.staticfiles', line in INSTALLED_APPS. Add your apps and STATIC_ROOT. 
 File: mysite/settings.py
import os

...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    # 'django.contrib.staticfiles',

    # created apps
    'myapp',
]

...

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'static'

STATIC_FILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    BASE_DIR / 'static',
    ...
]

Add url and document root to mysite/urls.py file.
...
from django.contrib import admin
from django.urls.conf import include    
from django.urls import path

# static
from django.conf import settings
from django.conf.urls.static import static

...

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls'))

    ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

To use TailwindCSS in a django template follow the structure. File path myapp/templates/myapp/home.html
{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <!-- load tailwind css -->
        <link rel="stylesheet" href="{% static 'css/tailwind/style.min.css' %}">
    </head>
    <body>
        <h1 class="text-8xl bg-gray-900">Hello world</h1>
    </body>
</html>

Don't forget to add views to your views.py and then add the view to your urls.py file. 

File: myapp/views.py
# views.py

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, 'myapp/home.html')
File: myapp/urls.py
# urls.py

from django.urls import path

#views
from .views import home

urlpatterns = [
    path('', home)
]

Create directory for tailwind
mkdir jsTailwind && cd jsTailwind


Init the directory as npm project
npm init -y


Install requirements for Tailwind CSS
npm install tailwindcss autoprefixer clean-css-cli


Setup Tailwind CSS
npx tailwindcss init -p


Add build script
{
    ...
    scripts: {
        "build": "tailwind build ../static/css/tailwind/tailwind.css -o ../static/css/tailwind/style.css && cleancss -o ../static/css/tailwind/style.min.css ../static/css/tailwind/style.css"
        }
    ...
}
Here tailwind build tailwind.css -o style.css generates the CSS file using tailwind.css as entry point and cleancss -o style.min.css style.css generates minified CSS file using style.css as input file.
Configure tailwind.config.js file details. Purge css documentation.
module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },

    darkMode: 'media', //to enable set 'media' or 'class'

    purge: {
        enabled: false, //true for production build
      
        //analyze files
        content: [
            '../**/*.html',
            // '../**/*.js',
        ],
      
        // css files
        css: [
            '../css/custom-style.css'
        ],

        //include selectors('.random', '#yep', 'button', regex: '^nav-') in the production build
        safelist: ['random', 'yep', 'button', /^nav-/],
        //exclude selectors from production build
        blocklist: ['usedClass', /^nav-/],

        //remove all unused styles
        mode: 'all',  
        preserveHtmlElements: false,
      
        // These options are passed through directly to PurgeCSS
        options: {
            keyframes: true,
            fontFace: true,
            variables: true
        },
    },

    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}

Make tailwind entry point. In static/css/tailwind directory create tailwind.css file and copy paste the following layers.
@tailwind base;
@tailwind components;
@tailwind utilities;

To build for production edit jsTailwind/tailwind.config.js set purge.enabled = true and run the command while you are in static/css/tailwind directory. For development set purge.enabled = false in jsTailwind/tailwind.config.js file.
npm run build