> ## Content Index > Fetch the complete content index at: https://tailwindweekly.com/llms.txt > Use this file to discover other available public pages before exploring further. # Tailwind Weekly #232: shadcn/lint, animated border-image, and mapcn 🌟 - URL: https://tailwindweekly.com/issue-232/ - Published: 2026-09-26T12:00:12.000Z - Updated: 2026-09-26T12:00:12.000Z - Author: Vivian Guillen Hello folks! This week shadcn ships `@shadcn/lint`, an agent-first linter for Tailwind design systems, plus a `cn` update and a batch of new registry components. You've also got Preethi animating `border-image`, David Bushell fixing full-bleed CSS and John Rhea trimming a keyframes orbit. Let's dive in 👇 ## **🌟 News** [![](https://tailwindweekly.com/content/images/2026/09/news-shadcn-lint.png)](https://github.com/shadcn-ui/lint?ref=tailwindweekly.com) ### [@shadcn/lint](https://github.com/shadcn-ui/lint?ref=tailwindweekly.com) shadcn shipped `@shadcn/lint`, an agent-first linter for Tailwind v4 design systems. Six rules (`no-restyle`, `no-raw-colors`, `no-arbitrary-values`, `no-inline-styles`, `no-unknown-classes`, `require-static-classes`) read your components, variants, and theme, then tell the agent what broke and what to use instead. Works on ESLint and Oxlint, React, Vue, and Svelte. shadcn/ui is optional. Better Stack has a [walkthrough](https://www.youtube.com/watch?v=tPQgw%5FDPIoM&ref=tailwindweekly.com). ### [cn 0.4.0](https://github.com/shadcn-ui/cn/releases/tag/cn%400.4.0?ref=tailwindweekly.com) `cn`, the `tailwind-merge` and `clsx` replacement from #229, is up to 0.4.0\. Point `cn build` or the Vite and Next.js plugins at your Tailwind CSS entry with the new `css` option, and they pick up the scales from your `@theme` blocks. A custom class like `rounded-card` now conflicts like a default one, so you can drop the hand-written config. ### [tailwind-strict-colors](https://github.com/JJBeta-Dev/tailwind-strict-colors?ref=tailwindweekly.com) tailwind-strict-colors is a new VS Code extension for Tailwind v4 projects. It reads the `--color-*` tokens in your `@theme` and flags classes like `bg-red-500` that pull from the default palette instead. A Quick Fix swaps in the nearest token from your theme, and a workspace scan lists hits by file. Version 0.1.0 ships as a `.vsix` on GitHub releases. ### New components in the shadcn ecosystem Several registries shipped new pieces this week, and you can pull any of them in with the shadcn CLI. - [**@react-bits**](https://reactbits.dev/?ref=tailwindweekly.com): PaperCrumple, FlipCard, TearTicket, Shredder, DitherVeil, TechText, and ElectricLogo. The Micro set is now installable from the CLI registry too. - [**@vue-bits**](https://vue-bits.dev/?ref=tailwindweekly.com): catches up on the Micro registry with BellToggle, FlipCard, PaperCrumple, TearTicket, and more. - [**@assistant-ui**](https://www.assistant-ui.com/elements/task-card?ref=tailwindweekly.com): `elements-task`, `task-card`, and `agent-status` for showing what your agent is doing and for how long. - [**@nuqs**](https://nuqs.dev/registry?ref=tailwindweekly.com): `parser-uuid`, which parses and validates UUIDs (v1 to v8) in the query string. - [**useLayouts 2.0**](https://uselayouts.com/?ref=tailwindweekly.com): a redesigned browse page plus a batch of new registry components, like a wheel carousel, checkout and cart drawers, and a holographic referral card. ## **🤩 Windy Picks** [![](https://tailwindweekly.com/content/images/2026/09/windy-cozywatch.png)](https://www.cozywatch.com/download/?ref=tailwindweekly.com) ### [Cozy Watch](https://www.cozywatch.com/?ref=tailwindweekly.com&aff=lVeE1) — GitHub notifications in your Mac menu bar Cozy Watch is an open-source macOS app that pings you when a pull request, review, mention, or CI run needs you. Click through and you land on the PR that changed, and the menu bar shows your current PR status. It's free for personal use, with a $29/year license for work that comes with a 30-day commercial trial. macOS 12 or later. [**Download Cozy Watch, free for personal use**](https://www.cozywatch.com/download/?ref=tailwindweekly.com&aff=lVeE1) ## **📚 Learning** [![](https://tailwindweekly.com/content/images/2026/09/learn-border-image.jpg)](https://css-tricks.com/animating-css-border-image/?ref=tailwindweekly.com) ### [Animating CSS border-image](https://css-tricks.com/animating-css-border-image/?ref=tailwindweekly.com) You want a border that draws itself on hover without a separate SVG sprite. Preethi on CSS-Tricks animates `border-image` with a registered custom property so a linear or conic gradient fills the frame. She also plays with `border-image-slice` and `border-image-outset`. One catch: border images do not follow curves. ### [Fixing full-bleed CSS](https://dbushell.com/2026/07/03/fixing-full-bleed-css/?ref=tailwindweekly.com) Full-bleed with `100vw` still crops a few pixels once a classic scrollbar shows up. David Bushell walks through Andy Bell's utility, `scrollbar-gutter: stable`, then a container-query fix with a registered `--body-size` so nested containers keep the bleed honest. ### [Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)](https://css-tricks.com/orbital-mechanics-or-how-i-optimized-a-css-keyframes-animation/?ref=tailwindweekly.com) John Rhea on CSS-Tricks cuts a 141-line moon-orbit keyframes block down to 28 lines. Drop the repeated loops, split `translate` and `scale` into their own properties, and let the browser interpolate the midpoints with `ease-in-out`. ## **💅 Showcase** [![](https://tailwindweekly.com/content/images/2026/09/screenshot-1366x768-1790387623416-1.webp)](https://www.socialfetch.dev/?ref=tailwindweekly.com) ### [Social Fetch](https://www.socialfetch.dev/?ref=tailwindweekly.com) Social Fetch is a social media scraper API with 232 endpoints across 23 platforms. One key and one JSON schema cover profiles, posts, transcripts, and metrics, with live data on every request so you are not maintaining scrapers yourself. ## **🎁 Resource** [![](https://tailwindweekly.com/content/images/2026/09/resource-mapcn.png)](https://www.mapcn.dev/?ref=tailwindweekly.com) ### [mapcn](https://www.mapcn.dev/?ref=tailwindweekly.com) If you want maps that feel like the rest of a shadcn stack, mapcn is a copy-paste React kit on MapLibre, styled with Tailwind. Run `pnpm dlx shadcn@latest add @mapcn/map`, drop in free CARTO tiles with light/dark switching, and own the component after paste. Drop to the raw MapLibre instance when you need more control. ## **👌 Cool Stuff** [**Tiiny Host**](https://tiiny.host/?fpr=vivian32&ref=tailwindweekly.com) – Drag and drop an HTML file, PDF, or zipped static site and get a shareable link with free SSL in seconds. [**Tinycast**](https://abue-ammar.github.io/tinycast/?ref=tailwindweekly.com) – Native Mac launcher under 100 MB with clipboard, calculator, snippets, and Raycast extension support, no Electron or account. [**HTTP Toolkit**](https://httptoolkit.com/?ref=tailwindweekly.com) – Open-source HTTP debugger for Windows, Linux, and Mac with one-click intercept, live edit, and mock responses. [**Promptwatch**](https://promptwatch.com/?ref=tailwindweekly.com) – Tracks brand mentions and citations across ChatGPT, Gemini, Claude, and Perplexity for GEO and AI search. Do you want to share something with the Tailwind CSS community? You can [submit a link](https://forms.gle/2WhynnUkJTHkM7746?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.com). Want to support the newsletter? You can buy me a coffee with this [link](https://buymeacoffee.com/vivgui?ref=tailwindweekly.com) 😁.