Building a Tab System with Alpine.js and TailwindCSS / DRY Django Templates

We'll see how to conditionally apply styles to the tab links, based on whether the tab is active or not.

Finally, we'll see how to move repeated code to partial templates, and pass context into those templates for rendering.

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
02:20 Creating Alpine component
03:36 Showing tabs with x-show directive
05:05 Updating selected tabs
06:10 Adding active tab styles
10:11 Moving repeated code to partial template
11:14 with and include template tags

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

▶️ Full Playlist:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #alpinejs #python #tailwindcss

[Rob-cqnf]

A RSS Feed for your Blog would be super cool... btw, your Alpine with Django content is fantastic!^^

[Investigamer]

Could you cover paginating with Djang+Alpine? Would love to see an active paginated table using alpine to select pages, maybe throw in filter results by clicking a table header?