Django and tailwind css connection

Steps to connect django and tailwind css

1. Create django project using command: django-admin startproject myproject
2. create django app using command: python manage.py startapp myapp
3. Install django app in settings.py file:

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

4. Setup static files in settings.py file:

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

5. Setup urls.py file present in myproject folder:

from django.contrib import admin
from django.urls import path
from polls import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name="home")
]

if(settings.DEBUG):
    urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)

6. Now create static folder where manage.py file is present
7. Create css folder in static folder static/css
8. Create tailwind.css file in css folder static/css/tailwind.css
9. In tailwind.css file add following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

10. Now come back to the folder where manage.py file is present and create a folder named jstools
11. Now go to jstools folder and run following command:

npm init -y

npm install tailwindcss autoprefixer clean-css-cli

npx tailwindcss init -p

12. In jstools>package.json file in script section add following code:

...
"scripts": {
    "build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css"
  },
...

13. Now open jstools>tailwind.config.js file and replace all code by following code:

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    purge: {
        enabled: false, //true for production build
        content: [
            '../**/templates/*.html',
            '../**/templates/**/*.html'
        ]
    },
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}

14. In jstools folder finally run following command:

npm run build

Above command will create style.css and style.min.css files in static/css folder.

Github