Django Tailwind CSS Alpine.js Tutorial

Objectives

This FREE tutorial series will teach you how to integrate Tailwind CSS, Alpine.js with Django, and how to make them work together.

By the end of this course, you will be able to:

1. Learn to use django-tailwind to setup Tailwind CSS in Django project.
2. Use python-webpack-boilerplate to jump start frontend project bundled by Webpack and setup Tailwind CSS
3. How to optimize Tailwind using PurgeCSS
4. What is Tailwind JIT mode and the benefit.
5. How to make web page auto reload on code change during development
6. Render Django form with Tailwind style.
7. Integrate Alpine.js with Django and develop Alpine.js component.
8. Build custom Date Picker form widget with Alpine.js and Tailwind CSS
9. Do Django form validation in Tailwind Modal with Alpine.js and HTMX
10. Build a simple Task app with Django, Tailwind CSS, Alpine.js and HTMX
11. Deploy Django Tailwind CSS project with Docker

The source code is also available https://github.com/AccordBox/django-tailwind-alpine-htmx

And the demo is available on Heroku Task App

Tech

• Django
• python-webpack-boilerplate
• django-crispy-forms
• crispy-tailwind
• Tailwind CSS
• Alpine.js
• HTMX

Table of content

Django Tailwind CSS, Alpine.js Tutorial Series:

1. Introduction
2. How to Setup Tailwind CSS with Django (Part 1)
3. How to Setup Tailwind CSS with Django (Part 2)
4. Optimize Tailwind CSS in Django
5. Render Django Form with Tailwind CSS Style
6. Integrate Alpine.js with Django (Part 1) (coming soon)
7. Integrate Alpine.js with Django (Part 2) (coming soon)
8. Build Task List with Tailwind CSS, Alpine.js and Django (coming soon)
9. Django Form Validation in Tailwind Modal (Alpine.js) (coming soon)
10. Django Form Validation in Tailwind Modal (Alpine.js + HTMX) (coming soon)
11. How to deploy Django Tailwind CSS project with Docker (coming soon)

The source code is on Github/django-tailwind-alpine-htmx, demo is on Heroku

Recommended Posts:

1. Lightweight Javascript Framework Review (For Django Developers)