50% off
Full Access from $99 $198. Every theme and every future release, one payment.
All posts
An AGENTS.md that describes last month's codebase is worse than no AGENTS.md at all: the agent trusts it and builds on the wrong map. The habit that keeps the brief accurate, and how to make the agent do the updating for you.
If images rendered with Astro's <Image> component come out clipped or at the wrong aspect ratio, the cause is almost always a width/height pair that doesn't match the source file. How astro:assets fit works, and the ImageMetadata fix.
Two 15-second Remotion videos, same machine: one renders in 19 seconds at 11 MB, the other takes 25 and weighs 33 MB. The difference is real video footage and film grain — here's what each one actually costs, and what to do about it.
Agent skills are instructions your AI follows without asking twice. That makes them useful, and it makes them an attack surface. How to vet a skill before you let it near your codebase, and where to find ones worth trusting.
If your prompts to coding agents keep getting longer, you're compensating for context the project should already carry. Why one-line prompts are a sign the setup is right, and how to move the missing information out of your prompts and into the repo.
AI coding tools now read three kinds of context files, and most projects put the right information in the wrong one. A field guide to briefs, rules, and skills: what each layer is for, how they load, and a decision rule that settles it.
Vercel published design.md, one public file that keeps agent-generated pages on-brand outside the codebase. It's a smart answer to a specific problem, and probably not your problem. When guidance belongs in the repo, and when it belongs at a URL.
I open-sourced three agent skills that teach Cursor, Claude Code, and other AI tools how to work in Astro + Tailwind projects: best practices, SEO wiring, and content collections. One command to install, grounded in the official docs.
Every video in the Lexington docs is rendered from a script file committed to the repo: real commands, the site's own palette and font, no screen recording. Here is the setup, and why the last docs change took a two-minute re-render instead of a re-shoot.
Tailwind gives you two ways to fade something: an alpha channel on the color, or opacity on the element. They composite differently, and the difference shows up as double-dark strikethroughs, mismatched icons, and borders that won't fade. Here's the mental model.
Agent skills are folders of Markdown instructions that AI coding tools load on demand when a task matches. How the SKILL.md format works, how it differs from rules and prompts, and what makes a skill actually good.
AGENTS.md is a plain Markdown brief at the root of a repository that tells AI coding agents how the project works: stack, structure, conventions, and gotchas. What goes in it, what to leave out, and a skeleton to start from.
Scoped rules stop AI tools from refactoring things you didn't ask about, inventing dependencies, and breaking content schemas. Here are the four rules in every Lexington theme's .cursor/rules folder, and the thinking behind each.
Every Lexington theme ships a SKILL.md extracted from that theme's actual code: typography, color tokens, spacing rhythm, component conventions. Here is how I build them and why counting classes beats writing guidelines.
AI coding tools produce generic output when they have to guess. I stopped letting them guess. Here is what goes into the AGENTS.md file that ships with every Lexington theme, and why it changed how customers customize them.
A practical guide to using Polar customer data, Resend, Cloudflare Workers, and D1 to send email campaigns in small batches with unsubscribe links and deliverability safeguards.
A curated look at pricing page layouts for 2026, focusing on structure, hierarchy, comparison systems, and visual patterns that help users decide without friction.
Explore stunning hero sections for 2026, featuring bold layouts, modern composition patterns, typography-led designs, and visual directions shaping the next wave of web design.
A no-nonsense guide to professional-grade free and open-source font libraries. Legally safe, production-ready type for web, branding, editorial design, and digital products.
I built Astro themes with Tailwind CSS without reusable components. After a year, I rewrote 24 themes to introduce shared components and upgrade to Tailwind CSS v4. Here’s the real cost of scaling without systems.
My SEO dropped from 1k daily visitors to under 500 after a refactor, canonical mistakes, cross-posting errors, and a messy subdomain setup. This is what went wrong, what I fixed, and what I won’t repeat.
Hand-tested monospaced fonts for VS Code, terminals, and modern IDEs. Compare free, open-source, and premium coding fonts for long sessions.
A practical, developer-focused guide to the best monospaced Google Fonts released in 2025, optimized for coding, data-heavy interfaces, and technical products in 2026.
An in-depth, practical guide to the best new sans-serif Google Fonts released in 2025, analyzed for real-world UI design, SaaS products, and long-term use in 2026.
An in-depth, practical guide to the best new serif Google Fonts released in 2025, evaluated for modern UI design, content platforms, and long-term digital products in 2026.
Learn how to create a smooth, full-screen overlay navigation menu using Tailwind CSS for styling and vanilla JavaScript for state management.
Use Geist Sans and Geist Mono with stylistic sets, ligatures, character variants, Tailwind v4 tokens, Figma, and copy-paste CSS examples.
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.
A production-ready Astro content config used in real client projects: blog posts, services, projects, properties, agents, legal pages, testimonials, FAQs, and recursive navigation.
Guide writers with a live character counter and automatic ring warning when they exceed your threshold, built with Tailwind CSS and Alpine.js.
Design a product release timeline that shows side-aligned dates, a vertical rail, and gradient cards using pure Tailwind CSS utilities.
Recreate a three-tier enterprise pricing table with a billing toggle, grouped feature lists, and a desktop-only layout using Tailwind CSS plus a sprinkle of Alpine.js.
Add an Alpine-powered spellcheck toggle to a Tailwind CSS textarea so writers can choose whether the browser should flag typos.
Craft a responsive team grid that mixes profile cards with a central spotlight block, complete with aspect-ratio images and inline social links—all in Tailwind CSS.
Enhance any message box with a simple emoji picker powered by Alpine.js state and Tailwind CSS styling—no external libraries required.
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.
Build a nested notification preferences control with Alpine.js and Tailwind CSS, including select-all, group toggles, and accurate indeterminate states.
Craft a responsive, full-width mega menu using Tailwind CSS and Alpine.js with teleportation, backdrop, and dynamic alignment for precise positioning.
Create a clean, alternating vertical timeline using Tailwind CSS grid and flex utilities — no JavaScript required.
Compose a clean, four‑step onboarding section with mobile and desktop separators, number badges, and elegant cards — all with Tailwind utilities.
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.
Build an accessible, horizontally scrolling testimonial carousel with Tailwind CSS and Alpine.js, and place the navigation buttons at the right edge of the layout.
A step-by-step guide to building a modern, responsive Bento grid layout using Tailwind CSS with column and row spans that adapt across breakpoints. Copy-and-paste examples included.
Create a responsive image gallery using Tailwind CSS and Alpine.js with a keyboard-accessible lightbox, arrows, and dot indicators. Copy‑paste example included.
Create a responsive testimonial carousel using Tailwind CSS and Alpine.js with snap scrolling, keyboard navigation, and smooth Prev/Next controls. Includes component-level snippets and a full example.
Create a vertically scrollable table with a sticky header using Tailwind CSS. Includes alignment tips, zebra striping, and a full working demo.
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.
Learn how to create a sortable table with avatars, flags, and dynamic sorting using Alpine.js and Tailwind CSS.
A comprehensive comparison of Astro and Gatsby in 2025, covering features, performance, use cases, and which to choose for your project.
A comprehensive comparison of Astro and WordPress in 2025, covering features, performance, use cases, and which to choose for your project.
A comprehensive comparison of Astro and Next.js in 2025, covering features, performance, use cases, and which to choose for your project.
More underused Tailwind CSS v4 utilities for subgrid layouts, logical spacing, data variants, selection styles, and production UI polish.
A practical list of underused Tailwind CSS v4 utilities for layout, typography, forms, scroll behavior, and polished UI states, with copy-ready snippets.
Learn what the rel='noopener noreferrer' attribute does in HTML links and why it's important for security and privacy.
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.
Learn how to build an interactive update notification toast using Alpine.js for state management and Tailwind CSS for styling, perfect for app updates.
Craft a multi-step welcome tour that works great on keyboard and touch.
Create a looping testimonial carousel powered by Alpine.js interactions and Tailwind CSS styling, complete with focus management and keyboard controls.
Step-by-step walkthrough building an accessible, responsive sidebar using Tailwind utilities and a tiny Alpine.js state object.
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.
Create a fully functional data table with column sorting, pagination controls, and responsive design 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.
Create an interactive feature grid with Alpine.js tabs, Tailwind CSS styling, and accessible state management.
Build a three-step automation command bar with Alpine.js, including filtering, keyboard control, and dynamic forms
Learn how to create a notification with Tailwind CSS and Alpinejs, including how to use Alpine.js directives to add and remove notifications dynamically
Practical Tailwind aspect-ratio examples for responsive images, videos, cards, and hero sections, with v4 syntax and copy-paste snippets.
Learn how to install and configure the `astro-seo` component in your Astro site—streamline titles, meta tags, Open Graph and Twitter cards
From Cursor to Gemini, here are the top AI coding tools in 2025 and what makes each one stand out.
Think Tailwind CSS is just bloated markup? These 15+ utility classes will change your mind. See how single classes replace entire CSS blocks.
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.
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 tutorial on background attachments, image control, gradient text, clipping effects, and professional design patterns
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.
A concise guide to implementing stunning linear, radial, and conic gradients in Tailwind CSS v4 with practical code examples.
A hands-on walkthrough of creating a custom VS Code theme using Yo Code, customizing it, and publishing it on the Marketplace.
A practical guide to 23 essential Git and GitHub commands for everyday development. Learn how to clone, commit, push, merge, and more.
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.
Learn how Tailwind CSS v4 supports container queries (`@container`) for component-level responsiveness using utility classes.
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.
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.
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.
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.
Create a sleek theme switcher with default, dark, and accent modes using CSS custom properties and localStorage
Learn how to create a comprehensive theme toggle that respects user preferences with three states: light, dark, and system detection.
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.
Learn how to add a smart Ask ChatGPT button that automatically opens ChatGPT with context about your current page.
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.
A quick guide on how to upgrade an your Astro JS project from Tailwind CSS v3 to Tailwind CSS v4 ( Alpha ).
Explore Tailwind CSS utility classes for responsive design. Learn how svh, lvh, and dvh can ensure your site looks great on any device.
Perfect for the so called bento grids
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.
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.
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.
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.
Learn how to center a div in Tailwind CSS using flex, grid, and margin utilities, with responsive patterns and tips to avoid common pitfalls.
Discover how semantic HTML boosts structure, accessibility, and SEO—use meaningful tags, headings, and landmarks to create cleaner, maintainable markup.
Master Shiki syntax highlighting in Astro.js with CSS variables. Customize and elevate your code's appearance effortlessly.
This blog post shows how to add custom typography to your Tailwind CSS project, with example code.