Django Tailwind CSS Alpine.js Tutorial

Michael Yin

Last updated on November 03 2021

Table of Contents

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

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


Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, and modern frontend tech.

He has published some ebooks on leanpub and tech course on testdriven.io.

He is also the founder of the AccordBox which provides the web development services.


Table of Contents

Frontend Guide For Python Dev

This FREE guide help Python developers to learn the Modern frontend tech

Learn More

This book will teach you how to build a SPA (single-page application) with React and Wagtail CMS

Read More

Subscribe

Get notified about new great Web Development Tutorial