The blog.
Patterns, performance tips, and updates on Astro and Tailwind CSS to help you ship faster.
-
Keep AGENTS.md true
An outdated AGENTS.md is worse than none, because the agent trusts it. The habit that keeps the brief accurate, and how to make the agent update it.
Read more -
Why Astro is cropping your images (and how to stop it)
Astro <Image> clipping your images? It's almost always a width and height that don't match the source. How astro:assets fit works, and the fix.
Read more -
Why film grain makes your Remotion renders slow (and your files huge)
Two 15-second Remotion videos: one renders in 19 seconds at 11 MB, the other in 25 at 33 MB. What footage and film grain cost, and what to do.
Read more -
Before you trust a SKILL.md
Agent skills are instructions your AI follows without asking twice, which makes them an attack surface. How to vet a skill before it touches your code.
Read more -
Boring prompts are the goal
If your prompts to coding agents keep growing, the project is missing context. Why one-line prompts mean the setup is right, and how to get there.
Read more -
Cursor rules vs AGENTS.md vs skills: where each thing goes
AI coding tools read three kinds of context files. A field guide to briefs, rules and skills: what each is for, how they load, and which one to use.
Read more -
design.md or a design skill? Where your brand guidance should live
Vercel's design.md keeps agent-made pages on-brand from one public file. When design guidance belongs at a URL, and when it belongs in your repo.
Read more -
Free Astro skills for your AI coding agent
Three free agent skills that teach Cursor, Claude Code and other AI tools Astro + Tailwind best practices, SEO wiring and content collections.
Read more -
Our docs videos are code
Every video in the Lexington docs is rendered from a script in the repo, not recorded. The setup, and why a docs change is a re-render, not a re-shoot.
Read more -
text-white/50 and opacity-50 are not the same thing
Tailwind fades things two ways: color alpha or element opacity. They composite differently, and that shows up in borders, icons and strikethroughs.
Read more -
What are agent skills? SKILL.md, explained
Agent skills are folders of Markdown instructions AI coding tools load when a task matches. How SKILL.md works, and what makes a skill good.
Read more -
What is AGENTS.md? The file AI coding tools read before they touch your code
AGENTS.md is a Markdown brief that tells AI coding agents how your project works. What goes in it, what to leave out, and a skeleton to start from.
Read more -
Four small Cursor rules I ship with every theme
Four scoped Cursor rules in every Lexington theme stop AI tools from unasked refactors, invented dependencies and broken content schemas. Here's why.
Read more -
The design skill that keeps AI-generated pages on-brand
Every Lexington theme ships a SKILL.md extracted from its own code: type, color tokens, spacing and components. How I build them, and why it works.
Read more -
Why every theme I sell ships with an AGENTS.md
AI coding tools produce generic output when they guess. What goes into the AGENTS.md in every Lexington theme, and how it changed customization.
Read more -
How to send an email campaign with Polar, Resend, and Cloudflare Workers
Send email campaigns in small batches with Polar customer data, Resend, Cloudflare Workers and D1, with unsubscribe links and deliverability checks.
Read more -
Pricing pages for 2026: Layouts, structure, and decision-making design
A curated look at 2026 pricing page layouts: structure, hierarchy, comparison systems and visual patterns that help users decide.
Read more -
Stunning hero sections for 2026: Layouts, patterns, and visual direction
Hero sections for 2026: bold layouts, modern composition, typography-led designs and the visual directions shaping web design.
Read more -
40 reliable free & open-source type libraries for serious work
A no-nonsense guide to professional free and open-source font libraries: legally safe, production-ready type for web, branding and digital products.
Read more -
I built and rebuilt 24 Astro themes without reusable components. It cost me a year of my life.
I built Astro themes without reusable components, then rewrote 24 of them with shared components and Tailwind CSS v4. The real cost of skipping systems.
Read more -
How I broke my SEO and slowly fixed it
My traffic fell from 1k daily visitors to under 500 after a refactor, canonical mistakes and a messy subdomain. What went wrong and what I fixed.
Read more -
25 Best Coding Fonts for Developers in 2026 - Free & Premium
Hand-tested monospaced fonts for VS Code, terminals, and modern IDEs. Compare free, open-source, and premium coding fonts for long sessions.
Read more -
Best Monospaced Google Fonts for 2026 (New Fonts from 2025)
The best monospaced Google Fonts released in 2025, picked for coding, data-heavy interfaces and technical products in 2026.
Read more -
Best New Sans-Serif Google Fonts for 2026 (Released in 2025)
The best new sans-serif Google Fonts released in 2025, reviewed for real UI design, SaaS products and long-term use in 2026.
Read more -
Best New Serif Google Fonts for 2026 (Released in 2025)
The best new serif Google Fonts released in 2025, reviewed for modern UI design, content platforms and long-lived digital products in 2026.
Read more -
How to build a full-screen navigation with Tailwind CSS and JavaScript
Learn how to create a smooth, full-screen overlay navigation menu using Tailwind CSS for styling and vanilla JavaScript for state management.
Read more -
Geist Font: Complete Guide to OpenType Features in CSS & Tailwind
Use Geist Sans and Geist Mono with stylistic sets, ligatures, character variants, Tailwind v4 tokens, Figma, and copy-paste CSS examples.
Read more -
How to use Inter stylistic sets and OpenType features in CSS & Tailwind CSS variables
A practical guide to using Inter font's OpenType features, stylistic sets (ss01–ss08), and character variants (cv01–cv13) in CSS for better web typography.
Read more -
Astro Content Collections: Real-World schemas you can steal
A production-ready Astro content config from real client projects: posts, services, projects, properties, legal pages, FAQs and recursive navigation.
Read more -
How to build a character limit textarea with Tailwind CSS and Alpine.js
Guide writers with a live character counter and automatic ring warning when they exceed your threshold, built with Tailwind CSS and Alpine.js.
Read more -
How to build a timeline with side numbers using Tailwind CSS
Design a product release timeline that shows side-aligned dates, a vertical rail, and gradient cards using pure Tailwind CSS utilities.
Read more -
How to build a responsive pricing table with Tailwind CSS and Alpine.js for pricing toggle.
Recreate a three-tier pricing table with a billing toggle and grouped feature lists, using Tailwind CSS and a little Alpine.js.
Read more -
How to build a spellcheck-enabled textarea with Tailwind CSS and Alpine.js
Add an Alpine-powered spellcheck toggle to a Tailwind CSS textarea so writers can choose whether the browser should flag typos.
Read more -
How to build a team grid section with a cta card using Tailwind CSS
Build a responsive team grid with profile cards, a central spotlight block, aspect-ratio images and inline social links in Tailwind CSS.
Read more -
How to build an emoji picker textarea with Tailwind CSS and Alpine.js
Enhance any message box with a simple emoji picker powered by Alpine.js state and Tailwind CSS styling—no external libraries required.
Read more -
How to build an OTP input group with Tailwind CSS and Alpine.js
Create a polished 6-digit OTP input that uses Alpine.js for caret simulation, validation, and focus styling—all wrapped in accessible Tailwind CSS markup.
Read more -
How to create nested checkboxes with Alpine.js
Build a nested notification preferences control with Alpine.js and Tailwind CSS, including select-all, group toggles, and accurate indeterminate states.
Read more -
How to build a full-width mega menu with Tailwind CSS and Alpine.js
Craft a responsive, full-width mega menu using Tailwind CSS and Alpine.js with teleportation, backdrop, and dynamic alignment for precise positioning.
Read more -
How to build a responsive alternating timeline with Tailwind CSS
Create a clean, alternating vertical timeline using Tailwind CSS grid and flex utilities — no JavaScript required.
Read more -
How to build a responsive four‑step onboarding section with Tailwind CSS
Compose a clean, four‑step onboarding section with mobile and desktop separators, number badges, and elegant cards — all with Tailwind utilities.
Read more -
How to build a split-screen sign-in with an overlay card using Tailwind CSS and Alpine.js
Build a responsive split-screen sign-in layout with Tailwind CSS and Alpine.js, including an absolute overlay card on top of the hero image.
Read more -
How to build an Alpine.js testimonial carousel with right‑edge controls
Build an accessible, horizontally scrolling testimonial carousel with Tailwind CSS and Alpine.js, with controls at the right edge.
Read more -
How to build a responsive Bento grid with Tailwind CSS
Build a responsive Bento grid with Tailwind CSS, using column and row spans that adapt across breakpoints. Copy-and-paste examples included.
Read more -
How to build a Tailwind CSS + Alpine.js gallery with lightbox
Create a responsive image gallery using Tailwind CSS and Alpine.js with a keyboard-accessible lightbox, arrows, and dot indicators. Copy‑paste example included.
Read more -
How to build a Tailwind CSS + Alpine.js testimonial carousel (snap scroll)
Build a responsive testimonial carousel with Tailwind CSS and Alpine.js: snap scrolling, keyboard navigation and Prev/Next controls.
Read more -
How to build a scrollable table with a sticky header using Tailwind CSS
Create a vertically scrollable table with a sticky header using Tailwind CSS. Includes alignment tips, zebra striping, and a full working demo.
Read more -
How to build a selectable table with checkboxes using Alpine.js and Tailwind CSS
Build a table with row selection, a select-all checkbox, and live counts using Alpine.js and Tailwind CSS. Includes indeterminate state for partial selection.
Read more -
How to build a sorting table with images using Alpine.js and Tailwind CSS
Learn how to create a sortable table with avatars, flags, and dynamic sorting using Alpine.js and Tailwind CSS.
Read more -
Astro vs Gatsby in 2025: A Comprehensive Comparison
A comprehensive comparison of Astro and Gatsby in 2025, covering features, performance, use cases, and which to choose for your project.
Read more -
Astro vs WordPress in 2025: A Comprehensive Comparison
A comprehensive comparison of Astro and WordPress in 2025, covering features, performance, use cases, and which to choose for your project.
Read more -
Astro vs Next.js in 2025: A Comprehensive Comparison
A comprehensive comparison of Astro and Next.js in 2025, covering features, performance, use cases, and which to choose for your project.
Read more -
20 More Hidden Tailwind CSS Utilities (Part 2) - 2026 Edition
More underused Tailwind CSS v4 utilities for subgrid layouts, logical spacing, data variants, selection styles, and production UI polish.
Read more -
15 Hidden Tailwind CSS Utilities You're Not Using (2026)
A practical list of underused Tailwind CSS v4 utilities for layout, typography, forms, scroll behavior, and polished UI states, with copy-ready snippets.
Read more -
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.
Read more -
How to create a grouped checkbox tree with Alpine.js and Tailwind CSS
Build an interactive grouped checkbox tree with Alpine.js for state and Tailwind CSS for styling, ideal for notification preferences.
Read more -
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.
Read more -
How to build an Alpine.js onboarding modal with Tailwind CSS
Craft a multi-step welcome tour that works great on keyboard and touch.
Read more -
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.
Read more -
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.
Read more -
How to build a modern product page with Alpine.js and Tailwind CSS
Build a responsive product page with Alpine.js and Tailwind CSS: an image gallery, color and size selectors, and accessible details sections.
Read more -
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
Read more -
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.
Read more -
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.
Read more -
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
Read more -
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
Read more -
How to Use aspect-ratio in Tailwind CSS - Complete v4 Guide
Practical Tailwind aspect-ratio examples for responsive images, videos, cards, and hero sections, with v4 syntax and copy-paste snippets.
Read more -
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
Read more -
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.
Read more -
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.
Read more -
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.
Read more -
Tailwind CSS: Easy Styling for Websites
Learn Tailwind CSS v4 for simple, direct styling: the basics, responsive design, dark mode and a few clever tricks for modern websites.
Read more -
A guide to Tailwind CSS backgrounds.
A tutorial on background attachments, image control, gradient text, clipping effects, and professional design patterns
Read more -
How to use Obsidian to write your Astro content (zero scripts)
Write your Astro Markdown in Obsidian using symbolic links, for a dual workflow that keeps your writing space clean and your content in sync.
Read more -
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.
Read more -
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.
Read more -
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.
Read 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.
Read more -
Container Queries in Tailwind CSS
Learn how Tailwind CSS v4 supports container queries (`@container`) for component-level responsiveness using utility classes.
Read more -
Tailwind CSS v4.1 Cheat Sheet
A complete Tailwind CSS v4.1 cheat sheet: layout, spacing, typography, flexbox, grid and every core utility class, for quick reference.
Read more -
Mastering Tailwind CSS `nth-child` for Dynamic Styling
Use the nth-child selector in Tailwind CSS to target specific elements, create patterns and build flexible UIs, with practical examples.
Read more -
Dynamic Layouts: Master calc() with Astro & Tailwind CSS
Use CSS calc() in Astro and Tailwind CSS to build dynamic layouts, adaptive components and fluid UIs, with practical examples.
Read more -
Git tags tutorial: complete guide to version control tagging
Learn to create, manage and use Git tags for releases, deployments and milestones, with commands, best practices and real examples.
Read more -
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
Read more -
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.
Read more -
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.
Read more -
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.
Read more -
How to Convert HTML to Markdown with JavaScript for Astro and Tailwind CSS Projects
Build a JavaScript HTML-to-Markdown converter for Astro and Tailwind CSS sites, and copy page content as clean Markdown for AI workflows and docs.
Read more -
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 ).
Read more -
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.
Read more -
Creating a complex responsive grid layout with Tailwind CSS
Perfect for the so called bento grids
Read more -
Mastering Footer Placement: Tailwind CSS and Beyond
Keep your footer at the bottom of the page where it belongs, with Tailwind CSS techniques and a few extra layout strategies.
Read more -
Astro.js Key Concepts and Performance Optimization Techniques
Practical strategies for using Astro and Tailwind CSS to build faster, more responsive and SEO-friendly websites.
Read more -
A Comprehensive Guide to Astro.js and Tailwind CSS
A step-by-step Astro and Tailwind CSS tutorial, from setting up your environment to deploying fast, responsive websites.
Read more -
Exploring the Hidden Gems: Uncommon Semantic HTML Tags
A guide to uncommon semantic HTML tags, from <details> to <mark>, and how they improve accessibility, document structure and clarity.
Read more -
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.
Read more -
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.
Read more -
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.
Read more -
Defining typography on your Tailwind CSS project
This blog post shows how to add custom typography to your Tailwind CSS project, with example code.
Read more