Tailwind CSS hidden utilities you should know (Part 2)
Another batch of obscure Tailwind CSS v4 helpers—from subgrid layouts and data variants to logical spacing and selection styling—complete with use cases and snippets.
Blog
Tailwind CSS hidden utilities classes you should know.(Part 1)
51 Tailwind CSS v4 utilities classes. From container queries to @starting-style—with practical explanations and copy-ready snippets.
Understanding the rel='noopener noreferrer' Attribute
Learn what the rel='noopener noreferrer' attribute does in HTML links and why it's important for security and privacy.
How to create a grouped checkbox tree with Alpine.js and Tailwind CSS
Learn how to build an interactive grouped checkbox tree component using Alpine.js for state management and Tailwind CSS for styling, perfect for notification preferences.
How to create an update notification toast with Alpine.js and Tailwind CSS
Learn how to build an interactive update notification toast using Alpine.js for state management and Tailwind CSS for styling, perfect for app updates.
How to build an Alpine.js onboarding modal with Tailwind CSS
Craft a multi-step welcome tour that works great on keyboard and touch.
How to build an Alpine.js testimonial carousel with Tailwind CSS
Create a looping testimonial carousel powered by Alpine.js interactions and Tailwind CSS styling, complete with focus management and keyboard controls.
How to build a responsive sidebar with Tailwind CSS and Alpine.js
Step-by-step walkthrough building an accessible, responsive sidebar using Tailwind utilities and a tiny Alpine.js state object.
How to build a modern product page with Alpine.js and Tailwind CSS
A hands-on walkthrough for building a responsive product page with Alpine.js and Tailwind CSS. Includes image gallery, color and size selectors, and accessible details sections.
How to build a data table with sorting and pagination using Alpine.js
Create a fully functional data table with column sorting, pagination controls, and responsive design using Alpine.js and Tailwind CSS
How to build an interactive image gallery with lightbox using Alpine.js and Tailwind CSS
Create a fully accessible image gallery with lightbox modal, keyboard navigation, and smooth transitions using Alpine.js and Tailwind CSS.
How to create an interactive feature section with tabs using Alpine JS and Tailwind
Create an interactive feature grid with Alpine.js tabs, Tailwind CSS styling, and accessible state management.
How to create a multistep command bar with Tailwind CSS and Alpinejs
Build a three-step automation command bar with Alpine.js, including filtering, keyboard control, and dynamic forms
How to create a notification with Tailwind CSS and Alpinejs
Learn how to create a notification with Tailwind CSS and Alpinejs, including how to use Alpine.js directives to add and remove notifications dynamically
How to Use the `aspect-ratio` Utility in Tailwind CSS
A practical guide to using the aspect-ratio utility in Tailwind CSS for responsive images, videos, and containers. Learn best practices and real-world examples.
Using `astro-seo` to Simplify SEO in Astro Projects
Learn how to install and configure the `astro-seo` component in your Astro site—streamline titles, meta tags, Open Graph and Twitter cards
AI code editors and assistants for 2025
From Cursor to Gemini, here are the top AI coding tools in 2025 and what makes each one stand out.
How to use PagesCMS with Astro
Learn how to integrate PagesCMS with Astro for a complete headless CMS solution. Step-by-step guide with code examples.
15+ Tailwind CSS one liners that replace CSS rules
Think Tailwind CSS is just bloated markup? These 15+ utility classes will change your mind. See how single classes replace entire CSS blocks.
Things I have to remind myself as a developer
The path of a developer is rarely a straight line. Here are a few reflections on the messy, frustrating, and ultimately rewarding parts of the craft.
Tailwind CSS: Easy Styling for Websites
Learn how to use Tailwind CSS v4 for simple, direct styling. This guide covers the basics, making websites look good on any device, dark mode, and clever styling tricks. Perfect for building modern websites easily.
A guide to Tailwind CSS backgrounds.
A tutorial on background attachments, image control, gradient text, clipping effects, and professional design patterns
How to use Obsidian to write your Astro content (zero scripts)
Learn how to use Obsidian to write your Astro markdown projects using symbolic links for a powerful dual workflow that keeps your writing space clean and content perfectly synced.
How to Use Gradients in Tailwind CSS v4
A concise guide to implementing stunning linear, radial, and conic gradients in Tailwind CSS v4 with practical code examples.
How I created and published a VS Code theme
A hands-on walkthrough of creating a custom VS Code theme using Yo Code, customizing it, and publishing it on the Marketplace.
23 GitHub commands every developer should know
A practical guide to 23 essential Git and GitHub commands for everyday development. Learn how to clone, commit, push, merge, and more.
How to use GitHub admonitions ( also known as GitHub Alerts or Callouts )
Learn how to use GitHub's callout boxes like [!NOTE], [!WARNING], and [!TIP] to improve clarity in issues, PRs, and wikis. Copy-paste friendly guide included.
Container Queries in Tailwind CSS
Learn how Tailwind CSS v4 supports container queries (`@container`) for component-level responsiveness using utility classes.
Tailwind CSS v4.1 Cheat Sheet
A complete cheat sheet for Tailwind CSS v4.1, including layout, spacing, typography, flexbox, grid, and all core utility classes. Perfect for fast lookup and reference.
Mastering Tailwind CSS `nth-child` for Dynamic Styling
Unlock powerful dynamic styling in Tailwind CSS using the `nth-child` selector. Learn how to target specific elements, create patterns, and build flexible UIs with practical examples.
Dynamic Layouts: Master calc() with Astro & Tailwind CSS
Unlock responsive web design with CSS calc() in Astro and Tailwind CSS. Learn to create dynamic layouts, adaptive components, and fluid UIs with practical examples and advanced techniques.
Git tags tutorial: complete guide to version control tagging
Master Git tags for better version control. Learn to create, manage, and use Git tags for releases, deployments, and project milestones. Includes commands, best practices, and real examples.
Building a a multi-theme toggle with Astro and Tailwind CSS v4
Create a sleek theme switcher with default, dark, and accent modes using CSS custom properties and localStorage
How to create a three-state theme toggle with JavaScript: light, dark, and system preference
Learn how to create a comprehensive theme toggle that respects user preferences with three states: light, dark, and system detection.
How to add a claude help button to your website with JavaScript
Learn how to add a smart Claude button that opens Claude.ai with your page info already filled in. Simple JavaScript code for better user support.
How to add an ask ChatGPT button to your documentation with JavaScript
Learn how to add a smart Ask ChatGPT button that automatically opens ChatGPT with context about your current page.
How to Convert HTML to Markdown with JavaScript for Astro and Tailwind CSS Projects
Learn how to build a JavaScript HTML-to-Markdown converter perfect for Astro websites and Tailwind CSS projects. Copy webpage content as clean Markdown for AI workflows, documentation, and content migration.
How to upgrade an Astro JS project from Tailwind CSS v3 to Tailwind CSS v4
A quick guide on how to upgrade an your Astro JS project from Tailwind CSS v3 to Tailwind CSS v4 ( Alpha ).
Mastering tailwind CSS for perfect screen fit.
Explore Tailwind CSS utility classes for responsive design. Learn how svh, lvh, and dvh can ensure your site looks great on any device.
Creating a complex responsive grid layout with Tailwind CSS
Perfect for the so called bento grids
Mastering Footer Placement: Tailwind CSS and Beyond
Discover how to ensure your website's footer stays exactly where it should be, at the bottom, with Tailwind CSS techniques and additional strategies for impeccable web design.
Astro.js Key Concepts and Performance Optimization Techniques
Explore how Astro.js and Tailwind CSS revolutionize web development with unmatched performance optimizations. This guide dives into practical strategies for leveraging these powerful tools to build faster, more responsive, and SEO-friendly websites. Perfect for developers seeking to elevate their projects with cutting-edge technology.
A Comprehensive Guide to Astro.js and Tailwind CSS
Dive into the world of modern web development with our step-by-step guide on Astro.js and Tailwind CSS. From setting up your environment to deploying advanced, performance-optimized websites, this tutorial covers everything you need to create stunning, responsive web designs. Perfect for beginners and seasoned developers alike, learn how to harness the full potential of Astro.js and Tailwind CSS to elevate your web projects.
Exploring the Hidden Gems: Uncommon Semantic HTML Tags
Dive into the world of HTML with our guide to some of the most uncommon semantic tags. From <details> to <mark>, learn how these hidden gems can improve accessibility, enhance document structure, and bring clarity to your web content.
Lear how to center a div with CSS
Center a div with CSS using flexbox, grid, margin auto, and absolute positioning—horizontal, vertical, and responsive patterns with clear examples.
Learn how to center a div with Tailwind CSS
Learn how to center a div in Tailwind CSS using flex, grid, and margin utilities, with responsive patterns and tips to avoid common pitfalls.
The power of HTML semantic tags
Discover how semantic HTML boosts structure, accessibility, and SEO—use meaningful tags, headings, and landmarks to create cleaner, maintainable markup.
How to Use CSS variables to style highlighting text with Shiki and Astrojs
Master Shiki syntax highlighting in Astro.js with CSS variables. Customize and elevate your code's appearance effortlessly.
Comparing Astrojs, Next.js, Gatsby.js and Nuxtjs. Which is the Best?
A closer look at Astro.js—how islands, partial hydration, and file-based routing help you ship faster with less JS.
Defining typography on your Tailwind CSS project
This blog post shows how to add custom typography to your Tailwind CSS project, with example code.