Tag: tailwind

Integrating Django with Tailwind CSS

Django is one of the most popular Python full-stack web frameworks available. It's high-level design makes rapid development of web apps easier and cleaner while requiring less code. TailwindCSS is rapidly becoming the first choice CSS framework for styling modern websites. It's utility-first approach makes creating beautifully styled apps with consistent choices of colour, spacing, typography (and everything else CSS) far easier for a great looking website or app. In this article I'll show you how you can combine these two frameworks so that they work together without missing out on monitoring development changes with both npm and Django development servers.

Hero Banner in React, Tailwind CSS, and Glidejs

When we talk about a 'Hero banner' we're usually refering to the landing page of a website - where, at or near the top of the page there may be a large image with some text overlaid. In fact often there will be more than one image, and after a set period of time the image being displayed will change to one of the others. Usually this occurs with some sort of animation (slide-in, fade-in, etc.), again after a fixed period of time, and in a cyclical fashion. Hence, the 'Hero banner', can contain images that relate to the business, individuals, or individual that the website represents with the overlaying text conveying a message that is in someway relevent to it's location, perhaps including buttons that lead the user through to other content. And again this is usually placed at the top of the landing page. In this post I'll walk through how such a 'Hero banner' can be made using React, Tailwindcss, and the JavaScript library Glidejs.