> ## 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 #236: Tailwind's color numbers, a two-line perf fix, and shader components 🎨 - URL: https://tailwindweekly.com/issue-236/ - Published: 2026-10-24T13:00:00.000Z - Updated: 2026-10-24T13:00:00.000Z - Author: Vivian Guillen Hello folks! Basecoat 1.1.0 is out, and six shadcn registries shipped new components. You've got a close look at what the numbers in Tailwind's palette mean, Andrico Karoulla's two-line fix for a janky Firefox animation, and Zoran Jambor on `:user-invalid`. Then there's SEO Gets for your Search Console data and shadercn for WebGPU shaders you install with the shadcn CLI. Let's dive in 👇 ## **🌟 Community News** [![](https://tailwindweekly.com/content/images/2026/10/news-basecoat-1-1.png)](https://github.com/hunvreus/basecoat/releases/tag/1.1.0?ref=tailwindweekly.com) ### [Basecoat 1.1.0](https://github.com/hunvreus/basecoat/releases/tag/1.1.0?ref=tailwindweekly.com) Basecoat, the shadcn/ui look for non-React stacks from #207, shipped 1.1.0 on Oct 23\. You write Tailwind CSS with plain HTML and a little vanilla JS, so it fits server-rendered apps and HTMX. This release adds vertical separators with `
` and single-file `.bundle.css` builds, so you can run Basecoat from the standalone Tailwind CLI without npm. Toast titles and labels get escaped by default now, so add `html: true` if you pass HTML. ### New components in the shadcn ecosystem Six registries shipped new pieces this week, and two more joined the directory. - [**@kokonutui**](https://kokonutui.com/?ref=tailwindweekly.com): Card Field, Stay Picker, Slot Picker, Tip Selector, Location Picker, Boarding Pass, Split Flap Text, and Contact Sheet. - [**@beui**](https://beui.dev/?ref=tailwindweekly.com): Timeline and a composable Sankey Chart. - [**@react-bits**](https://reactbits.dev/?ref=tailwindweekly.com): Sound Lab, a set of sound components you can install, plus a Center Stage tool. - [**@vue-bits**](https://vue-bits.dev/?ref=tailwindweekly.com): Shredder, DitherVeil, ElectricLogo, FlexCarousel, MicroSlats, and TechText. - [**@coss**](https://coss.com/ui?ref=tailwindweekly.com): avatar group particles `p-avatar-15` through `p-avatar-21`, plus a segmented-control indicator. - [**@animate-ui**](https://animate-ui.com/?ref=tailwindweekly.com): Page Transition for Next.js, React Router, and TanStack Router. - [**@astryx**](https://astryx.atmeta.com/?ref=tailwindweekly.com) (Meta's design system) and [**@videojs**](https://videojs.org/docs/guides/installation/shadcn?ref=tailwindweekly.com) joined the registry directory, so you can add Video.js player skins with the shadcn CLI. ### [eslint-plugin-better-tailwindcss v4.10.0](https://github.com/schoero/eslint-plugin-better-tailwindcss/releases/tag/v4.10.0?ref=tailwindweekly.com) The ESLint plugin for linting your Tailwind classes adds HTML templating support in v4.10.0\. ### [uniwind v1.13.0](https://github.com/uni-stack/uniwind/releases/tag/v1.13.0?ref=tailwindweekly.com) Uniwind, the Tailwind for React Native library from #231, shipped 1.13.0\. It generates native style match predicates and follows CSS cascade order on native, plus a hot reload fix for imported CSS in Metro. ### [tailwindcss-rtl v1.0.0](https://github.com/20lives/tailwindcss-rtl?ref=tailwindweekly.com) tailwindcss-rtl, last seen here in #15, hit 1.0.0\. It adds direction-aware utilities for Tailwind v3 and v4, and only fills in the logical utilities your Tailwind version doesn't ship. The README has a table of what core added in each version, so you can check if you still need it. ## **🤩 Windy Picks** [![](https://tailwindweekly.com/content/images/2026/10/todowing-screenshot-1280x800.png)](https://todowing.com/?ref=tailwindweekly.com) ### [TodoWing](https://todowing.com/?ref=tailwindweekly.com) — nested sub-tasks and more for Todoist TodoWing is an unofficial Chrome extension for Todoist. It shows your sub-task trees inline, up to four levels deep, in Today, Upcoming, Boards, Filters, and Labels, where Todoist flattens them. You can check off sub-tasks without opening the parent, run a focus timer on today's work, and pick Todoist's font, palette, and text size. The free tier covers nesting, and a one-time 19.99 payment unlocks the rest with no subscription. I built this one because I wanted my sub-tasks to show up in Todoist's Today view. [**Try TodoWing free in Chrome**](https://todowing.com/?ref=tailwindweekly.com) ## **📚 Learning** [![](https://tailwindweekly.com/content/images/2026/10/learn-blue-500.png)](https://www.hipuku.dev/writing/what-the-500-in-blue-500-means?ref=tailwindweekly.com) ### [What the 500 in blue-500 means](https://www.hipuku.dev/writing/what-the-500-in-blue-500-means?ref=tailwindweekly.com) White text on Tailwind v3's `bg-blue-600` passes AA at 5.17:1, and the same text on `bg-green-600` fails at 3.30:1\. This post on hipuku.dev explains why. Tailwind's numbers mark a shade's position in its own ramp, so the same number lands at a different lightness in each hue. It compares that with Carbon, USWDS, Material 3, and Radix, and checks what v4's switch to `oklch` changed (mostly saturation). ### [The two lines of CSS that tanked performance](https://component-odyssey.com/articles/13-improving-performance-by-changing-two-lines-of-css?ref=tailwindweekly.com) Andrico Karoulla's dotted gradient background on Learn WCs ran fine in Chrome and Safari but dropped hard in Firefox. The problem was animating `mask-position`, which repainted the background over 1,000 times in a few seconds. He switched the keyframes to `transform: translate()` and padded the container by the mask size, and the paint count fell to two. ### [Stop using :invalid and :valid](https://www.youtube.com/watch?v=fST4hhWE6y8&ref=tailwindweekly.com) Zoran Jambor from CSS Weekly has a three-minute tip on form validation styles. `:invalid` matches a required field as soon as the page loads, so your form shows errors before anyone types. He shows the switch to `:user-invalid` and `:user-valid`, which wait until someone has interacted with the field. ## **💅 Showcase** [![](https://tailwindweekly.com/content/images/2026/10/screenshot-1366x768-1792801730622.webp)](https://seogets.com/?ref=tailwindweekly.com) ### [SEO Gets](https://seogets.com/?ref=tailwindweekly.com) SEO Gets is a Google Search Console and GA4 analytics dashboard that pulls up to 50,000 rows instead of GSC's 1,000-row cap. You get striking-distance keywords, cannibalization and content decay reports, index monitoring for up to 5,000 pages, and an MCP server for Claude or ChatGPT. Free sites stay free, and core sites start at $49/month. ## **🎁 Resource** [![](https://tailwindweekly.com/content/images/2026/10/resource-shadercn.png)](https://www.shadercn.run/?ref=tailwindweekly.com) ### [shadercn](https://www.shadercn.run/?ref=tailwindweekly.com) If you want a glowing orb in your hero without learning WGSL, this one's for you. shadercn is a free, MIT-licensed set of WebGPU shader components for React by Aniket Pawar, built on vgpu and TypeGPU. You add them like any shadcn component, `npx shadcn@latest add @shadercn/orb-01`, and there are 33 orbs so far, from a plasma globe to a voxel Minecraft Earth. There's a playground too, so you can tweak one before it lands in your repo. ## **👌 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. [**Hilium**](https://hilium.app/?ref=tailwindweekly.com) – Turns your iPhone into a wireless Mac trackpad with gestures for Mission Control and Spaces, plus volume, power, Bluetooth, and battery controls over your local network. [**Aura**](https://deslove.com/online-vector-editor?ref=tailwindweekly.com) – Free browser vector editor for logos and SVGs with a pen tool, boolean ops, text on a path, and 450 OFL fonts, plus a free sign-in to save and export. [**MotionVideo**](https://motionvideo.xyz/?ref=tailwindweekly.com) – Searchable gallery of AI-made motion videos with the prompts and skills behind them, sorted by product UI, kinetic type, charts, particles, and more. 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) 😁.