# Tailwind Weekly - A weekly newsletter about Tailwind CSS
> Get the latest news, articles, videos and resources on Tailwind CSS and frontend development. Used by 2,300+ people to be better web developers.
Public Ghost content for AI and LLM tooling. This file includes a bounded export of public pages first, then recent public posts.
Append `.md` to any post or page URL to get the content in Markdown (for example, `/example-post.md`).
## Pages
### Advertise
URL: https://tailwindweekly.com/advertise/
Last updated: 2026-08-25T18:41:03.000Z
## Reach Tailwind CSS Developers directly.

Tailwind Weekly can help you reach over 2,200 Tailwind CSS developers with every weekly issue.

### Here's an overview:

- **Subscribers:** \~2,200
- **Open Rate:** \~50%
- **Click Rate:** \~10%
- **Subscriber profile:** Frontend Developers, Backend Developers, Full Stack Developers, Freelancers

### **Here's what our past advertisers say about us:**

> Our sponsorship of Tailwind Weekly really boosted the launch of our Tailwind CSS browser extensions and constantly fed us customer for nearly a year. If you are catering Tailwind CSS developers, Tailwind Weekly has your audience.

From [Sebastian](https://twitter.com/seb%5Fsebsn?lang=en&ref=tailwindweekly.com) from [Beyond Code](https://beyondco.de/?ref=tailwindweekly.com)

> Advertising with Tailwind Weekly was a great decision and communication about the placement and copywriting was also very smooth. I'll be back!

From [Erwin](https://twitter.com/Erwin%5FAI?ref=tailwindweekly.com) from [Tailscan](https://tailscan.com/?ref=tailwindweekly.com)

> Sponsoring Tailwind Weekly generated consistent growth and connected Preline UI with the right audience. If you’re targeting Tailwind CSS developers, you won’t find a better audience or easier advertising. We’ll be back!

From Jaha from [Preline](http://preline.co/?ref=tailwindweekly.com)

## Here's what you can buy:

**Main Sponsor**

This is our most prominent and visible spot and includes a tweet mention on the weekly tweet.

**Pricing:**

- $99/issue
- $349/4 issues

### Sponsored Link

It can be an article or video, a showcase website, or a resource (plugin, web tool, etc).

**Pricing**

- $39/issue
- $119/4 issues

## Grab Your Slot

Email [vivian@tailwindweekly.com](mailto:vivian@tailwindweekly.com) and we can discuss your ad copy, select dates, and finalize payment.

You can also email me with any questions!
## Posts
### Tailwind Weekly #230: Tailwind joins Shopify, StyleX for agents, and CSS masonry 🎨
URL: https://tailwindweekly.com/issue-230/
Last updated: 2026-09-12T16:41:22.000Z
Hello folks!

Big one: Tailwind Labs is joining Shopify. You've also got Wes and Scott on why StyleX is suddenly everywhere, Chris Coyier on CSS masonry that animates without a layout library, and a tiny package that drops Tailwind's design tokens into StyleX.

Let's dive in 👇

## **🌟 News**

[![](https://tailwindweekly.com/content/images/2026/09/news-shopify.jpg)](https://tailwindcss.com/blog/tailwind-is-joining-shopify?ref=tailwindweekly.com)

### [Tailwind Labs is joining Shopify](https://tailwindcss.com/blog/tailwind-is-joining-shopify?ref=tailwindweekly.com)

Adam Wathan announced Tailwind Labs is joining Shopify. Tailwind CSS and the other open-source projects stay MIT, and the team keeps leading them with Shopify's support. New signups for Tailwind Plus and ui.sh are closing; existing customers keep their access. 

With Shopify backing the project, the Insiders program is winding down. Subscriptions are cancelled so you won't be charged again, and they've packed the Insider perks into a zip you can keep forever, so check your email. Discord stays open until the end of your current billing period.

Same story for ui.sh: you won't be billed again, and the local installable skills are yours to keep. The remote MCP server will go away eventually; it was already deprecated in favor of those local skills.

### New components in the shadcn ecosystem

Four registries shipped new items this week:

- [**spectrumui**](https://ui.spectrumhq.in/?ref=tailwindweekly.com) – data-table plus 15 table blocks (payments, team, invoices, orders, customers, API keys, audit log, deployments, feature flags, tickets, analytics, market, inventory, leaderboard, and files)
- [**ncdai**](https://chanhdai.com/components?ref=tailwindweekly.com) – swipe-actions for list rows, and logos-flip for a flipping logo wall
- [**beui**](https://beui.dev/?ref=tailwindweekly.com) – prediction-market-card, and range-slider-inline
- [**blocks.so**](https://blocks.so/?ref=tailwindweekly.com) – dashboard-01, plus chat-03 (merged Sep 5, just after last week's scan)

### [**OIDC UI**](https://ui.shadcn.com/oidc?ref=tailwindweekly.com)

shadcn shipped a new OIDC UI registry with about 78 items for OIDC policy and config forms (GitHub Actions, Vercel, GitLab, Google, and form-lib variants). 

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/09/windy-picmal-1.png)](https://picmal.app/?atp=redpixel&ref=tailwindweekly.com)

### [Picmal](https://picmal.app/?atp=redpixel&ref=tailwindweekly.com) — convert and compress on your Mac

If you convert HEICs or compress a video to fit an email, Picmal does it on your Mac. Images, video, audio, and PDFs, over 100 formats, no uploads and no account.

Drop a folder in and it batch converts. You can compress without changing format, strip GPS from screenshots, split a PDF into pages, or hook the same engine into Finder, Raycast, and the CLI.

$39 once for 2 Macs. Pro is $69 for 5\. 14-day refund. Mac only, Sequoia and up.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/09/learn-stylex.jpg)](https://www.youtube.com/watch?v=NIG9GbVU5po&ref=tailwindweekly.com)

### [Why everyone is moving to StyleX](https://www.youtube.com/watch?v=NIG9GbVU5po&ref=tailwindweekly.com)

Wes Bos and Scott Tolinski dig into Meta's StyleX on Syntax #1035\. Styles live in typed JavaScript objects, then the compiler extracts atomic class names at build time with zero runtime. The buzz right now is agents: structured objects and autocomplete beat hallucinated utility strings, and people like Jared Palmer, Adam Hutchinson, and Aiden Bai are saying as much. They also cover the hand-authored pain (nested selectors, waiting on modern CSS), plus Panda CSS and CSS Modules as alternatives.

### [Masonry (with Animation) in CSS](https://master.dev/blog/masonry-with-animation-in-css/?ref=tailwindweekly.com)

`display: grid-lanes` is landing for native masonry (Safari now, Chrome/Firefox behind a flag), but Chris Coyier is after the other Masonry.js trick: animated reflow when the column count changes. Bramus's demo does it on regular CSS Grid with `repeat(auto-fill, …)`. The grid items stay put; a child covers each cell with `position-anchor` and `inset: anchor(inside)`, then `transition: inset` so the content slides when the parent cell moves. One gotcha: `inset: 0` wouldn't animate, because that value never changes. `anchor(inside)` does. Chris rebuilds the old Masonry.js demo with the floats and JS ripped out.

### [What You Need to Know About CSS Color Interpolation](https://css-tricks.com/what-you-need-to-know-about-css-color-interpolation/?ref=tailwindweekly.com)

Sunkanmi Fafowora walks through color interpolation, the path CSS takes between two colors in gradients, `color-mix()`, and transitions. Rectangular spaces (sRGB, lab, oklab) mix along a straight line. Polar ones (hsl, lch, oklch) walk a hue arc, and you pick the route with `shorter`, `longer`, `increasing`, or `decreasing` hue. Example: `color-mix(in oklch longer hue, red, blue)` or `linear-gradient(in oklch longer hue 90deg, magenta, cyan)`. Same syntax shows up in animations between `oklch` stops.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/09/screenshot-1440x900-1789230882775.webp)](https://ferndesk.com/?ref=tailwindweekly.com)

### [Ferndesk](https://ferndesk.com/?ref=tailwindweekly.com)

Ferndesk is a help center that checks every article against your product, catches stale claims, and drafts the fixes for you to approve. Connect your codebase, live product, and support inbox; when a PR merges, Fern can draft the docs before release. You get a public portal, AI answers, an in-app widget, OpenAPI docs, private docs, translations, and analytics. Import from Intercom, Zendesk, and others in about ten minutes with URLs preserved. 7-day free trial, no card.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/09/resource-tailwind-stylex.png)](https://github.com/aidenybai/tailwind-stylex?ref=tailwindweekly.com)

### [tailwind-stylex](https://github.com/aidenybai/tailwind-stylex?ref=tailwindweekly.com)

If you're trying StyleX but miss Tailwind's default scale, Aiden Bai's `tailwind-stylex` gives you the tokens as typed StyleX constants. Install with your package manager, point your StyleX compiler at it, then pull `colors`, `spacing`, `radii`, and `fontSizes` from `tailwind-stylex/tokens.stylex` and use them in `stylex.create`. Numeric names need brackets (`fontSizes["2xl"]`, `spacing[4]`). Colors, spacing, breakpoints, mediaQueries, containers, fonts, radii, shadows, easings, and more.

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) – Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.

[**EnvKit**](https://envkit.net/?ref=tailwindweekly.com) – Free local stack for Windows and macOS: nginx/Apache, PHP, databases, Mailpit, Node, and trusted `.test` HTTPS in one desktop app.

[**microcharts**](https://microcharts.dev/?ref=tailwindweekly.com) – Word-sized React charts (\~2–7 kB), 106 types, zero runtime deps, RSC-safe SVG, accessible summaries by default.

[**Uppy**](https://uppy.io/?ref=tailwindweekly.com) – MIT file uploader from Transloadit with resumable Tus uploads, Dashboard, image editor, and 40 locales.

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) 😁.
### Tailwind Weekly #229: cn, Anchor positioning, and the future of frontend development ✨
URL: https://tailwindweekly.com/issue-229/
Last updated: 2026-09-05T12:00:46.000Z
Hello folks!

shadcn shipped cn, a drop-in for `clsx` and `tailwind-merge` that's 30× faster. You've also got Josh Comeau on CSS Anchor Positioning and `monowind` for Tailwind TUIs in the browser.

Let's dive in 👇

## **🌟 News**

[![](https://tailwindweekly.com/content/images/2026/09/news-cn.png)](https://github.com/shadcn-ui/cn?ref=tailwindweekly.com)

### **cn** [**0.2**](https://github.com/shadcn-ui/cn?ref=tailwindweekly.com)

shadcn and Aiden Bai shipped `cn` 0.2\. It replaces `clsx` and `tailwind-merge` with the same APIs and zero deps. Migrate with `npx shadcn@latest migrate cn`, then `import { cn } from "cn"`. A typical component call (`cn(base, variant, condition && extra)`) runs 30× faster but its Tailwind v4 only so stay on `tailwind-merge` v2 if you're still on v3.

### New components in the shadcn ecosystem

Seven registries shipped new items this week:

- [**react-bits**](https://reactbits.dev/?ref=tailwindweekly.com) – AeroShards, a GPU wind-sculpture of flowing foil shards for interactive backgrounds
- [**magicui**](https://magicui.design/?ref=tailwindweekly.com) – floating-3d-particles, a canvas particle field with rotation and buoyant drift
- [**reui**](https://reui.io/?ref=tailwindweekly.com) – code-block (Shiki streaming, diffs, folding), data-grid cell-selection and i18n, plus gantt examples
- [**intentui**](https://intentui.com/?ref=tailwindweekly.com) – radar-chart and radial-bar-chart
- [**blocks.so**](https://blocks.so/?ref=tailwindweekly.com) – chat-01 and chat-02 AI chat threads (bubbles, streaming; chat-02 adds a model menu)
- [**beui**](https://beui.dev/?ref=tailwindweekly.com) – adaptive-stepper, a numeric stepper that shrinks or hides the ± controls at min/max
- [**spectrumui**](https://github.com/arihantcodes/spectrum-ui?ref=tailwindweekly.com) – seven pricing-section variants (banner, blueprint, dark-matrix, gradient, offset, receipt, and serif tiers)

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/09/windy-picmal.png)](https://picmal.app/?atp=redpixel&ref=tailwindweekly.com)

### [Picmal](https://picmal.app/?atp=redpixel&ref=tailwindweekly.com) — convert and compress on your Mac

If you convert HEICs or compress a video to fit an email, Picmal does it on your Mac. Images, video, audio, and PDFs, over 100 formats, no uploads and no account.

Drop a folder in and it batch converts. You can compress without changing format, strip GPS from screenshots, split a PDF into pages, or hook the same engine into Finder, Raycast, and the CLI.

$39 once for 2 Macs. Pro is $69 for 5\. 14-day refund. Mac only, Sequoia and up.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/09/learn-anchor.png)](https://www.joshwcomeau.com/css/anchor-positioning/?ref=tailwindweekly.com)

### [Getting Started with Anchor Positioning](https://www.joshwcomeau.com/css/anchor-positioning/?ref=tailwindweekly.com)

Tooltips and dropdowns used to mean a pile of JavaScript to keep them on screen. Josh Comeau walks through the CSS Anchor Positioning API that landed across major browsers in January 2026\. Name the trigger with `anchor-name: --my-anchor`, point the floater at it with `position-anchor` and `position-area: top`, and the browser keeps it stuck. Overflow flips with `position-try-fallbacks: flip-block`, and Level 2 anchored container queries can swap the caret when it flips (Chromium for now). Support sits around [81% on caniuse](https://caniuse.com/css-anchor-positioning?ref=tailwindweekly.com), so he covers Oddbird's polyfill and `@supports (position-area: top)` fallbacks.

### [I used to hate Tailwind CSS](https://yannickkouakou.com/blog/why-i-hated-tailwind-css/?ref=tailwindweekly.com)

Yannick Kouakou spent more than five years avoiding Tailwind on principle after a Bootstrap-skeptical CSS upbringing. An apprenticeship in France put it in front of him every day, and the usual objections (separation of concerns, class soup, specificity wars) fell apart once he read [Adam Wathan's utility-class essay](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/?ref=tailwindweekly.com) and watched the shipped CSS stay tiny while components absorbed the verbosity. He builds [Intrivio](https://intrivio.cv/?ref=tailwindweekly.com) and [Rigma](https://rigma.io/en?ref=tailwindweekly.com) on it now, and still tells his younger self to learn raw CSS first, then stop looking down on the tools. Useful if you still get the "isn't this just inline styles" pushback.

### [The asteroid currently hitting frontend web development](https://nolanlawson.com/2026/08/23/the-asteroid-currently-hitting-frontend-web-development/?ref=tailwindweekly.com)

Nolan Lawson asked Claude a Chrome Style-recalc brain-teaser and got an answer on selector stats, invalidation scope, and custom properties. From there he maps why frontend education feels under pressure: agents treat UI as lower risk than migrations, "agent experience" is pushing teams toward React over Solid or Lit, and DX-focused standards look less urgent when a model can write three lines as easily as one. His bets for educators are teaching agents the big picture (MPA over SPA when it fits), building sites that agents can read, and consulting on vibe-coded messes while judgment still pays.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/09/screenshot-1440x900-1788561418764.webp)](https://ente.io/?ref=tailwindweekly.com)

### [Ente Photos](https://ente.io/?ref=tailwindweekly.com)

Ente Photos is an open-source, end-to-end encrypted photo backup that runs on Android, iOS, web, Mac, Linux, and Windows. You get on-device face grouping, zero-knowledge natural-language search, shared albums, public links, and family plans that share storage with up to five people at no extra cost. 10GB free forever, paid plans from $2.49/mo for 50GB, self-hostable, cryptographically audited.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/09/resource-monowind.png)](https://github.com/benface/monowind?ref=tailwindweekly.com)

### [monowind](https://github.com/benface/monowind?ref=tailwindweekly.com)

If you've wanted a terminal UI without leaving the browser, monowind wraps ordinary HTML and Tailwind utilities in `<mono-wind>` and renders a strict character grid: box-drawing borders, integer cells, monospace layout, with real links, buttons, focus, and forms still working. Flex, grid, multi-column, and table layouts are in; themes like `dos`, `c64`, and `green-phosphor` live in `@monowind/themes`; `<mono-ascii>` does FIGlet banners. Early development, with a [live playground](https://play.monowind.benface.com/?ref=tailwindweekly.com) and Storybook.

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) – Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.

[**Frame0**](https://frame0.app/?ref=tailwindweekly.com) – Offline hand-drawn wireframes in a Balsamiq vein, with AI agent, MCP, frame mirroring, and HTML/PDF export.

[**Irid**](https://irid.app/?ref=tailwindweekly.com) – Free early-access Mac toolbar for color picking, measuring, grids, and design overlays (macOS 12+, Intel for now).

[**Supaste**](https://www.supaste.com/?ref=tailwindweekly.com) – Visual Mac clipboard history with OCR, notch shelf, and inline shortcuts; one-time purchase, offline-first.

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) 😁.
### Tailwind Weekly #228: Maizzle 6.1.2, Preline 5, and the CSS lh unit 🌟
URL: https://tailwindweekly.com/issue-228/
Last updated: 2026-08-29T12:00:39.000Z
Hello folks!

Trying out a new community news section starting this week to highlight all the cool projects in the ecosystem. I hope you like it 😄

You also get Adam Argyle on CSS `infinity`, Ahmad Shadeed on the `lh` unit, and TailMotion, a motion library that speaks Tailwind.

Let's dive in 👇

## **🌟 Community News**

[![](https://tailwindweekly.com/content/images/2026/08/image-7.png)](https://preline.co/docs/changelog.html?ref=tailwindweekly.com)

### [**Preline 5.0**](https://preline.co/docs/changelog.html?ref=tailwindweekly.com)

Preline 5.0 landed with a hosted MCP server, per-block AI prompts, and animated icons. Your coding agent pulls real Preline markup through `components_list` and `single_block`. MCP and animated icons are Pro-only. The open-source package also moves to Tailwind v4.3.

### **Maizzle** [**6.1.2**](https://github.com/maizzle/framework/releases/tag/v6.1.2?ref=tailwindweekly.com)

[Cosmin](https://twitter.com/cossssmin?ref=tailwindweekly.com) shipped Maizzle 6.1.2\. Tailwind source scanning now follows each template's import graph, so unused components stop leaking CSS into the email. Set `css.scopedSources: false` if classes live in files Maizzle can't trace. Windows paths and Vite virtual modules got fixes too.

### **shadcn CLI** [**4.19.0**](https://ui.shadcn.com/docs/changelog?ref=tailwindweekly.com)

The shadcn CLI hit 4.19.0 with private GitHub registries. If you can read the repo, `pnpm dlx shadcn@latest add acme/internal-toolkit/auth-kit` works. If you're already on `gh auth login`, the CLI uses those credentials and never sees the token. CI can pass `GH_TOKEN`. August also added Questionnaire for Base UI, React Aria, and Radix.

### New components in the shadcn ecosystem

Six registries shipped new items this week:

- [**react-bits**](https://reactbits.dev/?ref=tailwindweekly.com) – CRTWarp, GlowCursor
- [**ncdai**](https://chanhdai.com/components?ref=tailwindweekly.com) – Status Button for loading and success states on async actions
- [**beui**](https://beui.dev/?ref=tailwindweekly.com) – Expandable Control, Metallic Button, and File Tree
- [**Inspira UI**](https://inspira-ui.com/docs/en/components/html-in-canvas/html-in-canvas?ref=tailwindweekly.com) – HTML in Canvas
- [**Zard UI**](https://zardui.com/?ref=tailwindweekly.com) – Hover Card + Typeset
- [**lucide-animated**](https://lucide-animated.com/?ref=tailwindweekly.com) – animated palette icon

[![](https://tailwindweekly.com/content/images/2026/08/news-tailwind-stylex.png)](https://github.com/aidenybai/tailwind-stylex?ref=tailwindweekly.com)

### **tailwind-stylex** [**0.1.1**](https://github.com/aidenybai/tailwind-stylex?ref=tailwindweekly.com)

[Aiden Bai](https://github.com/aidenybai?ref=tailwindweekly.com) shipped tailwind-stylex 0.1.1\. It publishes Tailwind's default design tokens as typed StyleX constants, so you import `colors`, `spacing`, and `radii` and use them in `stylex.create`: `colors.stone100`, `radii.lg`, `spacing[4]`. Numeric names like `fontSizes["2xl"]` use brackets. If you're on StyleX and miss Tailwind's scale, this is the bridge.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/08/windy-picmal.png)](https://picmal.app/?atp=redpixel&ref=tailwindweekly.com)

### [Picmal](https://picmal.app/?atp=redpixel&ref=tailwindweekly.com) — convert and compress on your Mac

If you convert HEICs or compress a video to fit an email, Picmal does it on your Mac. Images, video, audio, and PDFs, over 100 formats, no uploads and no account.

Drop a folder in and it batch converts. You can compress without changing format, strip GPS from screenshots, split a PDF into pages, or hook the same engine into Finder, Raycast, and the CLI.

$39 once for 2 Macs. Pro is $69 for 5\. 14-day refund. Mac only, Sequoia and up.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/08/learn-infinity.jpg)](https://nerdy.dev/css-infinity-use-cases?ref=tailwindweekly.com)

### [CSS Infinity Use Cases](https://nerdy.dev/css-infinity-use-cases?ref=tailwindweekly.com)

If you've typed `border-radius: 9999px` or `1e9px` to get a pill, this one's for you. Adam Argyle walks through CSS `infinity` and `-infinity`. You wrap it in `calc()`, and for a length you multiply by a unit: `border-radius: calc(infinity * 1px)`. The same pattern maxes out z-index at the browser int limit, or freezes an animation long enough to inspect a view transition. He flags that the infinite `box-shadow` backdrop trick doesn't work. Steal the pill radius.

### [The CSS lh unit](https://ishadeed.com/article/lh-unit/?ref=tailwindweekly.com)

The `lh` unit is the element's line-height as a length. Ahmad Shadeed uses it for spacing that tracks the text. Swap `margin-bottom: 1rem` for `1lh` and the gap between paragraphs follows the type, even if you change the font size. Same idea for a paper-line background (`background-size: 100% 1lh`) and a faded list capped at `max-height: 5lh`. He sizes icons with `0.8lh` so they grow with the button label. A float demo uses `round()` plus `lh` to snap an image to the nearest line. After that, `px` spacing next to body copy looks wrong.

### [5 CSS Properties You Should Know for Better Text Designs](https://master.dev/blog/typographic-css-tricks/?ref=tailwindweekly.com)

Preethi Sam has five text tricks you can layer in. `background-clip: text` (now in the `background` shorthand) plus `color: transparent` fills letters with an image. `vertical-align` lines up inline stuff on a line of text. `align-content: center` centers copy in a box. `box-decoration-break: clone` keeps borders and radius on wrapped lines. `letter-spacing` can hide-then-reveal a word. `text-combine-upright: all` keeps a bit of horizontal text inside `writing-mode: vertical-lr`. Each one has a CodePen.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/08/showcase-verifykit-1440x900.png)](https://verifykit.io/?ref=tailwindweekly.com)

### [VerifyKit](https://verifykit.io/?ref=tailwindweekly.com)

VerifyKit is an email verification API. One call does real SMTP checks, catches typos, blocks disposable addresses, and can send email OTP, so fake signups don't hit your database. Response time sits around 200ms, with SDKs for Node, PHP, Go, Python, and Rust. Pricing starts at $0.001 per validation. If you've been rolling your own "is this email real" check, this cuts that work.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/08/resource-tailmotion.png)](https://tailmotion.moumen.dev/?ref=tailwindweekly.com)

### [TailMotion](https://tailmotion.moumen.dev/?ref=tailwindweekly.com)

If you're a Tailwind lover like me, you've faked a motion system with a pile of `animate-*` classes. TailMotion sits next to your utilities instead. `npm install tailmotion`, `@import "tailmotion/css"`, then `tm-press` on a button. Set a personality on a parent (`tm-motion-calm`, `tm-motion-productive`, `tm-motion-expressive`) and every descendant retunes. Presence reads `data-state` or `aria-expanded` with no runtime. Native dialog and popover get real exits. Scroll reveals use view timelines, so unsupported browsers still show the content. Docs and a live explorer are on the site.

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.

[**Outline**](https://www.getoutline.com/?ref=tailwindweekly.com) – Open source team wiki, cloud or self-hosted, with realtime docs and Slack search.

[**webclaw**](https://webclaw.io/?ref=tailwindweekly.com) – Scraping API that turns a URL into LLM-ready markdown or JSON. Open-source Rust core, Firecrawl-compatible.

[**OpenLogi**](https://openlogi.org/?ref=tailwindweekly.com) – Local-first Logitech Options+ alternative in Rust. Remap buttons over HID++, no account, no telemetry.

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) 😁.
### Tailwind Weekly #227: Maizzle 6 components, rem vs px breakpoints, and new corner shapes 🌟
URL: https://tailwindweekly.com/issue-227/
Last updated: 2026-08-22T12:00:36.000Z
Hello folks!

Cosmin got CSS gradients working in Maizzle, so linear, radial and conic all survive the trip to an inbox. Nick Bevers digs into Tailwind's rem breakpoints and why a layout you tested at 16px can flip to `md:grid-cols-3` on someone else's machine. Zoran shows off `corner-shape`, which turns your `border-radius` into squircles, scoops and notches with one declaration.

You also get a security video with a great account takeover tip, a cloud coding agent that bills by session instead of tokens, and an ESLint plugin that rewrites `w-[100px]` into `w-25`.

Let's dive in 👇

## **🌟 News**

![](https://tailwindweekly.com/content/images/2026/08/image-6.png)

### **Mailviews components updated to Maizzle 6**

[Cosmin](https://x.com/cossssmin/status/2088306501303652524?ref=tailwindweekly.com) updated every Mailviews component to Maizzle 6 and added a few new ecommerce ones along the way. He's giving the template packs the same treatment, with an announcement coming soon.

If you own Mailviews, your components are already on the latest version. If you don't, it's 227 components with 935 variants in HTML, Maizzle or Tailwind CSS.

### **CSS gradients now work in Maizzle**

Tailwind 4's gradient utilities lean on modern CSS that email clients choke on. Cosmin [fixed that](https://x.com/cossssmin/status/2088583056462430633?ref=tailwindweekly.com) by merging the gradient utilities into a single class that outputs a plain `background-image` declaration you can inline.

Linear, radial and conic all work, so your gradients show up wherever the client supports CSS gradients.

### **eslint-plugin-tailwindcss** [**v4.4.0**](https://github.com/francoismassart/eslint-plugin-tailwindcss/releases?ref=tailwindweekly.com)

François added an `enforces-canonical-classname` rule, which needs Tailwind CSS v4.3.0 or above. Linting runs faster too.

v4.3.0 shipped a few days earlier with much better Svelte support: `class:` directives, object syntax and array syntax.

## **🤩 Windy Picks**

### Me, again 🙋🏻‍♀️

Still looking for a full-time role, still open to freelance projects. 12 years of front-end work, plus full stack in Laravel, Vue, and React. On the Tailwind side: I run this newsletter, side projects like [Todowing](https://todowing.com/?ref=tailwindweekly.com) and [Windybase](https://windybase.com/?ref=tailwindweekly.com), and client work for [Baselair](https://thebaselair.com/?ref=tailwindweekly.com) and [FLX Websites](https://flxwebsites.com/?ref=tailwindweekly.com).

Besides code, most of my week goes to people. I scope tickets with PMs so a sprint ships. If the empty state never made it into the Figma, I ask the designer instead of inventing one. When a client asks for something that will blow up the timeline, I tell them that week, not the week before launch. QA gets PR notes they can test against, and when a bug comes back I fix it.

Hand me a Figma and a spec and I can take it from idea to launch. I've worked async with US and European teams for years, and I'm on AST so overlap is easy. Email me at [vivian@redpixel.io](mailto:vivian@redpixel.io) and let's chat 🙂

## **📚 Learning**

![](https://tailwindweekly.com/content/images/2026/08/image-4.png)

### [Can we make default tailwind a more accessible choice?](https://spatie.be/blog/can-we-make-default-tailwind-a-more-accessible-choice?ref=tailwindweekly.com)

Tailwind's default breakpoints use rem, which means a user's browser font size setting can move them. Nick Bevers from Spatie walks through why: setting `html { font-size }` does nothing, since rem inside a media query resolves against the initial value and ignores your CSS, but the browser's own default font size setting does shift things. So a layout you tested at 16px can flip into `md:grid-cols-3` on someone else's machine at a viewport you never checked. Nick argues both sides. rem breakpoints serve people who bump their base font instead of zooming, px breakpoints trigger exactly where you designed them. He includes a `@theme` override if you want to switch to px, plus a codepen where you can change your own font size and watch the rem breakpoint move while the px one stays put.

### [Security Mistakes Every Dev Makes (I Did Too)](https://www.youtube.com/watch?v=x6YBZ4w7Ueg&ref=tailwindweekly.com)

A video full of practical security tips for any app you build. First one: returning 403 for a resource you can't access tells an attacker that resource exists, so return 404 either way, and use UUID v7 for your IDs since they're time-ordered, index friendly and not guessable from outside. From there it covers rate limiting every endpoint, by account ID rather than IP, so one user can't scrape the same route thousands of times. Also clamp the `per_page` value instead of trusting whatever the user sends, and use the same generic error message on login and password reset so nobody can fish for which emails are registered. The account takeover tip at the end is the one worth stealing. When a user changes their email, confirm on the new address and the old one before you commit the change.

### [Start Using the corner-shape CSS Property Today](https://www.youtube.com/watch?v=oKcrTBjmOio&ref=tailwindweekly.com)

Zoran Jambor covers `corner-shape`, a CSS property that changes the shape of the corners `border-radius` already gives you. Set it to `squircle`, `scoop`, `bevel`, `notch` or `square` and you get a different border effect from a single declaration. He walks through a demo of each value, and the differences get much more obvious once you push the radius up to something like `11rem`. Every keyword maps to a `superellipse()` value behind the scenes, so `round` is `1`, `bevel` is `0`, `scoop` is `-1`, and you can pass your own number if none of the keywords fit your design. That also means you can transition between corner shapes. Browsers without support fall back to a normal rounded border, so small radii are safe to ship today, though Zoran suggests an `@supports` check if you're going extreme.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/08/screenshot-1440x900-1787358120737.webp)](https://standardcode.ai/?ref=tailwindweekly.com)

### [Standard Code](https://standardcode.ai/?ref=tailwindweekly.com)

Standard Code is a cloud coding agent that bills by lines of service instead of tokens. One line gets you one active session with unlimited usage. Session state lives in the cloud, so you can start a task in the terminal and pick it up later in the web app, on macOS or iOS. It runs a team of domain-specific subagents for research, codebase exploration and asset generation, and their work stays out of your main session's context. The site is worth a scroll too, with an animated terminal, a +/− line counter that updates pricing live, and a code editor mock.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/2026/08/image-5.png)

### [tailwind-suggest-plugins](https://github.com/anburocky3/tailwind-suggest-plugins?ref=tailwindweekly.com)

If you've ever inherited a codebase full of `w-[100px]` and `text-[14px]`, this one's for you. It's a set of ESLint and Prettier plugins that convert arbitrary values into their canonical Tailwind equivalents, so `w-[100px]` becomes `w-25`. What makes it interesting is that it uses Tailwind's own language service instead of regex, so it also resolves custom theme tokens correctly. One heads-up: it doesn't play nicely with `prettier-plugin-tailwindcss` on save, but the README has a two-step workaround that runs both sequentially.

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.

---

[**BotDirectoryAI**](https://botdirectory.ai/?ref=tailwindweekly.com) – Add bots via a single markdown file + PR (or tweet @botdirectoryai), plus a public JSON API to browse listings.

[**Pi**](https://pi.dev/?ref=tailwindweekly.com) – A minimal agent harness you can extend with skills, prompts, themes, and packages, shareable via npm or git.

[**Flipper Zero**](https://flipper.net/?ref=tailwindweekly.com) – A pocket multi-tool to explore RFID, NFC, Sub-1 GHz, IR, and GPIO debugging, with USB/BLE and apps.

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #226: Taming Tailwind Chaos, Browser Console Tricks, and Dialog Animations at Last 🤩
URL: https://tailwindweekly.com/issue-226/
Last updated: 2026-08-15T12:00:28.000Z
Hello folks!

This week is all about keeping things tidy! We've got five habits that stop your Tailwind codebase from turning into a pile of `p-[123px]` classes, a browser console guide that taught me a few tricks I'd never tried, and the CSS setup that finally lets you animate a `<dialog>` in and out of `display: none`. Plus a color contrast tool that grades your combos for a dozen vision conditions, which is going straight into my bookmarks 🎨.

Let's dive in 👇

## **🤩 Windy Picks**

### Me, again 🙋🏻‍♀️

Still looking for a full-time role, still open to freelance projects. 12 years of front-end work, plus full stack in Laravel, Vue, and React. On the Tailwind side: I run this newsletter, a design-to-Tailwind service at [design2tailwind.com](https://design2tailwind.com/?ref=tailwindweekly.com), and client work for [Baselair](https://thebaselair.com/?ref=tailwindweekly.com) and [FLX Websites](https://flxwebsites.com/?ref=tailwindweekly.com).

I've worked every layer of the stack. On Baselair I built the Tailwind/Vue front-end, the Laravel backend behind it (auth, profiles, project uploads, the challenges and posts system), the image pipeline that handles a feed full of high-res photos, and the server and deploy setup that keeps the whole thing running. You can hand me a Figma and a spec and I can take it from idea to launch on my own. I've worked async with US and European teams for years, and I'm on AST so overlap is easy. Email me at [vivian@redpixel.io](mailto:vivian@redpixel.io) and let's chat 🙂.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/08/image-3.png)](https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css?ref=tailwindweekly.com)

### [5 best practices for preventing chaos in Tailwind CSS](https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css?ref=tailwindweekly.com)

Nina Torgunakova from Evil Martians lays out the habits that keep a Tailwind codebase readable once it grows past a handful of components. She opens with two prerequisites: a design system with real tokens, and a component-based setup. Miss either one and you end up writing `p-[123px] mb-[11px]` across your files with no way to change anything in one place. The five practices cover writing fewer classes (`py-4` over `pt-4 pb-4`, `border-black/50` instead of the separate opacity utility), grouping tokens by category in your `@theme` block, letting the Prettier plugin handle class order, and replacing arbitrary `className` props with a fixed set of variants so a Button looks the same everywhere. She also explains why `@apply` costs you more than it saves, including the `@reference` import v4 requires inside CSS Modules or a scoped Vue/Svelte/Astro `<style>` block. Evil Martians packaged the whole guide as an agent skill if you want your editor catching these for you.

### [How To Use The Browser Console: An In-Depth Guide](https://www.debugbear.com/blog/chrome-browser-console?ref=tailwindweekly.com)

I use the console every day and this guide from Matt Zeunert still showed me a handful of things I'd never tried. It covers the basics first (opening DevTools, filtering messages, reading stack traces) then gets into `console.table` for big arrays, `console.count` for tracking how often something fires, and `monitorEvents` for logging every event on a DOM node. My favorite is the `setTimeout` plus `debugger` snippet that freezes the page after 5 seconds, so you can inspect dropdowns and tooltips that vanish the second you click into DevTools. The Console Utilities API section is worth a read too: `$0`, `copy()`, `$_`, and `getEventListeners` all save you from writing throwaway code. 

### [CSS 20 years in the making?](https://www.youtube.com/watch?v=3QUOstYE7-Q&ref=tailwindweekly.com)

Animating a `<dialog>` in and out of `display: none` is now doable, and Chris from Coding in Public shows the whole setup. You need `transition-behavior: allow-discrete`, transitions on `display` and `overlay`, and a `@starting-style` block so the browser knows where to begin. He does the same for `::backdrop` so it fades with the dialog instead of snapping in. One gotcha: `@starting-style` has to sit last in the block or the cascade eats it. Older browsers fall back to the default dialog behavior, so you can ship this today.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/08/screenshot-1366x768-1786731282885.webp)](https://www.greptile.com/?ref=tailwindweekly.com)

### [Greptile](https://www.greptile.com/?ref=tailwindweekly.com)

Greptile is an AI code review platform that adapts to your team by enforcing repo-specific standards in plain English and learning from your PR history to deliver consistently useful feedback on every pull request. With TREX, it can autonomously write and run tests for each PR in a sandbox to catch bugs and edge cases before they ship. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/08/image-2.png)](https://www.whocanuse.com/?ref=tailwindweekly.com)

### [WhoCanUse](https://www.whocanuse.com/?ref=tailwindweekly.com)

Drop in a background and text color and this tool grades the combination against WCAG for a dozen different vision conditions: protanopia, deuteranopia, tritanomaly, cataracts, glaucoma, low vision. Each row gives you a preview of what the pair looks like to someone with that condition, plus the share of people affected. It also covers direct sunlight and night shift mode, which I never think to test for. The cataracts row sits at 33% affected, so a combo that passes AAA for regular vision can still drop to AA for a third of your readers. Worth bookmarking for your next round of color picking.

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.

---

[**Inertia UI**](https://inertiaui.com/?ref=tailwindweekly.com) – Laravel-first Inertia tables & forms, defined once in PHP, rendered in Vue 3 or React 19 without duplication.

[**Executor**](https://executor.sh/?ref=tailwindweekly.com) – An MCP gateway that unifies every tool behind one endpoint and schema, keeping agent context lean and calls safe.

[**Picmal**](https://picmal.app/?ref=tailwindweekly.com) – Convert, compress, and edit images, video, audio, and PDFs on your Mac—100% offline, no uploads or accounts.

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #225: CSS progress(), overflow: clip explained, and an MCP server for MDN docs 🤓
URL: https://tailwindweekly.com/issue-225/
Last updated: 2026-08-08T12:00:44.000Z
Hello folks!

This week's issue is heavy on pure CSS. We've got `overflow: clip` and why it's probably what you wanted instead of `hidden`, the new `progress()` function that kills a few media queries, and a list of \~30 visual design rules you can apply without second-guessing yourself. 

Let's dive in 👇

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/08/image.png)](https://setapp.sjv.io/21d6nz?ref=tailwindweekly.com)

### [Setapp](https://setapp.sjv.io/21d6nz?ref=tailwindweekly.com) — 270+ Mac apps, one subscription 

I have been a Setapp subscribers for years now and most of my dock comes from it. 

CleanShot X and Gifox handle my screenshots and GIFs, PixelSnap measures things on screen when I'm converting a design to Tailwind, TablePlus is just sublime for databases and GetAPI is great for API work. Then the background ones: iStat Menus so I can know when Cursor is eating all my ram, Lungo to keep the Mac awake while Claude Code works through a long task, PopClip and BetterTouchTool for small automations. LookAway is in there too, which some of you already know I use. 

You don't pay extra for app upgrades, and most run offline after activation, so you stop tracking license keys across dozens of vendors. [**7 days free.**](https://setapp.sjv.io/21d6nz?ref=tailwindweekly.com)

## **📚 Learning**

### [Practical Use-Cases for overflow: clip;](https://www.youtube.com/watch?v=epLoRe4k4qQ&ref=tailwindweekly.com)

If you've been reaching for `overflow: hidden` all this time, you might be surprised to learn it creates a scrollbox, which means hiding overflow on one axis also cuts off the other one. Zoran breaks down the difference between `hidden` and `clip`, shows how `clip` only cuts the axis you actually tell it to, and even demos how a container with `overflow: hidden` can still be scrolled programmatically. He also covers a practical case you've probably run into: a hero image that needs to spill out the bottom without introducing horizontal scrollbars. Good news is `overflow: clip` is Baseline, so you can use it today with no fallbacks needed.

### [The new progress() function in CSS](https://www.amitmerchant.com/the-progress-function-css/?ref=tailwindweekly.com)

CSS keeps taking over things we used to hand off to JavaScript, and `progress()` is a good example. It takes a value plus a start and end bound, then returns a number between 0 and 1 telling you how far along that range you are. The nice part is it works across mixed units, so `progress(100vw, 480px, 1200px)` is valid, something `calc()` can't do. Amit's article walks through the syntax and shows practical snippets like fading a hero image as the viewport narrows and scaling a card up slightly on bigger screens, both without a single media query. He also lists a bunch of other use cases: fluid typography, scroll-driven animations, theme transitions with `color-mix()`, and data-driven styling from custom properties. Support is in Chromium and Safari 26, with Firefox still pending, so keep a `clamp()` fallback around for now. There's a CodePen in the article if you want to poke at the examples.

### [Visual design rules you can safely follow every time](https://anthonyhobday.com/sideprojects/saferules/?ref=tailwindweekly.com)

Anthony Hobday put together a list of around 30 visual design rules you can apply without overthinking them, and it's the kind of thing every dev who builds UI should have bookmarked. The rules are specific and actionable: use near-black and near-white instead of pure black and white, saturate your neutrals with a bit of your accent color, make drop shadow blur values double their distance values, keep outer padding equal to or larger than inner padding, and set nested corner radii to the outer radius minus the gap between them. Each one gets a short explanation of why it works, and most come with a side-by-side example showing the wrong way and the right way. If your designs ever feel slightly off and you can't figure out why, this list will probably tell you.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/08/screenshot-1440x900-1786145834530.webp)](https://www.thinkmill.com.au/?ref=tailwindweekly.com)

### [thinkmill](https://www.thinkmill.com.au/?ref=tailwindweekly.com)

Thinkmill is a software design and engineering consultancy based in Sydney with a team of 35+ designers and engineers. They specialize in design systems (they've worked on Atlassian's, Reckon's and the Australian Government's), product development, API platforms and applied AI. You might also know them from their open source work: Keystone, Keystatic, React Select and Changesets all come from this team. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/08/image-1.png)](https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/?ref=tailwindweekly.com)

### [MDN MCP server](https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/?ref=tailwindweekly.com)

Your coding agent will tell you a feature has no Firefox support when Firefox shipped it three months ago. MDN built an MCP server that feeds its docs and browser compatibility data to the agent instead, and it works with VS Code, Zed, Cursor, Claude Code, Codex CLI and Claude Desktop. MDN tested Claude Code on four features from Firefox 151: without the MCP it got browser support right once out of four, and insisted Firefox had no plans for the Web Serial API, which shipped in May. Still experimental, but the setup takes a minute!

## **👌 Cool Stuff**

**⭐** [**PikaPods**](https://go.pf7.net/tailwind-weekly?ref=tailwindweekly.com) **– The fastest way to try open source apps: PikaPods launches them in seconds and takes care of updates and backups after. Revenue is shared with the original devs, and you get $5 in free credit to start.**

---

[**Shipmail**](https://shipmail.to/?ref=tailwindweekly.com) – All-in-one email, calendars, newsletters, bookings, AI assistant, and API for agents on your own domain, from $4/mo.

[**ntfy**](https://ntfy.sh/?ref=tailwindweekly.com) – Send push notifications from your app or script via HTTP, subscribe by topic, and get desktop alerts instantly.

[**Kap**](https://getkap.co/?ref=tailwindweekly.com) – An open-source screen recorder for macOS that exports to GIF, MP4, WebM, or APNG.

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #224: CSS layers sideways, sneaky font fallbacks, and :has() beyond parents 💡
URL: https://tailwindweekly.com/issue-224/
Last updated: 2026-08-01T12:00:25.000Z
Hello folks!

This week is heavy on CSS fundamentals you thought you already knew. Chris Coyier makes a case for thinking about `@layer` horizontally instead of stacking layers, Harry Roberts explains why `font-family` fallbacks don't work the way you assume (and how that hurts your CLS), and Kevin Powell goes past the parent selector stuff to show what `:has()` can really do.

Let's dive in 👇

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/08/image.png)](https://setapp.sjv.io/21d6nz?ref=tailwindweekly.com)

### [Setapp](https://setapp.sjv.io/21d6nz?ref=tailwindweekly.com) — 270+ Mac apps, one subscription 

I have been a Setapp subscribers for years now and most of my dock comes from it. 

CleanShot X and Gifox handle my screenshots and GIFs, PixelSnap measures things on screen when I'm converting a design to Tailwind, TablePlus is just sublime for databases and GetAPI is great for API work. Then the background ones: iStat Menus so I can know when Cursor is eating all my ram, Lungo to keep the Mac awake while Claude Code works through a long task, PopClip and BetterTouchTool for small automations. LookAway is in there too, which some of you already know I use. 

You don't pay extra for app upgrades, and most run offline after activation, so you stop tracking license keys across dozens of vendors. [**7 days free.**](https://setapp.sjv.io/21d6nz?ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/07/image-5.png)](https://master.dev/blog/thinking-horizontally-in-css-layer/?ref=tailwindweekly.com)

### [Thinking Horizontally in CSS @layer](https://master.dev/blog/thinking-horizontally-in-css-layer/?ref=tailwindweekly.com)

Most of us think about `@layer` vertically: stack the layers, higher one wins. That model falls apart once you have 100+ components each with their own CSS file, because nobody cares whether the card beats the button. Chris Coyier suggests flipping it sideways. Give each component two pieces: the custom properties wrapped in `@layer` so they stay weak and easy to override, and the actual styles left unlayered and scoped with `@scope`, nesting, or a name-only container query. You get to override a token with a plain `ui-card { --card-font: fantasy }` instead of writing `.root.root` to win a specificity fight. He shows the setup they use at CodePen with their `.module.scss` files, and it's a nice mental shift if layers have ever felt like too much bookkeeping.

### [font-family Doesn’t Fall Back the Way You Think](https://csswizardry.com/2026/04/font-family-doesnt-fall-back-the-way-you-think/?ref=tailwindweekly.com)

Ever seen a flash of Times New Roman on your headings and wondered where it came from, even though your body font is a nice sans-serif? Harry Roberts explains why in this post: `font-family` fallbacks are self-contained. When you set `font-family: "Open Sans"` on an `h1`, the browser doesn't walk back up the DOM looking for the parent's stack while the web font loads. It reads that one declaration, runs out of options, and drops straight to the browser default. Beyond looking wrong, it can hurt your CLS scores if the fallback face has very different proportions than the real font. The fix is as simple as it gets: any time you declare a `font-family`, declare the whole stack, even if that's just adding `sans-serif` at the end. 

### [:has() is more than a parent selector](https://www.youtube.com/watch?v=cxSowU9sDdU&ref=tailwindweekly.com)

You probably learned `:has()` as the parent selector and left it there. Its real name is the relational selector, and Kevin Powell spends this video on the parts nobody uses: selecting an element that comes *before* another one (`:has(+ * .pink)`), styling every sibling except the one that matched, and switching up a layout once a container holds four or more children. He also covers `:nth-child(2 of .green)`, which counts elements by class instead of by tag like `:nth-of-type` does. One catch: you can't nest `:has()` inside another `:has()`, since that opens the door to recursion. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/07/screenshot-1440x900-1785541461026.webp)](https://orshot.com/?ref=tailwindweekly.com)

### [Orshot](https://orshot.com/?ref=tailwindweekly.com)

Orshot is a developer-friendly creative automation platform that turns parameterized templates (built in Orshot Studio or imported from Figma/Canva) into on-brand images, multi-page PDFs, and MP4 videos via REST API, SDKs, webhooks, dynamic/signed URLs, and CLI. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/07/image-4.png)](https://remocn.dev/?ref=tailwindweekly.com)

### [Remocn](https://remocn.dev/?ref=tailwindweekly.com)

Making a product demo video means hiring a motion designer or spending a weekend in After Effects. remocn skips both with a registry of 260 MIT-licensed animation components your AI agent puts together for you. Open Claude Code or Cursor in an empty folder, paste one prompt, and a preview opens in the browser. Say what you want changed and it updates while you watch. Everything copies into your repo, so there's no runtime and no account.

## **👌 Cool Stuff**

⭐[**PikaPods**](https://go.pf7.net/tailwind-weekly?ref=tailwindweekly.com) – **Try any open source app without babysitting a server. PikaPods spins it up in seconds, handles updates and backups, and shares revenue with the original devs. *New accounts get $5 in free credit.***

---

[**Micro Snitch**](https://www.obdev.at/products/microsnitch/index.html?ref=tailwindweekly.com) – A lightweight Mac menu bar app that alerts and logs any microphone or camera activity.

[**MXroute**](https://mxroute.com/?ref=tailwindweekly.com) – No-nonsense email hosting with unlimited domains/accounts, full SMTP/IMAP/POP3, 99.9%+ uptime, operator-run since 2013.

---

[**2FAS**](https://2fas.com/?ref=tailwindweekly.com) – An open-source 2FA authenticator that's easy to migrate to, with strong privacy, QR setup, backups, and no ads.

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #223: v4.3.3 patch, native CSS spring animations, and border-shape magic 🌟
URL: https://tailwindweekly.com/issue-223/
Last updated: 2026-07-18T12:00:12.000Z
Hello folks!

Good mix this week. The Tailwind team shipped patches across the board (core, IntelliSense, and the Prettier plugin), Josh Comeau explains how to get spring animations in pure CSS, and Temani Afif dives into the new border-shape property. 

Let's dive in 👇

## **🌟 News**

#### [**Tailwind CSS v4.3.3**](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.3.3?ref=tailwindweekly.com)

The Tailwind team shipped another patch release, this one focused on bug fixes across the CLI, PostCSS, and Vite plugins. Highlights include a new `--watch --poll` option for when filesystem events aren't reliable, better CJK font handling on Windows, and a fix that keeps achromatic theme colors from shifting hue in `oklch`. If you've hit any weird edge cases with watchers or color mixing, this release probably fixes them.

#### [**Tailwind CSS IntelliSense v0.16.0**](https://github.com/tailwindlabs/tailwindcss-intellisense/releases/tag/v0.16.0?ref=tailwindweekly.com)

New IntelliSense release, focused on speed. Autocomplete runs faster in large files and utility lookups on v4 projects got quicker too. You also get pixel equivalents when hovering `@container` values, plus a fix for class hovers inside Vue `<script>` tags. 

#### [**Prettier Plugin for Tailwind CSS v0.8.1**](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.8.1?ref=tailwindweekly.com)

Small patch release with two fixes worth knowing about. The plugin no longer strips escape sequences when sorting classes in JS string literals, which could break Vue attribute expressions. Svelte users get class sorting back in markup and dynamic `class={...}` expressions when running `prettier-plugin-svelte` v4\. If you use either framework, grab the update.

## **🤩 Windy Picks**

### **This week's Windy Pick: me 🙋🏻‍♀️**

I'm looking for a full-time role (also open to projects). I've spent 12 years doing front-end work with full stack chops in Laravel, Vue, and React, and if you're reading this you already know how deep I am in the Tailwind ecosystem: I run this newsletter, a design-to-Tailwind service over at [design2tailwind.com](https://design2tailwind.com/?ref=tailwindweekly.com), and I've shipped Tailwind projects for clients like [Baselair](https://thebaselair.com/?ref=tailwindweekly.com) and [FLX Websites](https://flxwebsites.com/?ref=tailwindweekly.com).

Why me? I'm the person you hand a Figma file to and get back clean, production-ready full-stack code without babysitting. I communicate early, deliver on time, and I've spent years working async with teams across the US and Europe (I'm on AST, so overlap is easy). If your team is heavy on backend or full stack devs and light on front-end expertise, that's exactly the gap I fill. Reach me at [vivian@redpixel.io](mailto:vivian@redpixel.io) and let's chat.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/07/image-3.png)](https://www.joshwcomeau.com/animation/linear-timing-function?ref=tailwindweekly.com)

### [Springs and Bounces in Native CSS](https://www.joshwcomeau.com/animation/linear-timing-function?ref=tailwindweekly.com)

Josh Comeau is back with another interactive deep dive, this time on the `linear()` timing function. If you've ever wanted spring or bounce animations without pulling in a JS library, this is the CSS feature you need. The trick: instead of a Bézier curve, you feed `linear()` a set of points that trace the motion you want, and tools like Easing Wizard generate those values for you. Josh also covers the gotchas (interrupted transitions feel off, and springs don't love fixed durations) plus a smart CSS variable pattern with `@supports` fallbacks. A great read if you want your animations to feel more natural!

### [Dark mode with web standards](https://olliewilliams.xyz/blog/dark-mode/?ref=tailwindweekly.com)

Ollie Williams wrote a practical guide on implementing dark mode the standards-friendly way. The setup: respect the OS preference by default with `<meta name="color-scheme" content="light dark">`, then let users override it per-site by swapping that attribute with JS. Ollie covers what `color-scheme` actually affects (system colors, scrollbars, `light-dark()` values) and where it falls short, like the disconnect with the `prefers-color-scheme` media query. There's also a clever style query hack for changing more than colors between modes. 

### [Get Ready For the Powerful CSS border-shape Property!](https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/?ref=tailwindweekly.com)

Temani Afif is at it again with a deep dive into `border-shape`, the newest addition to the CSS shapes family. If you've ever tried adding a border to a clipped shape, you know the pain: `clip-path` cuts off everything, decorations included. `border-shape` fixes that by shaping the element itself, so borders, shadows, and outlines follow the shape instead of the box. Temani shows off border-only shapes, cutouts, breakout backgrounds, and some wild hover animations. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/07/screenshot-1366x768-1784337630480.webp)](https://getjuicy.app/?ref=tailwindweekly.com)

### [Juicy](https://getjuicy.app/?ref=tailwindweekly.com)

Juicy is a native Mac battery app that gives you custom alerts at any percentage you want, not just Apple's 10% and 5% defaults. It also tracks battery health, cycle count, and temperature, shows which apps drain your battery, and lets you cap charging in the 50-80% range to protect lifespan. Built in Swift by an indie dev, uses under 0.1% CPU, and it's a one-time purchase with no subscription. If your MacBook has ever died mid-call, this one's for you.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/07/screenshot-1366x768-1784337520084.webp)](https://pete.design/tw-fade?ref=tailwindweekly.com)

### [tw-fade](https://github.com/petekp/tw-fade?ref=tailwindweekly.com)

I love finding plugins that solve small UI details you didn't know you needed, and this one is a great example. `tw-fade` adds scroll-edge fades to any scroll container so content dissolves into the surface behind it, using pure CSS and zero JavaScript. My favorite part: the fades are scroll-aware, so they only show up when content is hidden beyond that edge. You get utilities for direction, band size, travel distance, and clear zones for sticky headers. Built for Tailwind v4 and worth a try if you want to play with scroll-driven animations.

## **👌 Cool Stuff**

⭐[**PikaPods**](https://go.pf7.net/tailwind-weekly?ref=tailwindweekly.com) – **Try any open source app without babysitting a server. PikaPods spins it up in seconds, handles updates and backups, and shares revenue with the original devs. *New accounts get $5 in free credit.***

[**Larasend**](https://larasend.com/?ref=tailwindweekly.com) – A self-hosted, open-source email dashboard for AWS SES with a one-line Laravel integration.

[**Sleeve**](https://replay.software/sleeve?ref=tailwindweekly.com) – A Mac desktop music widget to display/control Apple Music, Spotify, & Doppler, with shareable themes & shortcuts.

[**shiply.now**](https://shiply.now/?ref=tailwindweekly.com) – Publish any app to a live URL in one call, with backend included (DB, functions, email, custom domain), flat pricing.

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #222: eslint-plugin-tailwindcss Gets Smarter, DevTools Hidden Gems, and NuxtUI 🌟
URL: https://tailwindweekly.com/issue-222/
Last updated: 2026-07-11T12:00:56.000Z
Hello folks!

This week is all about quality-of-life upgrades 🛠️. `eslint-plugin-tailwindcss` got smarter at cleaning up arbitrary values, and Maizzle keeps polishing v6 with patch releases. On the learning side, you get DevTools hidden gems, tiny UI details that make interfaces feel finished, and a deep dive into CSS containment. Hoppscotch lands in the showcase, and NuxtUI is worth a look if you build with Vue.

PS: Personal note this week. I'm looking for a full-time position! I have 12 years of experience building for the web: front-end is my specialty (you know I live and breathe Tailwind CSS), and I also do full-stack work with Laravel, Vue, and React. I'm ready to join a team, so if you're hiring or know someone who is, reply to this email or DM me on Twitter @vivgui 🙏

Let's dive in 👇

## **🌟 News**

### **Another** [**eslint-plugin-tailwindcss**](https://github.com/francoismassart/eslint-plugin-tailwindcss/releases?ref=tailwindweekly.com) **update**

The `no-unnecessary-arbitrary-value` rule got a lot smarter in this release. It used to flag only exact string matches, but now it resolves unit conversions and spacing configs, so `inset-[1px]` becomes `inset-px`, `z-[123]` becomes `z-123`, and `m-[8px]` becomes `m-2`. The fixers also respect the `!` important modifier now. If arbitrary values keep sneaking into your codebase, this update will catch them for you!

### **More** [**Maizzle**](https://github.com/maizzle/framework/releases?ref=tailwindweekly.com) **goodies**

Maizzle keeps shipping patch releases for v6! The latest, v6.0.5, fixes issues with the `<Preheader>` and `<Outlook>` components, and v6.0.4 lets you pass props to templates via `render()`. If you're building emails with Maizzle 6, update to the latest!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/06/image-9.png)](https://ref.wisprflow.ai/vivian-guillen?ref=tailwindweekly.com)

I write most of my prompts by voice now, and Wispr Flow is the reason that works. Dictation tools break the moment you say `useEffect` or Supabase. Wispr Flow types them the way I would: variable names, acronyms, casing, the obscure package names I repeat ten times a day.

It also runs in every app I use. Same tool whether I'm prompting Claude Code, writing a PR description, or replying in Slack. No switching windows, no copy-pasting from a transcription pane. It learns your vocabulary too, so your project-specific terms stop needing corrections.

Once you talk through a detailed prompt instead of typing it, going back feels slow. If you spend your day feeding context into AI tools, this is the upgrade.

[**Try it free**](https://ref.wisprflow.ai/vivian-guillen?ref=tailwindweekly.com)**.** Works on macOS, Windows, iPhone, and Android.

## **📚 Learning**

### [Chrome DevTools Elements Panel Tips & Tricks](https://www.youtube.com/watch?v=yBKNOfEM4jA&list=TLGGHJrfU5tbOyUxNDEyMjAyNQ&index=14&ref=tailwindweekly.com)

Chrome DevTools has a bunch of hidden gems in the Elements panel that most of us never touch, and this video from Zoran Jambor over at CSS Weekly walks through a few of the best ones. He covers holding Command (or Control) to hide that measurement popup when it's blocking what you're trying to see, using Shift to select elements with `pointer-events: none`, and my favorite" enabling "Emulate a focused page" so your dropdowns and autosuggestions don't vanish the second you click into DevTools. 

### [Details That Make Interfaces Feel Better](https://jakub.kr/writing/details-that-make-interfaces-feel-better?ref=tailwindweekly.com)

This one is basically a checklist of tiny UI details that, when you add them up, make an interface feel noticeably more “finished” (even if users can’t explain why). It goes through practical stuff like improving text wrapping with `text-wrap: balance` and `text-wrap: pretty`, matching nested border radii with concentric offsets, making contextual icons feel snappier with opacity/scale/blur, fixing number-jitter with `tabular-nums`, and choosing transitions over keyframes when you want interruptible interactions. 

### [What Is CSS Containment and How Can I Use It?](https://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/?ref=tailwindweekly.com)

CSS containment is one of those performance features that sounds abstract until you see what it actually saves you, and this article does a great job making it click: it explains *why* browsers end up doing so much extra style/layout/paint work in busy UIs, then walks you through what each `contain` value really means (layout/paint/size/style, plus `content` and `strict`) and, more importantly, when it’s safe to use them on real components like drawers, cards, feeds, and third‑party widgets. The best part is that it doesn’t pretend it’s a free win: it calls out the gotchas that will bite you (clipping, zero-sized boxes, surprise stacking contexts, `position: fixed` behaving differently), and it ties everything into `content-visibility` and `contain-intrinsic-size` so you can skip off-screen work without rolling your own virtualization. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/07/screenshot-1440x900-1783738290707.webp)](https://hoppscotch.com/?ref=tailwindweekly.com)

### [Hoppscotch](https://hoppscotch.com/?ref=tailwindweekly.com)

Hoppscotch is a developer-first, open-source API platform that helps you build, test, document, and share APIs faster with a modern API client, assertions, auth/header tooling, code generation, and a CLI for terminal automation. Trusted by millions and processing 5M+ requests monthly, it supports team collaboration with workspace activity tracking, SSO, and seamless migration from Postman/Insomnia/cURL. Platform-agnostic with proxy/interceptor support and local-first storage (no tracking, no analytics, no ads), Hoppscotch fits cleanly into any workflow from startup projects to enterprise stacks.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/2026/07/image-2.png)

### [NuxtUI](https://ui.nuxt.com/?ref=tailwindweekly.com)

If you’re building with Vue (or Nuxt) and you’re tired of stitching together half a design system, Nuxt UI is a pretty compelling “batteries included” component library: 125+ accessible, Tailwind-styled components that work in Nuxt and plain Vue setups (Vite, Inertia, SSR). What I like is how much it covers beyond just components—TypeScript types, light/dark mode, i18n-ready, and even huge Iconify icon access—plus the theming story is solid with CSS-first tokens/semantic colors and Tailwind Variants-style customization so you can actually bend it to your app without fighting defaults. Definitely worth a look if you want to ship a polished UI fast while keeping Tailwind-level control.

## **👌 Cool Stuff**

⭐[**PikaPods**](https://go.pf7.net/tailwind-weekly?ref=tailwindweekly.com) – **Self-host your favorite open source apps in seconds. PikaPods runs them for you with automatic updates and backups, and shares revenue with the original developers. *New accounts get $5 in free credit to try it.***

[**Yerd**](https://yerd.dev/?ref=tailwindweekly.com) – A tiny tray app to manage local PHP dev: multi-PHP, .test sites, DBs/caches, mail capture, and Laravel telemetry.

[**mailflare**](https://github.com/hieunc229/mailflare?ref=tailwindweekly.com) – A self-hosted, AI-powered email inbox on Cloudflare with custom domains, routing, sending, R2 attachments, and realtime.

[**TinyStart**](https://tinystart.app/?ref=tailwindweekly.com) – A lightweight macOS launcher for apps, links, & emoji, with inline calc/conversions and zero telemetry.

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #221: v4.3.2 Fixes, eslint-plugin-tailwindcss Rewrite shadcn/ui ported to Blade 💅
URL: https://tailwindweekly.com/issue-221/
Last updated: 2026-07-04T12:00:01.000Z
Hello folks!

Hope your week's been a good one! This issue has a little bit of everything: a fresh Tailwind v4.3.2 patch release, a complete rewrite of `eslint-plugin-tailwindcss`, and a fun look at how Jonathan Reinink is building templates with AI agents 🤖 Plus some solid CSS deep-dives on animations, font fallbacks, and sticky positioning quirks.

Let's dive in 👇

## **🌟 News**

### **Tailwind CSS** [**v4.3.2**](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.3.2?ref=tailwindweekly.com) **is out**

The Tailwind team shipped another patch release this week with a nice batch of bug fixes. Highlights include support for bare spacing values in `auto-rows-*` and `auto-cols-*` utilities (so `auto-rows-12` now just works), several stability fixes for the CLI and Vite plugin in watch mode, and smarter `@source` scanning that no longer picks up unrelated sibling folders. 

### **eslint-plugin-tailwindcss v4 is here**

Big news if you lint your class names: [eslint-plugin-tailwindcss](https://github.com/francoismassart/eslint-plugin-tailwindcss?ref=tailwindweekly.com) got a complete rewrite for Tailwind CSS v4\. It's now written in TypeScript, leans on Tailwind's internal tooling for accuracy, and even includes shadcn/ui's `cn` function in its default settings. Heads up though: v4 only supports Tailwind v4, ESLint flat config, and Node 20.19+. The team has been busy shipping patch releases too (v4.0.4 through v4.0.6 landed this week alone), fixing false positives and peer dependency issues, so it's getting more stable by the day.

### **Jonathan Reinink is building templates with AI**

Here's a fun peek behind the curtain: Jonathan Reinink [shared](https://x.com/reinink/status/2072021201774424147?ref=tailwindweekly.com) on X how he's building a new template (designed by Steve Schoger in Figma) using Codex instead of writing it by hand. His workflow is interesting: he feeds the agent reference components he previously wrote by hand, provides all five breakpoints per component via the Figma Codex plugin, and then cleans everything up with the \`canonicalize-tailwind\` skill from [ui.sh](https://ui.sh/?ref=tailwindweekly.com) to get more idiomatic Tailwind code. 

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/06/image-9.png)](https://ref.wisprflow.ai/vivian-guillen?ref=tailwindweekly.com)

Wispr Flow has been my daily driver for a while now, but the dev-focused angle is what makes it so good. I pair it with Claude Code and Solo and just talk through what I want—Flow handles the camelCase, the snake\_case, the acronyms, and dev terms like Supabase or MongoDB without mangling them. No more fixing transcription mistakes on every variable name.

The best part is how it stays out of the way. It works in any app (editor, browser, Slack, ChatGPT, Claude) so I can dictate a detailed prompt, knock out a PR summary, or fire off a quick reply from my phone without switching tools or breaking flow. It learns your vocabulary too, so the weird product names and project-specific words you say constantly stop getting misspelled.

If you spend your day typing prompts and context into AI tools, talking is just faster, and WisperFlow is the first dictation app I've used that actually keeps up with how developers write.

[**Try it free**](https://ref.wisprflow.ai/vivian-guillen?ref=tailwindweekly.com), and it works on macOS, Windows, iPhone, and Android, so you can flow wherever you code.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/07/image-1.png)](https://www.joshwcomeau.com/animation/css-vs-javascript/?ref=tailwindweekly.com)

### [CSS vs. JavaScript](https://www.joshwcomeau.com/animation/css-vs-javascript/?ref=tailwindweekly.com)

If you’ve ever wondered whether CSS animations are “always faster” than JavaScript ones, this article does a really good job of unpacking the nuance. It walks through the classic CSS keyframes vs. `requestAnimationFrame` loop comparison, explains why the JS version *can* stutter (not because the math is expensive, but because it fights for time on the main thread), and then takes it a step further by comparing real-world libraries like Motion and GSAP. The most useful takeaway is learning *when* JS animations are totally fine, when they’ll get choppy in app-y UIs, and why a WAAPI-based approach can give you the best of both worlds.

### [font-family Doesn’t Fall Back the Way You Think](https://csswizardry.com/2026/04/font-family-doesnt-fall-back-the-way-you-think/?ref=tailwindweekly.com)

We've all seen that dreaded flash of Times New Roman when a web font hasn't loaded yet, and Harry Roberts explains exactly why it happens. Turns out font-family fallbacks are self-contained; if you declare `font-family: "Open Sans"` on an element, the browser won't walk up the DOM and use the parent's stack when the font isn't available. It falls back to the browser default instead (hello, Times). The fix is simple: always specify a complete stack every time you declare a font-family, even if it feels redundant. 

### [The Weird Parts of position: sticky;](https://frontendmasters.com/blog/the-weird-parts-of-position-sticky/?utm%5Fsource=CSS-Weekly&utm%5Fmedium=newsletter&utm%5Fcampaign=issue-626-november-5-2025&%5Fbhlid=2d00372e4a8ea3e6fed561869d6bceca741c03d9)

Sticky positioning is one of those features that seems dead simple until it mysteriously stops working. Adam Rackis breaks down the two big culprits: your sticky element being taller than its scroll container, and (the sneakier one) a parent element that's too small for the sticky to stick without "breaking out" of it, which the CSS spec doesn't allow. This second issue shows up all the time in flex and grid layouts, since children default to `stretch`, and the fix is usually just a well-placed `self-start`. Also, all the examples are written in Tailwind, so you can see everything in one place. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/07/screenshot-1440x900-1783123574457.webp)](https://cozyjournal.app/?ref=tailwindweekly.com)

### [Cozy](https://cozyjournal.app/?utm%5Fcampaign=tailwind-weekly-221&utm%5Fsource=Tailwind+Weekly)

Cozy is a local-first journaling app for macOS & Windows that keeps everything on your device; no server sync, no AI touching your entries, just plain Markdown files on your computer. You can add photos, audio, and videos to entries, tag them, track habits, and even write in a distraction-free mode with ambient sounds (rain, café, fireplace). It also imports from Day One, Notion, Obsidian, and Bear, so switching doesn't mean starting from scratch. One-time purchase of $35, no subscription.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/07/image.png)](https://blatui.remix-it.com/?ref=tailwindweekly.com)

### [BlatUI](https://blatui.remix-it.com/?ref=tailwindweekly.com)

Laravel folks, this one's for you! BlatUI is a full port of shadcn/ui to the BLAT stack (Blade, Laravel, Alpine & Tailwind v4), we're talking 153 components, 64 blocks, 34 templates and even 70 charts. Everything gets copied into your project with a single Artisan command, so no npm runtime and no black-box dependency, you own the actual Blade files. It's MIT licensed, ships light + dark by default, and there's even an MCP server so your AI tools can install components. 

## **👌 Cool Stuff**

⭐[**PikaPods**](https://go.pf7.net/tailwind-weekly?ref=tailwindweekly.com) – **Self-host your favorite open source apps in seconds. PikaPods runs them for you with automatic updates and backups, and shares revenue with the original developers. *New accounts get $5 in free credit to try it.***

[**Mochi**](https://mochi.cards/?ref=tailwindweekly.com) – Spaced repetition flashcards you create with Markdown and study with smart review schedules.

[**Staying Ahead with AI**](https://newsletter.stayingahead.com/?ref=tailwindweekly.com) – A weekly newsletter covering AI news, tools, and breakthroughs for thinkers and builders.

[**VibePHP**](https://github.com/mnapoli/vibephp?ref=tailwindweekly.com) – A satirical PHP "runtime" where an AI reads your code and hallucinates the HTTP response instead of executing it.

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #220: Relative colors land in CSS, smarter logging with wide events, and picking the right icons 🎨
URL: https://tailwindweekly.com/issue-220/
Last updated: 2026-06-27T12:00:46.000Z
Hello folks!

Slightly quieter week on the news front, nothing major to report, but still got some great resources for you. We've got CSS relative colors that feel borderline like cheating once they click, a logging article that'll hit a little too close to home if you've ever grep-ed through prod at 2am, and a handy guide on picking icons that don't make your UI look like a ransom note. Throw in a slick UX research platform and a shadcn extension you'll want in your editor, and you're all set.

Let's dive in 👇

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/06/image-9.png)](https://ref.wisprflow.ai/vivian-guillen?ref=tailwindweekly.com)

Wispr Flow has been my daily driver for a while now, but the dev-focused angle is what makes it so good. I pair it with Claude Code and Solo and just talk through what I want—Flow handles the camelCase, the snake\_case, the acronyms, and dev terms like Supabase or MongoDB without mangling them. No more fixing transcription mistakes on every variable name.

The best part is how it stays out of the way. It works in any app—editor, browser, Slack, ChatGPT, Claude—so I can dictate a detailed prompt, knock out a PR summary, or fire off a quick reply from my phone without switching tools or breaking flow. It learns your vocabulary too, so the weird product names and project-specific words you say constantly stop getting misspelled.

If you spend your day typing prompts and context into AI tools, talking is just faster, and WisperFlow is the first dictation app I've used that actually keeps up with how developers write.

[**Try it free**](https://ref.wisprflow.ai/vivian-guillen?ref=tailwindweekly.com), and it works on macOS, Windows, iPhone, and Android, so you can flow wherever you code.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/2026/06/image-10.png)

### [Logging Sucks - Your Logs Are Lying To You](https://loggingsucks.com/?ref=tailwindweekly.com)

If you’ve ever spent way too long grep-ing through “INFO request completed” logs at 2am only to come out with more questions than answers, this article will feel painfully familiar. It argues (pretty convincingly) that most logs aren’t “bad”, they’re just missing the one thing you actually need when prod breaks: context. The author explains why string search and scattered log lines don’t scale in a world where one request fans out across services, then introduces the idea of “wide events” / canonical log lines (one rich, structured event per request per service) and why that mental model is a game-changer compared to sprinkling more log statements or assuming OpenTelemetry will save you. It also gets practical with an implementation pattern (build the event as the request flows, emit once at the end) and tackles the cost concern with tail sampling rules (keep errors, keep slow requests, keep VIPs, sample the rest). 

### [Tips on How to Pick the Right Icons for Your Website](https://stephaniewalter.design/blog/tips-on-how-to-pick-the-right-icons-for-your-website-with-icons8/?ref=tailwindweekly.com)

There are a ton of icon packs out there and this article is basically a sanity guide for choosing icons that don’t make your UI look like a random collage. It walks you through how to pick icons that actually communicate the right idea (and when you should label them because icons are not as universal as we think), plus the practical consistency checks that matter: outline vs solid, stroke widths, monochrome vs multicolor, sizing/ratios, and matching style so everything “belongs” together. It also gives a straightforward strategy for staying consistent by sticking to a single set (or using a library that lets you filter by style) and even touches on keeping a shared color palette if you go the colored-icon route.

### [Relative colors are HERE!](https://www.youtube.com/watch?v=oTdQaaqtGDk&ref=tailwindweekly.com)

The new relative color syntax in CSS is one of those features that feels like cheating once you get it. Chris from Coding in Public shows how to take any color, hex, HSL, OKLCH, doesn't matter, and use the `from` keyword to break it into its component channels, then tweak them however you like. Want a lighter variant of your base color? Just `calc()` against the lightness channel. Need it to stay in bounds? Wrap it in `clamp()` so it never blows past 100%. He covers the gotchas too, like how different color spaces treat their values differently (percentages in HSL vs. 0-to-1 ranges in OKLCH), and notes you'll always need all three channel values present even when hardcoding some. Support has been baseline since 2023 and sits around 87%, so a quick `@supports` query with a fallback has you covered. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/06/screenshot-1366x768-1782488115865.webp)](https://www.uxops.com/?ref=tailwindweekly.com)

### [uxmetrics](https://www.uxops.com/?ref=tailwindweekly.com)

UX Metrics is a unified user-research platform that lets web developers spin up card sorts, tree tests, surveys, prototype tests, and interviews in minutes using AI-assisted setup and imports instead of manual wiring. Recruit participants however you ship—live intercepts in-product, targeted invites from your pool, or shareable links from any channel—while keeping all responses centralized for faster synthesis. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/06/image-11.png)](https://www.shadcnblocks.com/ide-extension?ref=tailwindweekly.com)

### [Shadcnblocks IDE Extension](https://www.shadcnblocks.com/ide-extension?ref=tailwindweekly.com)

If you’re building UI with shadcn a lot, this is a nice quality-of-life upgrade . It lets you browse a library of 1665+ production-ready blocks right from a sidebar in your editor, search and filter by category/archetype/keyword (and free vs pro), preview the full source code before you install, and then drop it into your project with a single click using the shadcn CLI under the hood, so there’s basically no manual setup. 

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.

---

[**Vira Theme**](https://www.vira.build/?ref=tailwindweekly.com) – A multi-platform editor + terminal theme built for long coding sessions, with refined variants and synced settings.

---

[**ModelHub**](https://studio.consciousengines.com/model-hub?ref=tailwindweekly.com) – A macOS menu bar app to browse, download, and manage local LLMs from Hugging Face, compatible with Ollama & more.

---

[**Sponsonizer**](https://sponsonizer.com/?ref=tailwindweekly.com) – Like Calendly for newsletter ad slots. Sponsors pick a date, pay, and you collect the creative—no spreadsheets, no DMs, no 30% middleman.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #219: ui.sh goes local-first, mastering @property, and animations that actually feel good ✨
URL: https://tailwindweekly.com/tailwind-weekly-219/
Last updated: 2026-06-23T21:33:27.000Z
Hello folks!

This week ui.sh got a major makeover: the single `/ui` skill is being split into a whole lineup of local-first skills, which means more power and one less remote server to worry about. We've also got a couple of really good reads on animations and the `@property` deep dive that finally makes typed custom properties click. 

Let's dive in 👇

## **🌟 News**

![](https://tailwindweekly.com/content/images/2026/06/image-8.png)

### [ui.sh](https://ui.sh/?ref=tailwindweekly.com) just got a huge update

Instead of the single top-level `/ui` skill with subskills hiding underneath, the Tailwind Labs team is splitting everything into separate, locally installed skills — more discoverable, more capable, and no remote MCP server as a point of failure in your workflow.

The headliner is `/design`, which is the direct replacement for how you've been using `/ui` — it loads all the ui.sh rules around color, spacing, typography, and accessibility. But there's a whole lineup beyond it: `/ideas` triggers the UI picker for comparing concepts and palettes, `/brand-kit` taps OpenAI's gpt-image-2 for visual inspiration, `/componentize` breaks big markup blocks into well-factored components, `/canonicalize-tailwind` tidies up your class strings, `/add-dark-mode` and `/dark-mode-image` handle dark mode properly (not just inverting colors), `/make-responsive` adapts desktop UIs across breakpoints, and `/markup-from-image` turns screenshots and Figma exports into clean semantic HTML or JSX. The site also added real user accounts to make sharing docs easier for teams on commercial licenses.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/06/image-9.png)](https://ref.wisprflow.ai/vivian-guillen?ref=tailwindweekly.com)

Wispr Flow has been my daily driver for a while now, but the dev-focused angle is what makes it so good. I pair it with Claude Code and Solo and just talk through what I want—Flow handles the camelCase, the snake\_case, the acronyms, and dev terms like Supabase or MongoDB without mangling them. No more fixing transcription mistakes on every variable name.

The best part is how it stays out of the way. It works in any app—editor, browser, Slack, ChatGPT, Claude—so I can dictate a detailed prompt, knock out a PR summary, or fire off a quick reply from my phone without switching tools or breaking flow. It learns your vocabulary too, so the weird product names and project-specific words you say constantly stop getting misspelled.

If you spend your day typing prompts and context into AI tools, talking is just faster, and WisperFlow is the first dictation app I've used that actually keeps up with how developers write.

[**Try it free**](https://ref.wisprflow.ai/vivian-guillen?ref=tailwindweekly.com), and it works on macOS, Windows, iPhone, and Android, so you can flow wherever you code.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/06/image-7.png)](https://piccalil.li/blog/framework-agnostic-design-systems-part-1/?ref=tailwindweekly.com)

### [Framework-agnostic design systems: a practical approach to web components](https://piccalil.li/blog/framework-agnostic-design-systems-part-1/?ref=tailwindweekly.com)

This is a very practical (and very long) guide to building a framework-agnostic design system component library with web components, then packaging it up and documenting it in the same repo, so you actually end up with something publishable instead of a bunch of half-finished “design system thoughts.” It walks through a solid setup using Elena for the component tooling and VitePress for docs, then uses a button component as the concrete example to cover the whole workflow: props, variants, semantic HTML (yes, a `<button>` is not a `<div>`), scoped styling, bundling, and even generating docs tables from JSDoc/custom elements manifests. 

### [Good vs Great Animations](https://emilkowal.ski/ui/good-vs-great-animations?ref=tailwindweekly.com)

If you’ve ever added “a quick transition” and still felt like the UI looked a bit off, this article is basically the checklist for why. It’s a practical set of tips that goes beyond “add easing” and gets into what actually makes motion feel natural: making dropdowns animate from a believable origin (and how Radix/shadcn can handle that for you), picking the right easing depending on whether something is entering, leaving, or moving, and why the default CSS curves often feel a little lifeless compared to custom ones. It also covers when spring-based motion (think Framer Motion/Motion springs) makes interactions feel more real vs when animation is actually the wrong choice, plus a nice “know your tools” section that explains how the property you animate (not just the duration) can make or break the feel. 

### [Taking a closer look at @property in CSS](https://utilitybend.com/blog/taking-a-closer-look-at-property-in-css/?ref=tailwindweekly.com)

Browser support for `@property` is basically getting to the “okay, we can start using this for real” stage, and this article is a great deep dive into what that actually unlocks beyond the usual Houdini buzzwords. It quickly re-caps the basics (what `@property` is and why typed custom properties matter), then gets into the good stuff: defining variable syntax types so invalid values fall back cleanly, setting default values properly, and controlling inheritance so your design system doesn’t accidentally leak styles down the tree. The author also shows why DevTools support is a big deal here (you can literally see what type the browser expects and where the variable was declared), and rounds it out with the fun, practical payoff—animations that previously “should work but don’t,” like smoothly animating hues, clip-path percentages, and even gradient colors. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/06/screenshot-1440x900-1781918016318.webp)](https://quiver.ai/?ref=tailwindweekly.com)

### [QuiverAI](https://quiver.ai/?ref=tailwindweekly.com)

QuiverAI is a frontier vector-graphics foundation model you can integrate to generate clean, production-ready SVGs like logos, illustrations, and (soon) typography and animations, from text or references. Built by researchers and made for designers, it gives developers precise, editable outputs that stay lightweight and controllable for UI, marketing, and product workflows. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/06/screenshot-1440x900-1781917987093.webp)](https://reui.io/?ref=tailwindweekly.com)

### [REUI](https://reui.io/?ref=tailwindweekly.com)

I’ve been poking around ReUI and it’s basically a massive, free/open-source “upgrade pack” for shadcn/ui projects — 1000+ ready-to-use components and patterns built from shadcn/ui primitives that you can drop into real product flows instead of reinventing the same tables, grids, uploaders, filters, and layout blocks every time. What I like is it stays compatible with Shadcn Create styles, supports both Radix UI and Base UI versions, and the whole site is geared toward helping you ship faster while still ending up with interfaces that don’t feel like the default AI-generated shadcn starter. 

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components, and tools to help you build modern websites and apps fast.

---

[**zot**](https://www.zot.sh/?ref=tailwindweekly.com) – A lightweight single-binary coding agent harness in Go with no Docker/runtime, built-in tools, and multi-model support.

---

[**Marked 3**](https://markedapp.com/?ref=tailwindweekly.com) – A Mac Markdown preview app with live rendering, proofreading tools, custom themes, and export to PDF/HTML/DOCX.

---

[**Peeker**](https://getpeeker.com/?ref=tailwindweekly.com) – A private macOS utility that shows a tiny live preview when someone walks behind you, on-device and offline.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #218: Maizzle 6 Goes Big, Tailwind v4.3.1 Fixes, and Smarter Lazy Loading 🥳
URL: https://tailwindweekly.com/issue-218/
Last updated: 2026-06-13T12:00:53.000Z
Hello folks!

Big week in email land: Maizzle 6 just dropped and it's the biggest release the project has ever shipped 🥳 We've also got a fresh Tailwind patch, a great read on lazy loading done right, and a new Windy Pick I've been using non-stop: Cap, an open source screen recorder that might just replace Loom for you.

Let's dive in 👇

## **🌟 News**

[![](https://tailwindweekly.com/content/images/2026/06/image-6.png)](https://maizzle.com/?ref=tailwindweekly.com)

### **Maizzle 6 is** [**here**](https://maizzle.com/?ref=tailwindweekly.com) **🥳**

This is Maizzle's [biggest release](https://x.com/cossssmin/status/2064351831782838539?ref=tailwindweekly.com) ever and it shows! The new version brings first-class Tailwind CSS 4 support, Vue templating (components, props, slots, the whole deal), a Vite plugin you can drop into Laravel, Next, Nuxt, Astro and more, plus a library of render-tested email components. There's even an official Agent Skill so your AI assistant stops generating broken-in-Outlook markup. The dev UI got a complete revamp too. Just run `npx maizzle new` and start building emails the way you build apps!

### [Tailwind CSS v4.3.1](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.3.1?ref=tailwindweekly.com) is out 🛠️

The team just shipped v4.3.1, a patch release packed with fixes and small quality-of-life improvements. Highlights include a new `--silent` flag for the CLI, `@apply` now playing nice with CSS mixins, smarter canonicalization (no more weird `calc()` suggestions), and a bunch of fixes around `@source` globs and watch mode. Nothing groundbreaking, but if you've hit any rough edges lately, this release probably smooths them out. 

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/06/image-2.png)](https://go.cap.so/vivian-guillen?ref=tailwindweekly.com)

**I've tried pretty much every screen recording tool out there, and Cap is the one that finally stuck.**

[**Cap**](https://go.cap.so/vivian-guillen?ref=tailwindweekly.com) is an open source alternative to Loom that bundles three modes in one app: Instant for quick record-and-share (your video uploads *while* you record, so the link is ready the second you stop), Studio for polished recordings, and a Screenshot mode. The AI touches are genuinely useful too like auto-generated titles, summaries, chapters, and transcripts without any extra work.

The best feature for me is ownership: you can connect your own S3 bucket or Google Drive, or just keep everything local. No vendor lock-in, no wondering where your recordings live. And since it's fully open source (19k+ stars on GitHub), you can even self-host the whole thing.

If you're recording demos, bug reports, or async updates for your team, this replaces your recorder, editor, and video host in one go. [Try Cap for free](https://go.cap.so/vivian-guillen?ref=tailwindweekly.com) — no credit card needed.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/2026/06/image-5.png)

### [How to Use Lazy Loading Without Hurting Web Performance](https://www.debugbear.com/blog/lazy-loading-performance?utm%5Fcampaign=tailwind-weekly-219&utm%5Fsource=Tailwind+Weekly)

Lazy loading is one of those “always do it” performance tips that sounds great until it quietly makes your site worse, and this guide does a really good job of explaining why. It breaks down what lazy loading actually does (and what it *doesn’t*), when it’s a win (think below-the-fold images and heavy embeds), and the common ways people shoot themselves in the foot by lazy loading the wrong things—especially anything that affects LCP, plus the knock-on effects like layout shifts (CLS) and sluggish interactions (INP). I also liked that it doesn’t just warn you, it gives a practical checklist and a clear lazy vs eager mental model so you can make better decisions than “lazy load everything and hope for the best.”

### [::search-text](https://css-tricks.com/almanac/pseudo-selectors/s/search-text/?ref=tailwindweekly.com)

This guide introduces the new CSS `::search-text` pseudo-element, which lets you style “find in page” matches (and even the currently focused match via `:current`) using regular CSS, so you can make the highlight fit your site’s theme instead of fighting it. It also covers the practical stuff you’d want to know before getting excited: where you can apply it (globally or scoped to elements), which CSS properties are actually supported (it’s a limited set), how custom properties work with it, and a neat bit about how the highlight styles inherit through descendants so you don’t get surprising inconsistencies. 

### [How to Evaluate an npm Package - 2026 Edition](https://blog.gaborkoos.com/posts/2026-05-29-How-to-Evaluate-an-npm-Package-2026-Edition/?ref=tailwindweekly.com)

If you’ve ever picked an npm package by glancing at GitHub stars and weekly downloads, this article is basically the antidote. It makes the (slightly uncomfortable) point that every `npm install` is you letting a stranger’s code run with whatever access your app has, then walks you through a repeatable 5–10 minute checklist to judge whether a dependency is worth that trust. It covers the usual supply-chain horror stories (compromised maintainers, typosquats, sketchy transitive deps) but also a newer one that’s very relevant right now: “slopsquatting,” where AI assistants hallucinate package names and attackers register them. The practical value here is that it tells you exactly what to look for beyond “seems popular”: maintenance signals, suspicious install scripts, whether the published npm tarball can be tied back to a real repo commit via provenance/trusted publishing, and whether the CI setup is actually meaningful or just a pretty badge. 

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/2026/06/image-4.png)

### [**Brew**](https://brew.new/?ref=tailwindweekly.com)

Brew is an AI-native email marketing platform that generates on-brand emails from natural language prompts. It learns your palette, typography, and voice up front, then lets you draft via chat and edit any block directly on a canvas — campaigns and automations side by side. The site itself is super polished, with playful interactive sections and a slick infinite template canvas that's worth a scroll. 

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/2026/06/image-3.png)

### [**Curlwind**](https://curlwind.com/?ref=tailwindweekly.com)

Curlwind is basically “no-build Tailwind” without shipping the entire framework. You drop a stylesheet link in your `<head>` and then request a generated CSS file by passing the classes you actually use via a query parameter (wildcards and variants included), so you end up with a stylesheet that contains only the utilities you need. The generated stylesheets are cached indefinitely which should keep things snappy, and there are a bunch of nice toggles like disabling Preflight, adding a prefix, outputting unminified CSS, and enabling Tailwind plugins. Definitely worth a look if you like Tailwind but don’t want to set up a build pipeline for smaller sites or quick prototypes.

## **👌 Cool Stuff**

[**PikaPods**](https://www.pikapods.com/?ref=tailwindweekly.com) – Run open source apps like Immich, n8n, or Umami with zero sysadmin work — fully managed, private, from $1.20/month.

---

[**Obs.js**](https://github.com/h5bp/obs.js?ref=tailwindweekly.com) – Detects network/device signals and exposes `.has-*` CSS classes + `window.obs` to adapt delivery accordingly.

---

[**SnapHTML**](https://api.snhtml.com/?ref=tailwindweekly.com) – API to render HTML, URLs, or templates in a real browser and return PDFs or images as binary.

---

[**State of Web Dev AI 2026**](https://2026.stateofai.dev/en-US?ref=tailwindweekly.com) – Key survey trends from 7,258 devs on AI adoption, spend, models, and risks.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #217: Owl Selectors, JavaScript Deep Cuts, and Gradient Hover Magic ✨
URL: https://tailwindweekly.com/issue-217/
Last updated: 2026-06-12T22:54:12.000Z
Hello folks!

Pretty quiet week on the official front but we still got stuff for you guys. We're digging into the cryptic-but-handy CSS owl selector, a battle-tested roadmap of 33 JavaScript concepts worth knowing, and a slick gradient hover effect you'll want to steal. 

Let's dive in 👇

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/06/image-1.png)](https://go.cap.so/vivian-guillen?ref=tailwindweekly.com)

**I've tried pretty much every screen recording tool out there, and Cap is the one that finally stuck.**

[**Cap**](https://go.cap.so/vivian-guillen?ref=tailwindweekly.com) is an open source alternative to Loom that bundles three modes in one app: Instant for quick record-and-share (your video uploads *while* you record, so the link is ready the second you stop), Studio for polished recordings, and a Screenshot mode. The AI touches are genuinely useful too like auto-generated titles, summaries, chapters, and transcripts without any extra work.

The best feature for me is ownership: you can connect your own S3 bucket or Google Drive, or just keep everything local. No vendor lock-in, no wondering where your recordings live. And since it's fully open source (19k+ stars on GitHub), you can even self-host the whole thing.

If you're recording demos, bug reports, or async updates for your team, this replaces your recorder, editor, and video host in one go. [Try Cap for free](https://go.cap.so/vivian-guillen?ref=tailwindweekly.com) — no credit card needed.

## **📚 Learning**

### [What is CSS Owl Selector (\* + \*)?](https://www.youtube.com/watch?v=0O0ssm70g1g&ref=tailwindweekly.com)

The owl selector (`* + *`) looks cryptic but it's a handy pattern: it targets every element that has a previous sibling, basically "everything except the first one" and great for adding margins between items without touching the first. The big advantage is specificity, since the universal selector adds none, making it easy to override later. Zoran also covers the alternatives like `:not(:first-child)` (same result but adds specificity) and using `gap` in Flexbox instead of margins on menu items. 

### [33 JavaScript Concepts](https://33jsconcepts.com/?ref=tailwindweekly.com)

If you’ve ever felt like you can write JavaScript but don’t always *understand* why it behaves the way it does, this guide is basically a roadmap to fixing that. It’s a curated list of 33 core concepts that everything else builds on, closures, async, scope, the event loop, all the stuff that tends to show up when you’re debugging something weird or prepping for interviews. The nice part is you don’t have to read it top-to-bottom like a book; you can start from scratch or jump straight to the topic that’s currently tripping you up, and each page comes with explanations, code samples, and pointers to go deeper. It’s also been refined by a lot of contributors over time, so it feels more like a battle-tested reference than a random blog post.

### [Gradients, Blend Modes, And A Really Cool Hover Effect](https://www.smashingmagazine.com/2023/09/gradients-blend-modes-hover-effect?ref=tailwindweekly.com)

Gradients are usually the “make it look nice” part of CSS, but this article shows a pretty clever interaction pattern: hovering one item creates a gradient overlay that subtly changes the look of the other items around it, kind of like a more dynamic, contextual version of a box-shadow hover. It breaks down the whole effect step-by-step (with a small, simple HTML structure) and then gets into the real meat: using sibling selectors plus `:nth-of-type()` “recipes” and CSS variables to control the gradient stops so the hovered element gets the strongest emphasis while everything else fades in a smooth ramp. It also calls out an important UX caveat—don’t rely on color alone for hover feedback—but if you want a practical, copyable technique for building richer hover states with just CSS, you’ll get a lot out of this.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/05/screenshot-1440x900-1779882871190.webp)](https://rybbit.com/?ref=tailwindweekly.com)

### [Rybbit](https://rybbit.com/?ref=tailwindweekly.com)

Rybbit is a privacy-first, open-source analytics platform that gives web developers powerful insights like real-time tracking, session replay, funnels, journeys, Core Web Vitals, and custom events, without the usual complexity. Drop in a single line of code to get clean, cookie-free data with built-in bot blocking and GDPR/CCPA-friendly defaults, then extend it via full API access and raw data export with no lock-in. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/05/og-image-1779882845048.webp)](https://animata.design/?ref=tailwindweekly.com)

### [animata](https://animata.design/?ref=tailwindweekly.com)

animata is a collection of 158+ animated React components you can copy straight into your project. It's MIT licensed, works with pretty much any framework (Next.js, Remix, Vite, Astro, you name it), and they recently shipped a shadcn registry so adding components is even quicker now. 

## **👌 Cool Stuff**

[**Sponsonizer**](https://sponsonizer.com/?ref=tailwindweekly.com) – Like Calendly for newsletter ad slots. Sponsors pick a date, pay, and you collect the creative—no spreadsheets, no DMs, no 30% middleman.

---

[**Lumnea**](https://trylumnea.com/?ref=tailwindweekly.com) – A bite-sized learning app with AI summaries, flashcards, and audio sessions to pick up new concepts in minutes.

---

[**SnippetsLab**](https://www.renfei.org/snippets-lab/?ref=tailwindweekly.com) – A snippet manager and notes app for devs with syntax highlighting, Markdown preview, fuzzy search, and iCloud sync.

---

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #216: Shared Storage API, CSS Flower Shapes, and a Practical ARIA Roles Guide 🌸!
URL: https://tailwindweekly.com/issue-216/
Last updated: 2026-05-23T12:00:07.000Z
Hello folks!

No major news to report this week, but there's still plenty of good stuff to dig into. This issue we've got a primer on Google's new Shared Storage API, a fun deep-dive into making flower shapes with `clip-path: shape()`, and a genuinely practical guide to ARIA roles (yes, the "stop putting `role="button"` on divs" kind 🙈).

Quick note: I'm currently taking sponsorships for the newsletter—if you'd like to get your product in front of the Tailwind community, you can grab a slot [**here**](https://sponsonizer.com/tailwind-weekly?ref=tailwindweekly.com). 

Let's dive in 👇

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com#cta)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#cta) and receive a tailored quote within 24 hours.

## **📚 Learning**

### [What is the Shared Storage API?](https://www.youtube.com/watch?v=X52kDDacvkw&ref=tailwindweekly.com)

Cross-site data without the tracking baggage is a tricky problem, and it's exactly what Google's new Shared Storage API tackles. In this video, Tara from the Privacy Sandbox team explains why partitioned storage (local storage, IndexedDB) makes legitimate cross-site use cases hard, and how Shared Storage lets you store unpartitioned data that's only readable inside secure worklets. She also covers the two "output APIs"—Select URL for picking content like ad creatives or A/B variants, and Private Aggregation for building noised, privacy-safe histograms. A solid primer if you're doing anything ads- or analytics-adjacent and want to get ahead of the post-third-party-cookie world.

### [Creating Flower Shapes using clip-path: shape()](https://frontendmasters.com/blog/creating-flower-shapes-using-clip-path-shape/?ref=tailwindweekly.com)

The author introduces the new `shape()` function (think “SVG path power, but in CSS”) and focuses on just one command—`arc`—to build surprisingly complex curves, like flower-shaped frames you can apply to a single element (even an image). The author keeps it practical: you’ll see why `shape()` exists, how arc direction/size changes the final cutout (including the “why is it inverted?” moment), and how to generate the points with a simple Sass loop instead of hand-authoring coordinates. There’s a tiny bit of geometry, but it’s mostly in service of “here’s how you get cool shapes reliably,” plus a neat trick where you can intentionally give a “wrong” radius and let the browser resolve it for you.

### [ARIA Roles Explained: A Practical Guide for Web Developers](https://www.levelaccess.com/blog/aria-roles-explained-a-practical-guide-for-web-developers/?ref=tailwindweekly.com)

If ARIA roles have always felt a bit fuzzy (or you’ve been sprinkling `role="button"` on divs and hoping for the best), this article clears things up in a very practical way. It explains what roles actually do, how browsers expose them through the accessibility tree, and, most importantly, when you should *not* use ARIA because native HTML already gives you the right semantics for free. It also breaks down roles vs. states vs. properties, walks through the main role categories (landmarks, widgets, live regions, dialogs, etc.), and calls out the common mistakes that can quietly make accessibility worse instead of better. By the end you’ll have a much better “use ARIA as a last resort” mental model and a checklist-y sense of what to test with real screen readers before shipping anything.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/05/screenshot-1366x768-1779512432017.webp)](https://shapecalendar.com/?ref=tailwindweekly.com)

### [Shape Calendar](https://shapecalendar.com/?ref=tailwindweekly.com)

Shape is a developer-friendly training planner that turns plain-English workout specs into structured sessions, syncs them to Garmin/Apple Watch/Wahoo and your calendar, and visualizes training load so you can spot overtraining early. Built for the AI era, it keeps your data portable with exports plus API access (and an MCP server) so you can plug training into agents, automations, or your own tooling with no lock-in. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/05/image-2.png)](https://railsui.com/?ref=tailwindweekly.com)

### [Rails UI](https://railsui.com/?ref=tailwindweekly.com)

If you've ever shipped a Rails app that worked great but looked a little rough, this one's for you. Rails UI goes beyond buttons and cards, it ships complete app themes with auth flows, dashboards, and email templates, all wired for Rails with ERB, Stimulus, and Hotwire. The 200+ components are free to browse, and full access ($299/yr) unlocks 9+ niche themes covering everything from CRM to personal finance. 

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

[**OpenFlowKit**](https://openflowkit.com/?ref=tailwindweekly.com) – A free, open-source diagram studio for devs that turns code into living architecture diagrams with AI and drag & drop.

---

[**Stage**](https://stagereview.app/?ref=tailwindweekly.com) – A code review platform that breaks every pull request into structured chapters, surfacing intent, risk, and the diffs that actually matter.

---

[**Locker**](https://locker.dev/?ref=tailwindweekly.com) – A self-hosted Dropbox alternative with multi-store (S3/R2/Blob/local), search-in-PDFs/images, and tRPC API.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #215: Tailwind v4.2 + v4.3 blogpost, safe-area-inset for mobile, and SVG accessibility basics 🚀
URL: https://tailwindweekly.com/issue-215/
Last updated: 2026-05-16T12:00:20.000Z
Hello folks!

This week we've got a juicy two-for-one from the Tailwind Labs team with the official v4.2 + v4.3 blog post, plus a handy Maizzle update for inline code highlighting. 

Let's dive in 👇

## **🌟 News**

[![](https://tailwindweekly.com/content/images/2026/05/og.png)](https://tailwindcss.com/blog/tailwindcss-v4-3?ref=tailwindweekly.com)

### [Tailwind CSS v4.3: Scrollbars, new colors, and more](https://tailwindcss.com/blog/tailwindcss-v4-3?ref=tailwindweekly.com)

I jumped the gun last week and shared this from the GitHub releases, but the Tailwind Labs team finally dropped the official blog post and it's actually a two-for-one, catching us up on v4.2 as well since they forgot to write about that one.

The v4.2 goodies include four new neutral-ish palettes (mauve, olive, mist, and taupe), a dedicated webpack plugin that's 2x faster than the PostCSS route, new logical property utilities for block-start/block-end spacing, sizing, and insets, plus a `font-features-*` escape hatch for OpenType features. In v4.3, you get first-party scrollbar utilities, a new `@container-size` for size-based container queries, `zoom-*` and `tab-*` utilities, stacked and compound `@variant` support in CSS, and default values for functional `@utility` definitions.

Plenty of examples in the post so worth a read even if you've already updated.

![](https://tailwindweekly.com/content/images/2026/05/image-1-1-1.png)

### [Inline code snippets in Maizzle emails now get Shiki highlighting](https://x.com/cossssmin/status/2054636868373729738?ref=tailwindweekly.com)

Cosmin Popovici shipped a nice update to Maizzle's inline code component — inline snippets in your emails now get Shiki syntax highlighting, just like the block-level ones. A small but handy improvement if you're sending dev-focused newsletters or technical content where inline `code` shows up a lot.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com#cta)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#cta) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/05/og-image.png)](https://piccalil.li/blog/programming-principles-for-self-taught-front-end-developers/?ref=tailwindweekly.com)

### [Programming principles for self taught front-end developers](https://piccalil.li/blog/programming-principles-for-self-taught-front-end-developers/?ref=tailwindweekly.com)

If you came into front-end without a CS degree, you've probably been hit with phrases like "premature optimisation is the root of all evil", YAGNI, or DRY without anyone actually telling you how to apply them while you're writing code. This article tackles exactly that gap, translating the vague "laws" into actionable habits like the rule of three (don't refactor until you've written the same thing three times), "make it work, make it right, make it fast", idempotency, the single responsibility principle, and keeping each function at one level of abstraction. Definitely worth a read if you want practical principles you can apply as you code, not just quote in code reviews.

### [Using safe-area-inset to build mobile-safe layouts](https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/?ref=tailwindweekly.com)

If you’ve ever shipped a mobile layout that looked perfect on desktop and in responsive mode, only to discover your floating button or bottom nav is sitting behind the home indicator on a real iPhone, this is the article that explains why. It breaks down what “safe areas” actually are, how the browser exposes them via `env(safe-area-inset-*)`, and how to opt into true edge-to-edge layouts with `viewport-fit=cover` without letting important UI get hidden under notches, dynamic islands, or gesture bars. It also covers practical details people often miss (like adding your own spacing on top of the inset with `calc()`, when you do/don’t need fallbacks, and why these bugs are easy to miss in Chrome’s responsive view), plus a quick look at the newer `safe-area-max-inset-` and when a “stable” reserved zone is better than following the live viewport.

### [SVG Optimization and Accessibility Basics](https://dbushell.com/2025/06/25/svg-optimization-and-accessibility-basics/?ref=tailwindweekly.com)

SVGs are everywhere on the web now, but most of us still wing it when it comes to optimizing them and making them accessible. This article walks through both, starting with the recent SVGO v4 release (which finally stops stripping `viewBox` and `<title>` by default 🙌) and then digging into the accessibility patterns you actually need: when to use `<title>`, `aria-label`, `aria-labelledby`, `role="img"`, `role="presentation"`, and `aria-hidden`, with clear examples of what each does to the accessibility tree. There's also a great reminder to pair icons with visible text labels instead of relying on screen reader descriptions for abstract shapes. A solid reference to bookmark next time you're inlining SVG.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/05/screenshot-1440x900-1778892435399.webp)](https://www.raspberrypi.com/?ref=tailwindweekly.com)

### [Raspberry Pi](https://www.raspberrypi.com/?ref=tailwindweekly.com)

Raspberry Pi is the official site for the iconic small, affordable computers and microcontrollers used by makers, businesses, and educators worldwide. The site is the hub for browsing their full lineup (from the new Compute Module 5 to the RP2350 microcontroller at just $0.80), reading the latest news from the Pi community, accessing documentation, and finding resources for both home and industrial use. 

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/2026/05/screenshot-1366x768-1778892520471.webp)

### [Gradient Border Plugin](https://gradient-border.floriankiem.com/?ref=tailwindweekly.com)

If you've ever tried to add a gradient border in CSS you know it's not as straightforward as it should be. This tiny Tailwind plugin solves that with a `gradient-border` utility (plus width, direction, and color stop variants) that mirrors Tailwind's native gradient API. It uses `mask-composite` under the hood so the gradient flows around the entire perimeter and respects whatever `border-radius` you've got. You even get an `animate-gradient-border` variant for rotating AI/thinking states. Built for Tailwind v4, pure CSS, no JS.

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

[**screenurl**](https://screenurl.com/?ref=tailwindweekly.com) – Turn any URL into pixel-perfect screenshots via one REST API, with full-page capture, delays, and PNG/JPEG output.

---

[**Crashcat**](https://crashcat.dev/?ref=tailwindweekly.com) – A JavaScript 3D rigid body physics engine to simulate collisions, constraints, and motion in real-time.

---

[**Cap**](https://capjs.js.org/?ref=tailwindweekly.com) – A self-hosted, privacy-first CAPTCHA with no puzzles or telemetry, \~20kb widget, zero deps, and easy reCAPTCHA migration.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #214: v4.3 New Utilities, Maizzle 6 Updates, and Blend Mode Magic 🎨
URL: https://tailwindweekly.com/issue-214/
Last updated: 2026-05-09T17:41:02.000Z
Hello folks!

Great week in Tailwind Land! v4.3 just dropped with a pile of new utilities, ui.sh is getting smarter with dark mode, and Maizzle 6 keeps rolling out nice RC updates. Plus some really good learning articles on blend modes, critical CSS, and making your site LLM-friendly. 

Let's dive in 👇

## **🌟 News**

![](https://tailwindweekly.com/content/images/2026/05/HH0WpoIXIAMuoST.jpeg)

![](https://tailwindweekly.com/content/images/2026/05/HH0WqjWXYAUpJF7.jpeg)

### ui.sh gets smarter dark mode 🌙

The Tailwind Labs team [has been improving](https://x.com/reinink/status/2052823249042506224?ref=tailwindweekly.com) ui.sh's dark mode skills this week to take advantage of ChatGPT's new image model, which can automatically generate dark mode versions of rasterized images like decorative background graphics. Pretty wild that this kind of thing is now possible!

### Tailwind CSS v4.3 is out 🎉

Tailwind CSS v4.3 [just dropped](https://github.com/tailwindlabs/tailwindcss/releases?ref=tailwindweekly.com) and it's packed with new utilities! You get `@container-size` for setting container sizes, a whole set of scrollbar utilities (`scrollbar-thin`, `scrollbar-thumb-*`, `scrollbar-track-*`, `scrollbar-gutter-*`), plus new `zoom-*` and `tab-*` utilities. `@variant` now supports stacked and compound variants too. There's also a solid list of fixes around canonicalization and Vite/PostCSS path resolution. 

### Maizzle 6 RC updates keep coming 📬

Maizzle 6 (Tailwind CSS for email) [keeps rolling out RCs](https://github.com/maizzle/framework/releases?ref=tailwindweekly.com) and the latest ones are packed! RC.18 makes CSS inlining and purging on by default (finally), renames `<Divider>` to `<Hr>`, and adds handy new composables like `useTransformers()`, `useBaseUrl()`, and `useUrlQuery()` for per-template control. You also get layouts for Markdown templates, a `<Tailwind>` component for easier React Email migration, and a `<Font>` component to pull in webfonts from Google or Bunny Fonts. Plenty more in there — worth a look if you're doing email dev!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/04/social-card.png)](https://lookaway.com/?via=vivian&ref=tailwindweekly.com)

**Deep work sessions are great until you realize you've been hunched over your keyboard for 4 hours straight, haven't blinked properly, and your neck is screaming.**

LookAway is a native Mac app that nudges you to rest your eyes, fix your posture, and actually breathe, without killing your flow. It waits for natural breakpoints to interrupt you, auto-pauses during meetings, screen recordings, and gaming, and syncs breaks to your iPhone so you don't just swap one screen for another. 

[**Try LookAway for Mac**](https://lookaway.com/?via=vivian&ref=tailwindweekly.com)**. *$19 for lifetime access.***

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/05/opengraph-image-1wdqp3.png)](https://nik.digital/posts/compositing-blending?ref=tailwindweekly.com)

### [Compositing & Blending](https://nik.digital/posts/compositing-blending?ref=tailwindweekly.com)

If you’ve ever used `mix-blend-mode` and thought “this looks cool, but I have no idea what’s actually happening,” this article is the missing mental model. It breaks down (in a surprisingly approachable way) how your browser builds the final pixels you see by first *compositing* layers and then *blending* colors in the overlap, and it explains why some blend modes feel intuitive (lighten/darken) while others feel like black magic (difference, hue, luminosity). The really valuable part is that it doesn’t stop at definitions, it helps you reason about what a blend mode will do, calls out the real-world footguns (like blend results changing depending on your display color space and browser), and shows where this stuff is genuinely useful in CSS (text on images, duotone effects, weird border/outline tricks) without turning into a pure math lecture.

### [Inlining Critical CSS: Does It Make Your Website Faster?](https://www.debugbear.com/blog/critical-css?ref=tailwindweekly.com)

Inlining critical CSS can make a site feel insanely fast, and this article does a great job explaining why: CSS is render-blocking, so even if your HTML shows up quickly the user can still be staring at a blank page until the stylesheet arrives. It breaks down what “critical CSS” actually means (mostly above-the-fold layout, header/nav, first sections, any sticky bits) and why embedding those rules directly in the HTML can kickstart rendering immediately, especially if you’re also deferring JS. 

### [Making your site visible to LLMs: 6 techniques that work, 8 that don't](https://evilmartians.com/chronicles/how-to-make-your-website-visible-to-llms?ref=tailwindweekly.com)

With AI tools becoming a real discovery channel, the Evil Martians team put together a super practical guide on what actually moves the needle for LLM visibility. They go through the 6 techniques worth your time (llms.txt, serving .md routes, `<link rel="alternate">` tags, HTTP Link headers, content negotiation, and a clever visually-hidden hint div) and, just as useful, the 8 popular "AI SEO" tricks that are basically snake oil. What I really appreciated is they're upfront about what's proven vs. what's a bet on the future, with actual data and code snippets you can drop into your stack. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/05/screenshot-1440x900-1778347028093.webp)](https://www.featurebase.app/?ref=tailwindweekly.com)

### [Featurebase](https://www.featurebase.app/?ref=tailwindweekly.com)

Featurebase is an AI-native support and product feedback hub that lets web developers consolidate every customer conversation into one fast, scalable inbox, then ship smarter with centralized feedback, changelogs, and self-serve documentation. Built for scale and security, Featurebase supports millions of end-users with sub-150ms latency so your support and product workflows don’t become your bottleneck.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/05/tailwind.png)](https://hub.joyco.studio/toolbox/tailwind?ref=tailwindweekly.com)

### [Tailwind Toolbox](https://hub.joyco.studio/toolbox/tailwind?ref=tailwindweekly.com)

This is a pretty handy little “toolbox” write-up if you’re using Tailwind and keep running into the same styling edge cases. It’s basically a collection of small, composable patterns like a `hocus` variant that merges hover + focus-visible, a clean way to configure per-font-size line-height via theme variables, and the `in-` *variant for styling something based on an ancestor state (great for drawers/overlays). It also shows how to create pointer-specific variants for mouse vs touch, and the best part: using `matchVariant` to build a `slot-`* variant so you can style slotted children via `data-slot` from the parent class without ugly nested selectors. Overall, you’ll walk away with a few “oh nice, that’s cleaner” tricks you can drop into your setup immediately.

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

[**1Panel**](https://1panel.pro/?ref=tailwindweekly.com) – A modern open-source VPS control panel to manage Docker, sites, and local LLMs, with monitoring, backups, and SSL.

---

[**Unraid**](https://unraid.net/?ref=tailwindweekly.com) – An easy-to-use OS for self-hosted servers and NAS, letting you mix drives, run apps, and scale storage.

---

[**Nota**](https://nota.md/?ref=tailwindweekly.com) – A fast plain-text Markdown notes app with wiki links, smart editing, and full data ownership (no accounts or lock-in).

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #213: v4.2 patch releases, Intl API deep dive, and a smarter way to build skeletons 🦴
URL: https://tailwindweekly.com/issue-213/
Last updated: 2026-05-02T14:36:03.000Z
Hello folks!

Two fresh Tailwind CSS patches landed in the past couple of weeks, ui.sh early access keeps rolling out with some pretty wild results, and we've got a stellar deep dive on the Intl API that'll probably let you delete a dependency or two from your project.

Now, onto the issue 👇🏻

## **🌟 News**

### ui.sh is picking up steam

The tea has been rolling out to early access folks more and more, and the reactions are pouring in. [Dott](https://x.com/DottChen/status/2048733210096611539?ref=tailwindweekly.com) shared that he built a full landing page in about 3 hours that would normally take him a full day, with images and prototypes generated by Codex and most of the design details automatically figured out. 

On top of that, Adam's been showing off some seriously impressive brand concept generations using gpt-image-2, [hinting](https://x.com/adamwathan/status/2047112052213203034/photo/1?ref=tailwindweekly.com) at what they're planning to build on top of it. Still waitlisted? Hang tight, more invites are going out.

### Tailwind CSS v4.2.3 and v4.2.4 [are out](https://github.com/tailwindlabs/tailwindcss/releases?ref=tailwindweekly.com)

Two new patch releases dropped over the past couple of weeks. v4.2.4 is a tiny one that fixes `@import` and `@plugin` resolution with Vite aliases. v4.2.3 is the bigger one, packed with canonicalization improvements for the upgrade tool — collapsing things like `px-[1.2rem] py-[1.2rem]` into `p-[1.2rem]`, merging `border-{t,b}-*` into `border-y-*`, and migrating `start-*`/`end-*` into the new logical `inset-s-*`/`inset-e-*` utilities, plus a few nice quality-of-life wins for the v3 → v4 migration.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com#cta)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#cta) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/05/the-intl-api-the-best-browser-api-youre-not-using.png)](https://polypane.app/blog/the-intl-api-the-best-browser-api-youre-not-using/?ref=tailwindweekly.com)

### [The Intl API: The best browser API you're not using](https://polypane.app/blog/the-intl-api-the-best-browser-api-youre-not-using/?ref=tailwindweekly.com)

Chances are you’ve reached for Moment.js, date-fns, Luxon, or numeral.js when you needed to format a date, number, or currency, but this article makes a really strong case for using the browser’s built-in `Intl` APIs instead: 0 kB added to your bundle, no parsing cost, and it automatically formats things in a way that matches the user’s locale (which matters *a lot* more than people think, even if your UI is “only in English”). It walks you through what `Intl` is actually for (formatting, not calculations), the reusable “create a formatter once, use it everywhere” pattern, and then covers the practical pieces you’ll keep bumping into in real apps—`Intl.DateTimeFormat`, `Intl.NumberFormat` (including currencies and units), `Intl.RelativeTimeFormat`, plus some underused gems like `Intl.ListFormat`, `Intl.PluralRules`, `Intl.Segmenter`, and `Intl.Collator` for human-friendly lists, plurals, word/character segmentation, and correct locale-aware sorting. If you’ve got any UI that shows dates, prices, “x days ago”, lists, or sorted names/files, you’ll walk away with fewer dependencies, fewer subtle formatting bugs, and a bunch of copy/pasteable patterns.

### [SVG Filters Guide: Getting Started with the Basics](https://frontendmasters.com/blog/svg-filters-guide-getting-started-with-the-basics/?ref=tailwindweekly.com)

A great little deep dive into how you can get those “SVG-like” visual effects (smooth shapes, blends, masks, that sort of thing) without necessarily reaching for an actual SVG every time. It walks through what’s possible with modern CSS, where the limits are compared to true vector graphics, and the kinds of scenarios where this approach is a win (lighter markup, easier theming, fewer assets to wrangle). 

### [4 Reasons That Make Tailwind Great for Building Layouts](https://css-tricks.com/4-reasons-that-make-tailwind-great-for-building-layouts/?ref=tailwindweekly.com)

Zell Liew argues that Tailwind shines for layout work because the “mental model” stays close to the HTML, you don’t have to invent vague class names like `two-columns`, and you can tweak things like gaps, column spans, and `max-width` per-context without creating a pile of modifier classes. The most interesting bit is a clever approach that uses CSS variables alongside small Tailwind-y utilities so the layout reads almost like a diagram (cols and spans become instantly obvious), plus a practical discussion of why seemingly nice grid values like `2fr 1fr` don’t always map to “three columns” the way you think because of how `fr` interacts with gaps. Overall, it’s less “here are Tailwind classes” and more “here’s how to use Tailwind and CSS together so your layouts stay readable, flexible, and easy to change responsively.”

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/05/screenshot-1366x768-1777681655921.webp)](https://americanart.si.edu/?ref=tailwindweekly.com)

### [Smithsonian American Art Museum and Renwick Gallery](https://americanart.si.edu/?ref=tailwindweekly.com)

Smithsonian American Art Museum is the official site for SAAM and the Renwick Gallery, featuring current exhibitions, events, and stories from their collection. The layout does a nice job balancing big imagery with dense info, exhibitions, tour dates, featured events, and new acquisitions all coexist without feeling cluttered. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/05/screenshot-1366x768-1777681629667.webp)](https://boneyard.vercel.app/overview?ref=tailwindweekly.com)

### [Boneyard](https://boneyard.vercel.app/overview?ref=tailwindweekly.com)

Skeleton screens are usually a pain to build and maintain, you hand-craft placeholder divs that approximate your layout and they go stale the moment you change anything. Boneyard takes a different approach: you wrap your component in `<Skeleton>`, run the CLI once, and it snapshots your real rendered DOM to generate pixel-perfect "bones" as static JSON. It auto-detects your Tailwind breakpoints, supports React, Preact, Vue, Svelte, Angular and React Native, and the runtime is only \~7.5KB. 

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

[**fakecloud**](https://github.com/faiscadev/fakecloud?ref=tailwindweekly.com) – Local AWS emulator for integration tests using real SDK/CLI/IaC, plus test SDKs for assertions.

---

[**PanicLock**](https://paniclock.github.io/?ref=tailwindweekly.com) – A macOS menu bar panic button to instantly lock your Mac and disable Touch ID until password unlock.

---

[**Port Menu**](https://www.portmenu.dev/?ref=tailwindweekly.com) – A macOS menu bar app to track your local dev servers across projects, with quick access to running URLs.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #212: Maizzle 6 beta is here, JavaScript in 2026, and breakpoint mistakes to avoid 🔥
URL: https://tailwindweekly.com/issue-212/
Last updated: 2026-04-18T12:00:38.000Z
Hello folks!

No major news from the Tailwind Labs team, but the [creator](https://x.com/cossssmin?ref=tailwindweekly.com) of Maizzle has been working on v6 like a madman for the last few weeks! I use Maizzle on a few projects, and I can't wait to upgrade once the stable release is out. 

Now, onto the issue 👇🏻

## **🌟 News**

![](https://tailwindweekly.com/content/images/2026/04/image-2.png)

[Maizzle 6 beta](https://github.com/maizzle/framework/releases?ref=tailwindweekly.com) just dropped and it's a full-on rewrite of the framework you use to build HTML emails with Tailwind CSS. We're talking Vite for the build system and dev server, Vue templating with SFCs (so much better DX, and bonus: LLMs will handle it way better too), Tailwind CSS 4 support, and a revamped dev UI that even lets you send actual test emails right from the browser.

The coolest part? You can now use Maizzle as a Vite plugin in your existing projects, and it even auto-configures itself if you're running it inside a Laravel app. There's also a bunch of new built-in components like `<Html>`, `<Container>`, `<Row>`, `<Column>`, `<Image>` (with dark mode swapping!), `<Heading>`, `<Text>`, and `<Markdown>`. Heads up though, it's not backwards-compatible, so spin up a fresh project with `npx maizzle new` and pick the "Maizzle 6 (beta)" starter to play with it. Cosmin's been shipping RCs daily so expect things to keep getting polished fast!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/04/image-1.png)](https://gumroad.com/a/150955123/sbcrk?ref=tailwindweekly.com)

**AI can write Tailwind faster than you can, but only if you know enough to catch it when it's wrong**. Shruti Balasa's "Level up with Tailwind CSS" is the book to get you there.

It fills in the gaps most devs don't realize they have: arbitrary values and variants, the full modifier system, `@apply` and `@variant`, custom theme config, plus a bunch of hidden gems that rarely make it into tutorials. Exactly the kind of knowledge that turns "why is the AI doing this?" into a two-second fix.

[**You can grab the eBook on its own ($33) or bundle it with the video course ($59).**](https://gumroad.com/a/150955123/sbcrk?ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/04/image.png)](https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/?ref=tailwindweekly.com)

### [What To Know in JavaScript (2026 Edition)](https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/?ref=tailwindweekly.com)

If you've been too deep in CSS land lately (guilty 🙈), Chris Coyier put together a massive state-of-JS roundup that'll get you caught up fast. It covers everything new in ES2025 (iterator helpers, set methods, `RegExp.escape()`, import attributes) and what's landing in ES2026 like the Temporal API, explicit resource management with `using`, and `Error.isError()`. But it goes way beyond the language itself. there's solid commentary on the React/Vue/Svelte ecosystems, the Node vs Bun vs Deno runtime scene (including Anthropic's Bun acquisition), Vite v8's shift to Rolldown, TypeScript v6 prepping for the Go-based v7 compiler, and the wild npm supply chain disasters from last year. 

### [Your options for preloading images with JavaScript](https://macarthur.me/posts/preloading-images/?ref=tailwindweekly.com)

Turns out there are 5 different ways to preload an image in JavaScript, each with their own quirks: `new Image()`, `<link rel="preload" />`, a hidden `<div>` with a background image, the Cache API, and plain old `fetch()`. Alex MacArthur walks through each one with real examples, explains when caching headers like `no-store` can break your assumptions, and shares why `<link rel="preload" />` ended up being his pick (spoiler: it bypasses the HTTP cache entirely and uses a dedicated preload cache). A really handy reference to bookmark for the next time you need to preload something and want to pick the right tool for the job.

### [The Too Early Breakpoint](https://ishadeed.com/article/too-early-breakpoint/?ref=tailwindweekly.com)

You know that feeling when you resize a browser window and the layout suddenly collapses into its mobile version way before it needed to? Ahmad Shadeed calls this the "*too early breakpoint*" and he makes a really solid case for why it's a problem. He breaks down real examples from Time.com and TechCrunch where the hero sections switch to full-width mobile layouts while there's still plenty of horizontal space to work with, making the design look awkward and unfinished. He also covers all the edge cases where this matters: resizing browsers to multitask, split-screen views, tablets, and even iOS link previews. His advice is practical: add more breakpoints in between, design with container queries in mind, and lean on Grid and Flex to make layouts dynamic at their core. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/04/screenshot-1366x768-1776480661900.webp)](https://there-there.app/?ref=tailwindweekly.com)

### [ThereThere](https://there-there.app/?ref=tailwindweekly.com)

There There is a new AI-powered helpdesk built by the team behind Spatie (yes, the folks that built Flare, Mailcoach and Ray). Instead of bolting AI on as an afterthought, every ticket gets vectorized so the AI has full context of your conversations, docs and past tickets when drafting replies. You also get a clean, real-time interface, custom sidebars for customer data, MCP support to pull in context from your own tools, and workflows to automate the repetitive stuff. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/04/screenshot-1366x768-1776480556892.webp)](https://starwind.dev/?ref=tailwindweekly.com)

### [Starwind UI](https://starwind.dev/?ref=tailwindweekly.com)

Starwind UI is built specifically for Astro and comes with 45+ animated, accessible components styled with Tailwind CSS. It's heavily inspired by `shadcn/ui`, so you get that same seamless CLI experience, just run `npx starwind@latest init` and start dropping components into your project. 

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

[**Zoneless**](https://zoneless.com/?ref=tailwindweekly.com) – An open-source, Stripe-compatible payouts stack for marketplaces, paying sellers globally in USDC with near-zero fees.

---

[**Instagit**](https://instagit.com/?ref=tailwindweekly.com) – Gives AI agents instant read access to any GitHub repo, with exact file paths and line numbers.

---

[**ArkRegex**](https://arktype.io/docs/blog/arkregex?ref=tailwindweekly.com) – A type-safe wrapper for `new RegExp()` that infers capture types, matches native syntax, and adds zero runtime.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #211: Animate Smarter, Fluid Type Done Right, and a Dashboard Design Masterclass 🎨
URL: https://tailwindweekly.com/issue-211/
Last updated: 2026-04-11T12:00:39.000Z
Hello folks!

I hope you guys had a great Easter! As is tradition, I took last week off and had a great time at church. He is risen 🙌!

In the meantime, the ui.sh Discord server has exploded with messages now that the Tailwind team is sending more and more invites and everybody is raving about how incredible the output is. I truly believe this will be a game-changer for UI design for devs. 

Now, onto the issue 👇🏻

## **🌟 News**

Steve Schoger is back with another great video, this time walking through how he designs a dashboard using Claude Code and Wispr Flow. If you caught his first video, you know the drill: he takes an AI-generated dashboard and transforms it into something that actually looks professionally designed. The video is full of practical design tips you can apply right away, and it's a great look at how voice-driven workflows (via Wispr Flow) can speed up the design-to-code process. 

While I know the team is focusing heavily on their [ui.sh](https://ui.sh/?ref=tailwindweekly.com) tool, I really appreciate this content-driven marketing approach they're taking. Yes, they promote it at the end, but the entire video is a masterclass in UI design and would be a paid product in a previous era. 

And speaking of uidotsh, Adam showed a quick demo recently:

> Quick [https://t.co/AIW2moVHHW](https://t.co/AIW2moVHHW?ref=tailwindweekly.com) demo — generating multiple design ideas to choose from, no matter what tech stack you use: [pic.twitter.com/Wd0HwBfVVW](https://t.co/Wd0HwBfVVW?ref=tailwindweekly.com)
> 
> — Adam Wathan (@adamwathan) [April 8, 2026](https://twitter.com/adamwathan/status/2041977909502489060?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.com)

... so I feel a mainstream release is coming soon. In the meantime, the beta users (including me!) are hammering the MCP server 😂

> Hang in there [https://t.co/d4HHe02NhL](https://t.co/d4HHe02NhL?ref=tailwindweekly.com) server! 📈  
>  
> (It's hosted on Laravel Forge, and holding up well!) [pic.twitter.com/CqVXiky051](https://t.co/CqVXiky051?ref=tailwindweekly.com)
> 
> — Jonathan Reinink (@reinink) [April 9, 2026](https://twitter.com/reinink/status/2042337831402557759?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.com)

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/04/social-card.png)](https://lookaway.com/?via=vivian&ref=tailwindweekly.com)

**Stop frying your eyes and start taking smarter screen breaks.** LookAway is a native Mac app that gently reminds you to rest your eyes, fix your posture, and actually blink, without killing your deep work session.

It waits for the right moment to nudge you, auto-pauses during meetings, screen recordings, and gaming, and even syncs breaks to your iPhone so you don't just pick up another screen. Customize everything from sounds to backgrounds to motivational messages.

If you spend 8+ hours a day staring at code (hi, that's us 👋), this one is a must-have.

[**Try LookAway for Mac**](https://lookaway.com/?via=vivian&ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/04/65KmMjzVQVCjDt3he45PvCzZWo.png)](https://motion.dev/magazine/web-animation-performance-tier-list?ref=tailwindweekly.com)

### [The Web Animation Performance Tier List](https://motion.dev/magazine/web-animation-performance-tier-list?ref=tailwindweekly.com)

Matt Perry breaks down the browser's render pipeline and ranks every animation technique into a tier list — from S-Tier (compositor thread 😎) to F-Tier (DOM thrashing 😬). You'll learn why `transform` and `opacity` are your best friends, why CSS variables can secretly tank your performance, and how layout animations can be made cheap with the FLIP technique. 

### [New life-like easing in CSS](https://www.youtube.com/watch?v=%5FaO7qN968WQ&ref=tailwindweekly.com)

The `linear()` easing function lets you go way beyond your standard `ease-in`, `ease-out`, or even `cubic-bezier` curves. We're talking bounces, elastic snaps, overshoots, and that classic cartoon-style anticipation before a movement — all natively in CSS. Tools like the Easing Wizard let you visually tweak spring physics, stiffness, and duration, then just copy out the ready-to-use `linear()` function for your `transition-timing-function` or `animation-timing-function`. 

### [Reimagining Fluid Typography](https://www.oddbird.net/2025/02/12/fluid-type/?ref=tailwindweekly.com)

Ever set your browser's font-size preference to something like 24px, only to have websites blow up to 36px because they're already scaling text relative to the default? That's the problem Miriam Suzanne tackles in this article. The core issue is that we've all been doing mental math assuming `1rem == 16px`, and building our fluid type scales on top of that but the moment a user changes their default font size, everything breaks. Her take? Don't set a root font size at all, and if you want responsive type, use something like `clamp(1em, 0.9em + 1vw, 1.5em)` to add slight responsiveness to the *user's* value instead of chasing a pixel target. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/04/screenshot-1440x900-1775881964951.webp)](https://fold.money/?ref=tailwindweekly.com)

### [Fold](https://fold.money/?ref=tailwindweekly.com)

Fold is a personal finance app that connects to your bank accounts and gives you a clear, beautifully designed picture of your spending. It automatically pulls and categorises your transactions so you don't have to manually track expenses (we all know how that goes 😅). It also comes with smart search, cash flow tools, balance trends, and even lets you download bank statements without the usual headache. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/04/getwaves-cover-ac8c651e2f1863b1e8df743f946fdf10.jpg)](https://getwaves.io/?ref=tailwindweekly.com)

### [GetWaves](https://getwaves.io/?ref=tailwindweekly.com)

Get Waves is a handy little tool that lets you generate custom SVG waves right in your browser. You can tweak the shape, complexity, and colors to get exactly the wave you need for your next hero section, divider, or background. They also have a Figma plugin if you want to create waves directly in your designs. 

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

[**Wirewiki**](https://wirewiki.com/?ref=tailwindweekly.com) – Explore internet infrastructure with DNS tools like propagation checks, record lookups, DNS trace, and more.

---

[**Eagle**](https://en.eagle.cool/?ref=tailwindweekly.com) – A visual asset manager with tagging, smart folders, and web clipping to organize screenshots and inspiration fast.

---

[**Instant Domain Search**](https://instantdomainsearch.com/?ref=tailwindweekly.com) – Find and register available domains in real time as you type across 800+ TLDs, with AI suggestions.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #210: CSS Stacking Contexts Demystified, Specificity Tricks with @layer, and SVG Optimization Made Easy 🧹!
URL: https://tailwindweekly.com/issue-210/
Last updated: 2026-03-28T12:00:12.000Z
Hello folks!

No major news on the Tailwind CSS front this year, but if you got early access to [ui.sh](https://ui.sh/?ref=tailwindweekly.com) then better check the Discord chat, Adam announced huge improvements to the skill, including a cleaner install and way more guidelines. 

Let's dive in 👇

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com) and receive a tailored quote within 24 hours, and for the next 2 weeks, we're offering a 20% discount on all new projects 🤑. 

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1366x768-1774659722068.webp)](https://blog.damato.design/posts/chip-away/?ref=tailwindweekly.com)

### [Chip Away](https://blog.damato.design/posts/chip-away/?ref=tailwindweekly.com)

This is a really thoughtful deep-dive into one of the most confusing UI patterns out there: "small text with a background color that may or may not be interactive", aka chips, badges, pills, tags, lozenges, you name it. Donnie D'Amato breaks down why these components are so problematic, from the fact that users can't tell them apart to the bigger issue of not knowing if they're even clickable (he calls it "Schrödinger's Button" 😂). He also covers tag inputs and their accessibility pitfalls, offering simpler alternatives that work better for everyone. 

### [Lowering the specificity of multiple rules at once](https://www.matuzo.at/blog/2026/lowering-specificity-of-multiple-rules?ref=tailwindweekly.com)

Here's a neat CSS trick you might not have thought of! Manuel Matuzovic shares how he went from wrapping individual selectors in `:where()` to using an anonymous `@layer` to lower the specificity of *all* rules at once in his reset stylesheet. The beauty of it is that unlayered CSS always overrides layered CSS, so your styles will always win, no matter the order of your files. He also covers the nuances of working with named layers, avoiding naming clashes, and how you can even nest anonymous layers inside existing ones to fix specificity issues. 

### [Unstacking CSS Stacking Contexts](https://www.smashingmagazine.com/2026/01/unstacking-css-stacking-contexts/?ref=tailwindweekly.com)

Gabriel Shoyombo does an excellent job explaining CSS stacking contexts using a desk-and-folders analogy that finally makes things click. He walks through three common scenarios, trapped modals, submerged dropdowns, and clipped tooltips, and shows you exactly how to debug them with a step-by-step checklist. You'll also learn about handy tools like Edge's 3D View and browser extensions that visualize stacking contexts, plus practical fixes like DOM restructuring, adjusting parent contexts, using Portals, and the underrated `isolation: isolate` property.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1440x900-1774659867971.webp)](https://www.chatwoot.com/?ref=tailwindweekly.com)

### [chatwoot](https://www.chatwoot.com/?ref=tailwindweekly.com)

Chatwoot is an open-source, omnichannel customer support platform with Captain built in—an AI agent and Copilot that learns from your help center, FAQs, and past conversations to automate replies, suggest responses, and translate in real time. Extend it with developer APIs to build custom workflows and integrations, ship a fully branded live chat widget, and support channels like email, web, social, and WhatsApp from one dashboard. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1440x900-1774659839960.webp)](https://jakearchibald.github.io/svgomg/?ref=tailwindweekly.com)

### [SVGOMG](https://jakearchibald.github.io/svgomg/?ref=tailwindweekly.com)

If you work with SVGs regularly (and if you're using Tailwind, you probably are), you need this tool in your bookmarks. SVGOMG is a web-based GUI for SVGO, the popular SVG optimizer, and it makes minifying your SVGs super easy. Just paste your markup or upload a file and you'll instantly see the before/after file size — we're talking up to 40-60% savings in most cases! What I really love is the granular control it gives you. You can toggle individual optimizations like removing metadata, collapsing groups, converting shapes to paths, and a ton more. It's recently been updated to SVGO v4.0.0 too, so you're getting the latest and greatest.

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

[**RevoGrid**](https://rv-grid.com/?ref=tailwindweekly.com) – A powerful data grid with a simple API and quick setup, with integrations for React, Vue, Angular, Svelte, and JS.

---

[**ToDiagram**](https://todiagram.com/?ref=tailwindweekly.com) – Turn JSON, YAML, CSV, or XML into interactive two-way diagrams to visualize, edit, compare, and export.

---

[**Seenode**](https://seenode.com/?ref=tailwindweekly.com) – Connect GitHub, pick a repo, see it live in 4 minutes. Claim it when you're ready. No account needed, no credit card. 7-day free trial.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #209: Designing with Claude Code, Vite V8 Support, and more goodies 🎨!
URL: https://tailwindweekly.com/issue-209/
Last updated: 2026-03-21T12:00:52.000Z
Hello folks!

We got a new Tailwind CSS update and a fantastic video from Steve about his workflow for designing with AI. 

Let's dive in 👇!

## **🌟 News**

### [Steve breaks down how he designs with Claude Code](https://www.youtube.com/watch?v=lkKGQVHrXzE&ref=tailwindweekly.com)

Steve Schoger shared an awesome deep-dive video where he walks through his entire workflow of using Claude Code as a primary design tool to build a marketing page from scratch. He covers a ton of practical design tips along the way, like using low-opacity `gray-950` rings instead of solid borders to avoid that muddy shadow effect, leveraging Inter's variable font for in-between weights like `550`, using the `ch` unit for more flexible text widths, and adding a "canvas grid" border treatment (à la Stripe) to make a site feel more polished without custom graphics. 

At the end, he teases [**ui.sh**](https://ui.sh/?ref=tailwindweekly.com)andsays that early users are in and a wider release is coming soon!

### [Tailwind CSS now supports Vite V8](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.2?ref=tailwindweekly.com)

We got a new update that adds official support for the latest Vite V8 version released last week plus some minor bug fixes and performance improvements. 

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/03/image-1.png)](https://css-tricks.com/the-value-of-z-index/?ref=tailwindweekly.com)

### [The Value of z-index](https://css-tricks.com/the-value-of-z-index/?ref=tailwindweekly.com)

If you've ever worked on a large project, you know the z-index "arms race" all too well, developers slapping on values like `9999` or `10001` just to make sure their element stays on top. This excellent article by Amit Sheen tackles that exact problem and proposes a clean, token-based system using CSS custom properties to manage your z-index values in one place. He walks you through setting up global layer tokens (like `--z-toast`, `--z-popup`, `--z-overlay`), using `calc()` to bind related elements together, and even introduces local tokens (`--z-top`, `--z-bottom`) for managing layers *inside* components. There's also a bonus at the end — a library called `z-index-token-enforcer` that provides Stylelint, ESLint, and CLI tools to make sure no one sneaks in magic numbers. 

### [The Fundamentals of CSS Alignment](https://css-tip.com/explore/alignment/?ref=tailwindweekly.com)

Temani Afif put together an incredibly thorough exploration of how CSS alignment actually works across grid, flexbox, and block layouts. He breaks down the two levels of alignment (content vs. item), explains why `normal` behaves differently depending on the layout, and clears up long-standing confusion like why `align-content` doesn't work without `flex-wrap: wrap` or why `justify-self` is ignored in flexbox. 

### [Error.isError(): A Better Way to Check Error Types in JavaScript](https://www.trevorlasn.com/blog/error-iserror-javascript?ref=tailwindweekly.com)

Trevor Lasn walks you through the new `Error.isError()` method, which uses an internal marker (think of it like a manufacturer's watermark) instead of checking the prototype chain. This means it correctly identifies genuine errors across contexts and rejects fake objects trying to game the system. It's a short read but a useful one, especially if you're building anything that deals with cross-realm error handling!

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1366x768-1774053260682.webp)](https://www.tremor.so/?ref=tailwindweekly.com)

### [Tremor](https://www.tremor.so/?ref=tailwindweekly.com)

Tremor is a production-ready library of React + Next.js blocks and templates that helps web developers ship beautiful dashboards and data-heavy UIs fast, whether you prefer copy‑and‑paste components or an NPM package. Built on a modern stack with clean, customizable primitives (35+ components and 300+ block examples), Tremor lets you skip weeks of bespoke UI work and get to a launch-ready app tomorrow. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/03/image-2.png)](https://simpleicons.org/?ref=tailwindweekly.com)

### [Simple Icons](https://simpleicons.org/?ref=tailwindweekly.com)

Simple Icons is a massive collection of over 3,400 free SVG icons for popular brands, we're talking everything from Honda to Hono to n8n. You can search, download as SVG or PNG, and even check each brand's official color and guidelines. It's open source, well-maintained, and honestly one of those resources you'll keep coming back to. 

## **👌 Cool Stuff**

[**Windybase**](https://windybase.com/?ref=tailwindweekly.com) \- Explore weekly curated free & premium Tailwind templates, components and tools to help you build modern websites and apps fast.

---

[**BaseHub**](https://basehub.com/?ref=tailwindweekly.com) – A Notion-like CMS with branching, typesafe SDK/GraphQL, and templates to scaffold, version, and ship content fast.

---

[**Consul**](https://getconsul.app/?ref=tailwindweekly.com) – A macOS menubar file converter that detects mismatched extensions and converts files locally, automatically.

---

[**Kvile**](https://kvile.app/?ref=tailwindweekly.com) – A lightweight, offline-first HTTP debugging tool with first-class .http support, no account, and no telemetry.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #208: Inclusive Dark Mode, CSS Spinning Diagrams, and a 5k+ Component Library 🤩
URL: https://tailwindweekly.com/issue-208/
Last updated: 2026-03-14T12:00:14.000Z
Hello folks!

Quiet week, but more ui.sh invites went out this week. If you're on the waitlist, then check your [spam folder.](https://x.com/reinink/status/2031825473999708562?ref=tailwindweekly.com) 

I got early access to ui.sh last week and my first impression was 🤯. But just like with any other AI tool, the more design guidance you give it, the better the output so I have been learning more about how to create proper design briefs. Fun times!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/01/elements-graphic.jpeg)](https://realmacsoftware.com/rapidweaver/tailwind-visual-builder/?utm%5Fsource=tailwind-weekly&utm%5Fmedium=email&utm%5Fcampaign=sponsorship)

**Build modern Tailwind websites visually, without fighting code.**

Elements combines a visual workflow with full Tailwind control and clean, readable markup in a native macOS app. No abstractions, no bloated HTML, no vendor lock-in.

Right now, [you can get **25% off**](https://realmacsoftware.com/pricing/?coupon=TAILWINDWEEKLY&utm%5Fsource=TailwindWeekly&utm%5Fmedium=email&utm%5Fcampaign=Tailwind-Weekly), automatically applied at checkout. [**Download it**](https://realmacsoftware.com/pricing/?coupon=TAILWINDWEEKLY&utm%5Fsource=TailwindWeekly&utm%5Fmedium=email&utm%5Fcampaign=Tailwind-Weekly) for free and see how it fits into your Tailwind workflow.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1366x768-1773467772688.webp)](https://www.smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/?ref=tailwindweekly.com)

### [Inclusive Dark Mode: Designing Accessible Dark Themes For All Users](https://www.smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/?ref=tailwindweekly.com)

Dark mode is everywhere, but here's the thing, if it's not designed with accessibility in mind, it can actually make things worse for a lot of users. This article dives deep into the do's and don'ts of building inclusive dark themes. You'll learn why pure black backgrounds are a no-go, how to pick the right contrast ratios for readability, and what typography choices work best on dark backgrounds. It also covers how different visual impairments, from astigmatism to glaucoma to cataracts, interact with dark mode in very different ways, which is something most devs don't think about enough. There's also a great section on making sure your dark mode is machine-readable too, which matters more and more as automation grows. 

### [Spinning Diagrams with CSS](https://x.st/spinning-diagrams-with-css/?ref=tailwindweekly.com)

Learn how to create 3D spinning diagrams using nothing but HTML and CSS. No JavaScript, no animated GIFs, just pure CSS transforms and animations. Harold Cooper breaks down how to build a spinning cube using `translate3d` for positioning and `rotateY` keyframes for the rotation. He also shows a clever trick to "un-spin" the text labels so they always face the reader using a counter-rotation on inner divs. It performs great even on mobile and you can even select the rotating text! 

### [Subgrid: how to line up elements to your heart’s content](https://webkit.org/blog/17339/subgrid-how-to-line-up-elements-to-your-hearts-content/?ref=tailwindweekly.com)

CSS Subgrid is one of those features that solves a super common problem: misaligned content across card layouts when one card has more text than the others. This article from WebKit walks you through how Subgrid fixes that beautifully. The idea is simple: you define rows in your parent grid, then use `grid-template-rows: subgrid` on the child elements so they all share the same row structure, perfectly aligned content across columns, no matter the text length. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1366x768-1773467874337.webp)](https://www.stagehand.dev/?ref=tailwindweekly.com)

### [Stagehand](https://www.stagehand.dev/?ref=tailwindweekly.com)

Stagehand is an AI-native, open-source browser automation framework that’s fully compatible with Playwright, but easier to write and significantly more reliable on volatile pages by combining deterministic, atomic actions with LLM adaptability. Built for developers who want the predictability of code without the brittleness of traditional tooling, it delivers repeatable automation, fast performance, and a natural-language-friendly API for extraction and action. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1440x900-1773467915663.webp)](https://www.untitledui.com/react?ref=tailwindweekly.com)

### [Untitled UI](https://www.untitledui.com/react?ref=tailwindweekly.com)

This is a massive open-source React component library styled entirely with Tailwind CSS v4.1 and built on React Aria for accessibility. We're talking 5,000+ components, 250+ page examples, dark mode out of the box, and a custom CLI that lets you scaffold a project with a single command. There's a generous free tier with hundreds of components, and the PRO version is a one-time purchase with lifetime updates. 

## **👌 Cool Stuff**

[**Learn Visual Studio Code**](https://lazarpress.gumroad.com/l/learnvscode?a=623146483&ref=tailwindweekly.com) – An ebook with 150+ tips and customizations for VS Code, covering built-in features like settings, terminal tricks, code snippets, keyboard shortcuts, and more. Great for both beginners and advanced users across Mac and Windows.

---

[**OpenStatus**](https://openstatus.dev/?ref=tailwindweekly.com) – Open-source status pages + uptime monitoring from 28 regions, with incident updates and SOC 2-ready audit trails.

---

[**CaptureKit**](https://www.capturekit.dev/?ref=tailwindweekly.com) – Screenshot & extract webpage content via one API call (PNG/PDF/HTML/MD), with device emulation and edge caching.

---

[**Swish**](https://highlyopinionated.co/swish/?ref=tailwindweekly.com) – A macOS window manager with trackpad gestures for snapping, moving, and resizing apps on grid layouts.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #207: ui.sh Invites Rolling Out, New v4.2 Colors Breakdown, CSS-Only Tooltips, and 10 CSS Features Coming in 2026 🤩!
URL: https://tailwindweekly.com/issue-207/
Last updated: 2026-03-07T13:00:13.000Z
Hello folks!

Quiet week in the Tailwind world, but don't let that fool you, the two things that *did* happen are pretty noteworthy! First up, Adam has started sending out invites to the [**ui.sh**](https://ui.sh/?ref=tailwindweekly.com) waitlist, so if you signed up, keep an eye on your inbox (and if you haven't, what are you waiting for? 👀). Second, and this one is wild: Apple featured Tailwind CSS code on the new MacBook Pro [landing page](https://x.com/adamwathan/status/2029549439631732976?ref=tailwindweekly.com) 🤩. 

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/01/elements-graphic.jpeg)](https://realmacsoftware.com/rapidweaver/tailwind-visual-builder/?utm%5Fsource=tailwind-weekly&utm%5Fmedium=email&utm%5Fcampaign=sponsorship)

**Build modern Tailwind websites visually, without fighting code.**

Elements combines a visual workflow with full Tailwind control and clean, readable markup in a native macOS app. No abstractions, no bloated HTML, no vendor lock-in.

Right now, [you can get **25% off**](https://realmacsoftware.com/pricing/?coupon=TAILWINDWEEKLY&utm%5Fsource=TailwindWeekly&utm%5Fmedium=email&utm%5Fcampaign=Tailwind-Weekly), automatically applied at checkout. [**Download it**](https://realmacsoftware.com/pricing/?coupon=TAILWINDWEEKLY&utm%5Fsource=TailwindWeekly&utm%5Fmedium=email&utm%5Fcampaign=Tailwind-Weekly) for free and see how it fits into your Tailwind workflow.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/03/tailwind-css-new-colors.jpg)](https://superhighway.dev/tailwind-v4-2-new-palettes?ref=tailwindweekly.com)

### [The Four New Color Palettes added to Tailwind CSS v4.2](https://superhighway.dev/tailwind-v4-2-new-palettes?ref=tailwindweekly.com)

Chris Brandrick breaks down the new Tailwind Colors: mauve, olive, mist, and taupe, what makes each one unique, how they compare side by side, and why they're all defined in `oklch`. If you've ever needed something softer than your typical bold palette but with just a hint of personality (think slate or zinc vibes), these are exactly what you're looking for. The article also includes full color ramps from 50 to 950 with hex and oklch values, plus visual examples of cards, badges, buttons, and typography using each palette. 

### [10 NEW CSS Features You Need To Know For 2026](https://www.youtube.com/watch?v=svqu6FDiMAs&ref=tailwindweekly.com)

This is a fantastic rundown of 10 CSS features that are either here or coming very soon, and some of these are awesome. You've got squircles (finally!), the new `shape()` function that's basically `path()` on steroids, styleable `<select>` elements (it's about time), scroll markers and scroll buttons for JS-free carousels, container scroll state queries, the `stretch` keyword, the `text-box` property for trimming whitespace around text, `sibling-index()` for staggered animations without JS, inline `if()` conditionals, and custom CSS functions with `@function`. 

### [Perfectly Pointed Tooltips: A Foundation](https://frontendmasters.com/blog/perfectly-pointed-tooltips-a-foundation/?ref=tailwindweekly.com)

This is an excellent deep-dive by Temani Afif on building tooltips that automatically reposition themselves using nothing but CSS. no JavaScript needed for positioning at all. It walks you through the Anchor Positioning API step by step: placing a tooltip with `position-area`, adding fallback positions with `position-try-fallbacks` and `flip-block`, creating a dynamic tail using pseudo-elements, and solving the tricky containing block issue when the tail needs to reference both the anchor and the tooltip. The best part? The whole thing is barely 20 CSS declarations. It's the first part of a three-part series, so if you want to go even further with all four sides and corner positioning, those are waiting for you too. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1440x900-1772643491309.webp)](https://www.vybe.build/?ref=tailwindweekly.com)

### [vybe](https://www.vybe.build/?ref=tailwindweekly.com)

Vybe is the secure, production-ready way for web developers to ship internal apps in seconds: AI-generated, data-powered, and governed by engineering. Connect databases, APIs, and 3,000+ tools with reliable integrations so business teams can build on trusted, up-to-date data without bypassing security or creating a maintenance nightmare. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/03/screenshot-1440x900-1772643515928.webp)](https://basecoatui.com/?ref=tailwindweekly.com)

### [Basecoat](https://basecoatui.com/?ref=tailwindweekly.com)

Basecoat is a component library that brings the shadcn/ui experience to any web stack, not just React. It's built entirely with Tailwind CSS, which means you can use it with plain HTML, Laravel, Django, Rails, or whatever you're working with. The library ships with 40+ components, from basics like buttons and inputs to more complex ones like comboboxes, sidebars, and command palettes. It also supports theming out of the box with some pretty nice presets (including a Doom 64 one, which is fun). 

## **👌 Cool Stuff**

[**Learn Visual Studio Code**](https://lazarpress.gumroad.com/l/learnvscode?a=623146483&ref=tailwindweekly.com) – An ebook with 150+ tips and customizations for VS Code, covering built-in features like settings, terminal tricks, code snippets, keyboard shortcuts, and more. Great for both beginners and advanced users across Mac and Windows.

---

[**Tabba**](https://www.tabba.so/?ref=tailwindweekly.com) – A local-only new tab to plan your time with hour-based notes, tagged todos, timezones, and zero tracking.

---

[**Slowmo**](https://slowmo.dev/?ref=tailwindweekly.com) – A tiny JS utility to slow, pause, or speed up time for animations and web content to debug and tweak demos.

---

[**Vibe Kanban**](https://www.vibekanban.com/?ref=tailwindweekly.com) – An end-to-end workflow to plan, prompt, and review parallel coding agents, so teams ship faster with less idle time.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #206: v4.2 Performance Boosts, New Palettes & Smarter Utilities 🚀
URL: https://tailwindweekly.com/issue-206/
Last updated: 2026-03-06T23:39:56.000Z
Hello folks!

Tailwind CSS v4.2.0 is here, and it’s not just a minor bump. We’re talking major performance gains, new color palettes, smarter logical utilities for international layouts, and better typography control straight from your classes. 

Let’s dive in 👇

## **🌟 News**

### v4.2.0 Brings Massive Performance Gains and New Palettes

[v4.2.0](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.0?ref=tailwindweekly.com) just landed last week, and this one is a big deal.

Adam tagged the release this week, and the headline feature is performance. Tim Neutkens [shared](https://x.com/timneutkens/status/2024140710786523301?ref=tailwindweekly.com) that they measured a **3.8× speed improvement on recompilation** in a large production app. That means faster rebuilds on every edit. Not just initial compile. Every single save.

The improvement applies to **Next.js, Vite, Webpack, PostCSS, and even Turbopack**, thanks in part to a brand new Webpack plugin designed to dramatically improve framework integrations.

---

### 🎨 Four New Color Palettes

We’re also getting new colors:

- Mauve
- Olive
- Mist
- Taupe

![](https://tailwindweekly.com/content/images/2026/02/image-1.png)

These lean more muted and sophisticated. Expect to see them pop up quickly in dashboards and marketing sites that want a softer, more editorial feel without going full grayscale.

---

### ↕️ Logical Direction Utilities

New utilities for logical block start and end directions are now available. This makes writing-mode aware layouts and RTL support much cleaner. If you build international apps, this one’s quietly powerful.

---

### 🔤 `font-feature-settings` Utilities

You can now control `font-feature-settings` directly with utilities. That means better control over ligatures, stylistic sets, tabular numbers, and other advanced typography features without dropping to custom CSS.

---

Adam also mentioned that several of these improvements were driven by collaborations with teams at Netflix and Vercel through the Tailwind Partners Program ❤️. 

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/01/elements-graphic.jpeg)](https://realmacsoftware.com/rapidweaver/tailwind-visual-builder/?utm%5Fsource=tailwind-weekly&utm%5Fmedium=email&utm%5Fcampaign=sponsorship)

**Build modern Tailwind websites visually, without fighting code.**

Elements combines a visual workflow with full Tailwind control and clean, readable markup in a native macOS app. No abstractions, no bloated HTML, no vendor lock-in.

Right now, [you can get **25% off**](https://realmacsoftware.com/pricing/?coupon=TAILWINDWEEKLY&utm%5Fsource=TailwindWeekly&utm%5Fmedium=email&utm%5Fcampaign=Tailwind-Weekly), automatically applied at checkout. [**Download it**](https://realmacsoftware.com/pricing/?coupon=TAILWINDWEEKLY&utm%5Fsource=TailwindWeekly&utm%5Fmedium=email&utm%5Fcampaign=Tailwind-Weekly) for free and see how it fits into your Tailwind workflow.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/02/screenshot-1366x768-1771431383223.webp)](https://blog.damato.design/posts/out-of-order/?ref=tailwindweekly.com)

### [Out of order](https://blog.damato.design/posts/out-of-order/?ref=tailwindweekly.com)

If you’ve ever “fixed” a layering issue by bumping a z-index and moving on, this article is going to feel uncomfortably familiar. It walks through why z-index quickly turns into a priority war once components start nesting (dropdowns inside modals, tooltips inside dropdowns, etc.), then makes a strong case for relying on DOM order (and newer concepts like the top-layer) instead of playing whack-a-mole with magic numbers. 

### [The power of the spread and rest syntax in JavaScript](https://allthingssmitty.com/2025/05/05/the-power-of-spread-and-rest-patterns-in-javascript.md/?ref=tailwindweekly.com)

Those three dots (`...`) show up everywhere in JavaScript and this article finally makes them feel a lot less “magic” by clearly explaining when they mean *spread* (expanding arrays/objects/iterables) vs *rest* (gathering values into a single array/object). It walks through the most common real-world uses like copying and merging arrays, passing array values as function arguments, doing immutable object updates, and using rest parameters to replace the old `arguments` pattern, while also calling out the gotchas people run into (shallow copies and property override order). 

### [A Guide to Browser DevTools](https://spin.atomicobject.com/devtools-network-monitor/?ref=tailwindweekly.com)

Michael guides you through the Network tab in DevTools and shows you how to read what’s happening when a page loads, what requests are being made, how long they take, what the server actually returned, and where to look when things fail (like spotting a 404 immediately instead of guessing). The best part is that it doesn’t try to cover every single feature; it focuses on the stuff you’ll actually use day-to-day like filtering, searching within responses, preserving logs across refreshes, and disabling cache when it’s lying to you.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/02/screenshot-1366x768-1771431427874.webp)](https://ghostable.dev/?ref=tailwindweekly.com)

### [Ghostable](https://ghostable.dev/?ref=tailwindweekly.com)

Ghostable is a zero-knowledge .env and secrets management platform that lets web developers securely sync, validate, version, audit, and share environment configs across every project and stack without leaking plaintext to third-party servers. Use the CLI to enforce rules locally, prevent broken deploys with preflight validation, and keep a full change history with rollback and detailed audit logs. Drop it into your existing CI/CD workflow to deploy configs safely with fine-grained org and project permissions, no more emailing .env files or pasting secrets into Slack.

**🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/02/screenshot-1440x900-1771431468342.webp)](https://smoothui.dev/?ref=tailwindweekly.com)

### [SmoothUI](https://smoothui.dev/?ref=tailwindweekly.com)

If you’re already building with shadcn/ui and Tailwind, SmoothUI looks like a solid way to speed up your UI without sacrificing the “custom-built” feel. It’s basically a set of production-ready, highly customizable blocks you can drop into your app, with smooth animations baked in via Motion and GSAP, and it’s built with modern React patterns (Server Components, TypeScript, hooks) so it should fit nicely into a serious codebase. 

## **👌 Cool Stuff**

[**Tail Lens**](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com) \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

[**PHPark**](https://github.com/stevepop/phpark?ref=tailwindweekly.com) – A Linux PHP dev environment manager with auto Nginx configs, .test domains, SSL, and instant PHP version switching via CLI.

---

[**DB Pro Studio**](https://www.dbpro.app/?ref=tailwindweekly.com) – A modern desktop database workbench to query, browse, and manage PostgreSQL, MySQL, SQLite, MongoDB, 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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #205: CSS One-Liners, Smoother Animations & Rolling the Dice 🎲
URL: https://tailwindweekly.com/issue-205/
Last updated: 2026-02-14T13:00:11.000Z
Hello folks!

It’s been a quieter week in the news front, but the The Tailwind Labs team is hard at work on the new [**ui.sh**](https://ui.sh/?ref=tailwindweekly.com) product, and it definitely feels like something exciting is brewing behind the scenes.

In the meantime, we’ve got a *packed* issue for you. Some cool CSS and animation tips with a touch of randomness!

Also, Happy Valentine’s Day ❤️. Whether you’re shipping features or just refactoring old components, I hope you get to build something you love this weekend.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/01/elements-graphic.jpeg)](https://realmacsoftware.com/rapidweaver/tailwind-visual-builder/?utm%5Fsource=tailwind-weekly&utm%5Fmedium=email&utm%5Fcampaign=sponsorship)

**Build modern Tailwind websites visually, without fighting code.**

Elements combines a visual workflow with full Tailwind control and clean, readable markup in a native macOS app. No abstractions, no bloated HTML, no vendor lock-in.

[**Download for free**](https://realmacsoftware.com/rapidweaver/tailwind-visual-builder/?utm%5Fsource=tailwind-weekly&utm%5Fmedium=email&utm%5Fcampaign=sponsorship)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/02/dQ8_F4LPCs8-HD.jpg)](https://www.youtube.com/watch?v=dQ8%5FF4LPCs8&ref=tailwindweekly.com)

### [CSS properties that solve annoying problems](https://www.youtube.com/watch?v=dQ8%5FF4LPCs8&ref=tailwindweekly.com)

This one’s a rapid-fire tour of five super practical CSS one-liners you’ll actually use: `inset` as a clean shorthand for top/right/bottom/left positioning, `isolation: isolate` to fix negative `z-index` stacking chaos without hacks, `min-inline-size: fit-content` as a safer alternative to `white-space: nowrap` for flexible buttons and labels, `aspect-ratio` paired with `object-fit: cover` to control media sizing and cropping without padding tricks, and finally `text-wrap: balance` for cleaner headings plus `text-wrap: pretty` to prevent lonely orphan words in paragraphs. 

### [7 Practical Animation Tips](https://emilkowal.ski/ui/7-practical-animation-tips?utm%5Fsource=CSS-Weekly&utm%5Fmedium=newsletter&utm%5Fcampaign=issue-622-october-3-2025&%5Fbhlid=a6d0f0155554aefe9bf868ada2513aac9538c4ac)

Emil covers small but high-impact things like adding a subtle `scale()` on button press to make the UI feel responsive, avoiding `scale(0)` because it makes elements look like they pop out of nowhere, picking the right easing (and why `ease-out` usually beats `ease-in` for UI), making popovers feel more natural with `transform-origin`, keeping durations snappy (generally under \~300ms), and even using a touch of `filter: blur()` when an animation still feels off. If your animations currently feel "almost right" but not quite, this will give you a concrete checklist of what to adjust and why it works.

### [Rolling the Dice with CSS random()](https://webkit.org/blog/17285/rolling-the-dice-with-css-random/?ref=tailwindweekly.com)

The author starts with the basics: `random(min, max, step)` and why the optional step matters, then quickly jumps into fun but practical demos like a star field with random positions and sizes, random colors using modern color spaces, and even a “wheel of fortune” style interaction driven by `random()` inside animations. The best part (and the part that can be a little mind-bending) is the explanation of *shared randomness*: how to reuse the same random value across multiple properties with a named ident, or share a value across elements with `element-shared`, plus why custom properties don’t “store” the result the way you might expect. 

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/2026/02/screenshot-1440x900-1771031392989.webp)

### [Solo](https://soloterm.com/?ref=tailwindweekly.com)

Solo is a lightweight desktop process manager for local development that lets web developers configure a project once, start their entire stack with one click, and see every service’s status at a glance. It auto-detects (or lets you define) your dev commands, auto-restarts crashed processes, surfaces logs and native notifications, and can be shared via a committed `solo.yml` so teammates run the same setup without outdated READMEs. Built with Tauri (not Electron) and compatible with any stack, Solo also integrates with tools like Claude via MCP and Raycast to manage your processes without context-switching.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/02/cover.png)](https://react.email/?ref=tailwindweekly.com)

### [React Email](https://react.email/?ref=tailwindweekly.com)

React Email lets you build emails using React and Tailwind, which means you can style email templates with the same utility classes you already use every day. Instead of fighting inline styles and weird table markup, you wrap your template in their `Tailwind` component and keep your usual workflow, spacing scale, and mental model.

## **👌 Cool Stuff**

[**Tail Lens**](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com) \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

[**Writizzy**](https://writizzy.com/?ref=tailwindweekly.com) – A minimalist blogging platform with built-in newsletter, comments, themes, and privacy-friendly analytics.

---

[**You're not a front-end developer until you've...**](https://www.nicchan.me/blog/youre-not-a-front-end-developer-until-youve/?ref=tailwindweekly.com) – A tongue-in-cheek web dev “been there” quiz of career milestones, from DNS tears and caching to prod mishaps.

---

[**BucketMate**](https://www.bucketmate.app/?ref=tailwindweekly.com) – A native macOS S3 GUI with fast drag-and-drop and one dashboard for S3, R2, B2, Spaces, MinIO, 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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #204: Tailwind Labs Is Cooking, All About SVGs, Sticky Layouts, and Scroll Animations 🔥
URL: https://tailwindweekly.com/issue-204/
Last updated: 2026-01-31T13:00:17.000Z
Hello folks!

It was a quiet week on the surface, but the Tailwind Labs team is clearly cooking behind the scenes. Community support keeps growing, with [Railway](https://railway.com/?ref=tailwindweekly.com) and [Webflow](https://webflow.com/?ref=tailwindweekly.com) joining as official sponsors, and there’s a lot of exciting energy building around what’s coming next. 

## **🌟 News**

Adam teased that the team is actively working on fixing one of the biggest gaps in AI tooling right now: UI design. Instead of just complaining that “AI sucks at design,” they’re building something to make that leap easier, and the hints so far (including a spicy four-letter domain 👀) are already getting people excited.

> A few weeks ago we decided to stop just being disappointed that AI sucks at UI design and try and do something about it.  
>  
> Pieces are coming together and really excited about what we’re building to make it easier for everyone else to make the leap too 🤘 [https://t.co/8sfpjdzF16](https://t.co/8sfpjdzF16?ref=tailwindweekly.com)
> 
> — Adam Wathan (@adamwathan) [January 30, 2026](https://twitter.com/adamwathan/status/2017372971447341509?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.com)

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/2026/01/elements-graphic.jpeg)](https://realmacsoftware.com/rapidweaver/tailwind-visual-builder/?utm%5Fsource=tailwind-weekly&utm%5Fmedium=email&utm%5Fcampaign=sponsorship)

**Build modern Tailwind websites visually, without fighting code.**

Elements combines a visual workflow with full Tailwind control and clean, readable markup in a native macOS app. No abstractions, no bloated HTML, no vendor lock-in.

[**Download for free** ](https://realmacsoftware.com/rapidweaver/tailwind-visual-builder/?utm%5Fsource=tailwind-weekly&utm%5Fmedium=email&utm%5Fcampaign=sponsorship)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/01/og-interactive-guide-to-paths.jpg)](https://www.joshwcomeau.com/svg/interactive-guide-to-paths/?ref=tailwindweekly.com)

### [An Interactive Guide to SVG Paths](https://www.joshwcomeau.com/svg/interactive-guide-to-paths/?ref=tailwindweekly.com)

A great little primer on SVGs, especially if you’ve been using them without really understanding what’s going on under the hood. It walks you through what an SVG actually is (and why it’s different from a normal image), the key pieces you’ll keep seeing like the `viewBox`, `paths`, and coordinate system, and how those details affect scaling and crispness across sizes. The best part is it helps you build intuition so you’re not just copy-pasting icons, you’ll know what to tweak when an SVG looks “off” or doesn’t behave the way you expect. 

### [The Weird Parts of position: sticky;](https://frontendmasters.com/blog/the-weird-parts-of-position-sticky/?ref=tailwindweekly.com)

If you’ve ever used `position: sticky` and thought “this should be simple, why is it not sticking?!” this article is just for you. It starts with the basic mental model (what the sticky element is actually sticking *to*), then walks through the two most common ways sticky fails in real layouts: your sticky element being taller than the scroll container, and the more maddening one where an ancestor’s sizing/bounding box prevents the sticky element from “breaking out”. The best part is it doesn’t just throw random fixes at you; it explains the *why* (even lightly referencing the spec), then shows the practical Tailwind-friendly fixes like using `self-start`, so you can debug sticky issues quickly and easily.

### [A guide to Scroll-driven Animations with just CSS](https://webkit.org/blog/17101/a-guide-to-scroll-driven-animations-with-just-css/?ref=tailwindweekly.com)

Saron walks you through scroll-driven animations in plain CSS by breaking the concept into three familiar pieces (the target, the keyframes, and the timeline) and then introduces the missing puzzle piece: `animation-timeline`, with both `scroll()` (animation progress follows the page scroll) and `view()` (animation runs as an element enters the viewport). What I like is that it doesn’t stop at “look, it moves”, it also covers the practical gotchas (like property order) and the UX/accessibility side with `prefers-reduced-motion`, plus a quick intro to `animation-range` so your elements can settle into place instead of moving the entire time they’re visible. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/01/databaseschool.com.jpeg)](https://databaseschool.com/?ref=tailwindweekly.com)

### [Database School](https://databaseschool.com/?ref=tailwindweekly.com)

Database School is a focused learning hub for web developers who want to level up their database skills with practical, implementation-minded guidance you can apply directly to real apps. It’s built to help you understand core database concepts, write better queries, and make smarter design and performance decisions.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/01/daisyui.com.jpeg)](https://daisyui.com/?ref=tailwindweekly.com)

### [daisyUI](https://daisyui.com/?ref=tailwindweekly.com)

daisyUI is a Tailwind CSS plugin that gives you semantic component class names like `btn`, `card`, and `toggle`, a la bootstrap-style. The nice part is it’s still “real Tailwind” under the hood, so you can customize everything with utilities, plus it’s pure CSS (no JS bundle) and framework-agnostic.

## **👌 Cool Stuff**

[**Tail Lens**](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com) \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

[**Outline SDK**](https://getoutline.org/?ref=tailwindweekly.com) – A cross-platform library and tools to build VPNs and apps resilient to blocking and network-level interference.

---

[**GitusAI**](https://gitusai.com/?ref=tailwindweekly.com) – AI-powered VS Code extension to generate clear commit messages from staged changes, with Conventional Commits support.

---

[**Archive Buttons**](https://www.archivebuttons.com/?ref=tailwindweekly.com) – Paste an article URL and try multiple services to find a paywall-free version fast.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #203: Quiet Week, Great CSS Links & Fresh Components 😄!
URL: https://tailwindweekly.com/issue-203/
Last updated: 2026-01-24T13:00:17.000Z
Hello folks!

No major news to report this week, but I still have great links to share 😄. 

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/01/4-css-features-for-2026.jpg)](https://nerdy.dev/4-css-features-every-front-end-developer-should-know-in-2026?ref=tailwindweekly.com)

### [4 CSS Features Every Front-End Developer Should Know In 2026](https://nerdy.dev/4-css-features-every-front-end-developer-should-know-in-2026?ref=tailwindweekly.com)

Adam Argyle breaks down four newer CSS features that shipped in 2025 and shows how they unlock things we used to reach for JS for, like staggered animations with `sibling-index()`, scroll-aware UI using `@container scroll-state()`, precise typography with `text-box`, and safer HTML to CSS wiring with typed `attr()`.

### [How to have the browser pick a contrasting color in CSS](https://webkit.org/blog/16929/contrast-color/?ref=tailwindweekly.com)

This article introduces `contrast-color()`, a new CSS function that lets the browser automatically choose black or white text based on which one contrasts better with a given color. The post also explains why the current WCAG 2–based algorithm can feel “wrong” perceptually, and how future standards like APCA could improve this.

### [Introducing command and commandfor](https://developer.chrome.com/blog/command-and-commandfor?ref=tailwindweekly.com)

Chrome 135 introduces `command` and `commandfor`, a declarative way for buttons to control popovers and dialogs without JS, state syncing, or manual ARIA wiring. It replaces `popovertarget*`, improves accessibility by default, and even supports custom commands for component APIs. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/01/showcase.jpeg)](https://leotrapani.com/?ref=tailwindweekly.com)

### [Leonardo Trapani's personal website](https://leotrapani.com/?ref=tailwindweekly.com)

Leonardo Trapani is a 19-year-old software developer and entrepreneur based in Milan, currently studying at Bocconi. An early employee at Datapizza, he’s led frontend strategy and shipped real products used by thousands, with a strong focus on systems, Go, and modern TypeScript stacks.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/2026/01/kibo.jpeg)

### [Kibo UI](https://www.kibo-ui.com/?ref=tailwindweekly.com)

Kibo UI is a free, open-source registry of advanced, composable components built on top of `shadcn/ui`. It features higher-level stuff like Gantt, Kanban, editors, dropzones, color pickers, and tons of production-ready patterns you can copy. 

## **👌 Cool Stuff**

[**Tail Lens**](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com) \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

[**TailwindSQL**](https://tailwindsql.xyz/?ref=tailwindweekly.com) – A playful experiment that lets you write SQL queries using Tailwind-style class names and render results as components.

---

[**Heynote**](https://heynote.com/?ref=tailwindweekly.com) – A fast, block-based scratchpad for devs with syntax highlighting, quick notes, and auto formatting.

---

[**Hopp**](https://www.gethopp.app/?ref=tailwindweekly.com) – An open-source, low-latency remote pair programming app built for developers.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #202: Big community support, accessibility musts, and modern CSS goodies 🚀
URL: https://tailwindweekly.com/issue-202/
Last updated: 2026-01-17T13:00:04.000Z
Hello folks!

Last week felt like a big moment for Tailwind; it was encouraging to see a lot of visible support from the community and the companies building on top of it. 

I hope this trend continues and more companies decide to support the Tailwind Labs team!

## **🌟 News**

Last week, Adam shared some very candid thoughts about the future of Tailwind. The challenges, concerns, hard decisions and just an honest look at where things are heading.

The community really listened, and more importantly, it showed support. Shortly after, a bunch of companies stepped up as supporters of Tailwind and the ecosystem around it:

- [Unblocked](https://getunblocked.com/?ref=tailwindweekly.com)
- [Intercom](https://www.intercom.com/?ref=tailwindweekly.com)
- [Replit](https://replit.com/?ref=tailwindweekly.com)
- [Google AI Studio](https://aistudio.google.com/apps?ref=tailwindweekly.com)
- [Syntax + Sentry](https://syntax.fm/?ref=tailwindweekly.com)
- [Supabase](https://supabase.com/?ref=tailwindweekly.com)
- [Gumroad](https://gumroad.com/?ref=tailwindweekly.com)

Always great to see companies backing the tools they depend on. This kind of support makes a real difference ❤️

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2026/01/cover.png)](https://zeroheight.com/blog/5-accessibility-checks-to-run-on-every-component/?ref=tailwindweekly.com)

### [5 accessibility checks to run on every component](https://zeroheight.com/blog/5-accessibility-checks-to-run-on-every-component/?ref=tailwindweekly.com)

Hidde De Vries breaks down five practical accessibility checks you should run on every UI component, from keyboard navigation and focus states to screen reader roles and zoom behavior. It’s a solid, component-level checklist that fits nicely into design system workflows and helps catch issues early, before they ship.

### [How To Create an Adaptive SVG Favicon Using the prefers-color-scheme Media Query](https://www.youtube.com/watch?v=5ByMihLrNrI&list=PLwHaP2qR8ItEVix55mOU%5FxSSknPYVkS0G&index=16&ref=tailwindweekly.com)

Zoran from CSS Weekly shows how to build an adaptive SVG favicon that automatically switches between light and dark mode, using `prefers-color-scheme` directly inside the SVG. It walks through exporting layers from Affinity Designer, optimizing the SVG, wiring up CSS in the file, and even shows a simpler single-layer approach that just swaps colors. 

### [Use Cases for Field Sizing](https://ishadeed.com/article/field-sizing/?ref=tailwindweekly.com)

Ahmad Shadeed explores the new `field-sizing` CSS property and where it actually shines in real layouts, like conversational forms, pagination controls, URL fields, and hero filters. It’s a practical, layout-first look at how inputs and selects can size themselves to their content without JavaScript, plus why this works well as progressive enhancement. 

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2026/01/picmal.png)](https://picmal.app/?ref=tailwindweekly.com)

### [Picmal](https://picmal.app/?ref=tailwindweekly.com)

Picmal is a native macOS utility built for developers who need fast, repeatable media optimization in their workflow, batch convert and compress images, video, and audio (PSD→PNG, AI→SVG, MOV→MP4, and more) in seconds. Because everything runs offline and locally, your assets never leave your Mac, making it ideal for privacy-conscious projects and on-the-go production work. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/01/tailpdf.png)](https://tailpdf.com/?ref=tailwindweekly.com)

### [TailPDF](https://tailpdf.com/?ref=tailwindweekly.com)

TailPDF is simple: you send your Tailwind HTML and get back a pixel-perfect PDF via a simple API call, no Puppeteer/headless browser setup and no ancient CSS support limits like `wkhtmltopdf`/`DomPDF`. It’s clearly aimed at SaaS stuff like invoices, reports, and branded statements, and I like that they’ve thought about the boring production details too (security protections, rate limiting, multi-tenant isolation), plus there’s a free tier with 100 PDFs/month so you can see if it actually matches what you designed before committing.

## **👌 Cool Stuff**

[**Tail Lens**](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com) \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

[**Jottings**](https://jottings.me/?ref=tailwindweekly.com) – Anti-social publishing on your domain: chronological posts, Markdown, tags, RSS/JSON feeds, and fast static sites.

---

[**Clop**](https://lowtechguys.com/clop/?ref=tailwindweekly.com) – A macOS app to auto-optimise images, videos, and PDFs from clipboard or drag/drop, keeping quality high and files small.

---

[**console.text()**](https://consoletext.dev/?ref=tailwindweekly.com) – Add one line to your Node app to send SMS alerts in seconds, with zero config and built-in rate limiting.

---

*PS: I have some availability in the coming months, and I’m open to new freelance projects, so if you need help from a Laravel, Vue, or React expert with *12+ years of experience working with agencies and startups*, just reply to this email and let’s chat* 🙂*.*

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #201: Hard Truths, Oatmeal Ships, and Why CSS Keeps Getting Better ⚡
URL: https://tailwindweekly.com/issue-201/
Last updated: 2026-01-10T13:00:02.000Z
Hello folks!

We're finally truly back 🤩. I know I said it last time, but this one is for real! I had to take some time off last year due to multiple health issues and was debating when to start posting again, but after seeing what happened in the Tailwind community this week, I decided the sooner the better! 

Tailwind CSS completely changed my professional career as a web developer for the better, and I owe Adam and the Tailwind Labs team a great deal for that. I love Tailwind so much that I want more people to hear about it, and that's why I started this newsletter, so stay tuned to more posts this year 💌.

## **🌟 News**

[![](https://tailwindweekly.com/content/images/2026/01/opengraph-image.jpg)](https://tailwindcss.com/sponsor?ref=tailwindweekly.com)

### Tailwind Labs had a rough start to 2026, but the future is hopeful 🥹

Adam [shared](https://x.com/adamwathan/status/2008909129591443925?ref=tailwindweekly.com) a super candid update about how AI has basically broken their old “docs -> discover paid stuff -> revenue” funnel, which forced them to make brutal layoffs (3 out of 4 engineers). After the emotional podcast, Adam shared an [update](https://x.com/adamwathan/status/2009340684210159812?ref=tailwindweekly.com) clarifying that Tailwind isn’t in crisis mode or “needs saving” territory. The business is smaller now, but stable, comfortable, and buying itself time to experiment with new ideas like the partner program, which funds the framework more directly and feels way more resilient long-term. 

![](https://tailwindweekly.com/content/images/2026/01/banner-1-olive_instrument-light-32547e80.png)

![](https://tailwindweekly.com/content/images/2026/01/banner-2-olive_instrument-light-92618864.png)

![](https://tailwindweekly.com/content/images/2026/01/banner-3-olive_instrument-light-f5af8b0b.png)

### They also shipped Oatmeal, their first multi-theme marketing kit for Tailwind Plus 🥣

[**Oatmeal**](https://tailwindcss.com/plus/kits/oatmeal?ref=tailwindweekly.com) is a new SaaS marketing site kit built with Tailwind CSS and Tailwind Plus Elements, and it’s way more flexible than a traditional template. You get multiple color palettes, font combinations, and a large set of composable sections you can mix and match to build exactly the site you need, or just start from the pre-built pages. If you’ve ever wanted a polished marketing site without locking yourself into one rigid design, this is a pretty compelling addition to the Tailwind Plus lineup.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2025/10/screenshot-1366x768-1761789822918.webp)](https://www.joshwcomeau.com/animation/color-shifting/?ref=tailwindweekly.com)

### [Color Shifting in CSS](https://www.joshwcomeau.com/animation/color-shifting/?ref=tailwindweekly.com)

This one goes way deeper than `here’s a cool color animation`. Josh breaks down why animating colors in CSS often feels a bit off, uncovers a couple of browser quirks you probably didn’t know existed, and then walks you through multiple ways to fix them. You’ll learn how color interpolation actually works, why HSL animations can look washed out, and how tricks like filter: `hue-rotate()` or typed CSS variables can allow for smoother, more natural-looking effects. 

### [A gentle introduction to anchor positioning](https://webkit.org/blog/17240/a-gentle-introduction-to-anchor-positioning/?ref=tailwindweekly.com)

This one is a really nice, low-friction intro to anchor positioning in CSS. If you’ve ever reached for JavaScript just to line up a dropdown, tooltip, or profile menu with another element, this article shows how you can now do a lot of that **purely with CSS**. It walks through the mental models, explains the new properties without overwhelming you, and does a great job showing when to use grids versus edge-based positioning. Even if you don’t adopt it right away, it’ll definitely change how you think about positioning UI elements going forward.

### [Responsive video is (almost) easy now](https://www.kooslooijesteijn.net/blog/responsive-video-easy?ref=tailwindweekly.com)

Great show of how far native `<video>` has come and why self-hosting is finally practical without nuking performance, especially by letting the browser switch between vertical and horizontal videos using multiple `<source>` tags and media queries. What’s great is that it goes past the cute demo and into real-world problems you’ll actually hit: compressing aggressively with WebM while keeping MP4 fallbacks, avoiding layout shift with `aspect-ratio`, why fullscreen won’t automatically upgrade to a higher-res source, and why posters are still oddly hard to make responsive. If you’ve ever wanted YouTube-level reliability but with full control over styling, CMS integration, and file size tradeoffs, this article shows you what you gain and what you’ll have to wrestle with to get there.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2025/10/screenshot-1440x900-1761789911829.webp)](https://www.craft.do/?ref=tailwindweekly.com)

### [Craft](https://www.craft.do/?ref=tailwindweekly.com)

Craft is a fast, polished docs and notes editor for developers who want one flexible workspace for writing specs, planning tasks, and organizing ideas without the friction of heavy tools. It blends structured documents, embedded todos, calendars, and whiteboards into a clean, native-feeling experience that stays out of your way and syncs everywhere.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2026/01/image-1.png)](https://tailwindcss.com/plus?ref=tailwindweekly.com)

### [Tailwind Plus](https://tailwindcss.com/plus?ref=tailwindweekly.com)

Just to remind everyone how far Tailwind Plus has come, now we have:

- 13 beautiful [templates](https://tailwindcss.com/plus/templates?ref=tailwindweekly.com)
- 173 components for the [Marketing](https://tailwindcss.com/plus/ui-blocks/marketing?ref=tailwindweekly.com) kit
- 379 components for the [Application UI](https://tailwindcss.com/plus/ui-blocks/application-ui?ref=tailwindweekly.com) kit
- 84 components for the [Ecommerce](https://tailwindcss.com/plus/ui-blocks/ecommerce?ref=tailwindweekly.com) kit

All are completely responsive, and most of it with dark mode included 🤩. 

## **👌 Cool Stuff**

[**Tail Lens**](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com) \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

[**Logoipsum**](https://logoipsum.com/?ref=tailwindweekly.com) – 183 free SVG placeholder logos you can copy/download fast for mockups, UI, and design comps.

---

[**Cap**](https://capjs.js.org/?ref=tailwindweekly.com) – A lightweight, privacy-first PoW CAPTCHA that replaces reCAPTCHA with a fast, customizable, open-source alternative.

---

[**Fabric**](https://fabric.so/?ref=tailwindweekly.com) – An AI-powered workspace that captures, connects, and finds your notes, files, and ideas automatically.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #200: Tailwind CSS turns 10 🥳
URL: https://tailwindweekly.com/issue-200/
Last updated: 2025-10-11T12:00:06.000Z
Hello folks!

This is issue #200, and I can't believe I have written this newsletter for so long! 

I discovered Tailwind CSS in the second half of 2018 when a freelance client offered to pay me more if I used this niche CSS framework he liked using. I said "Why not?" and I remember being extremely frustrated the first 4 hours because I didn't know any of the class names and kept having to go back to the docs 😂.

After that first work session, I started to understand the naming convention, and by the second HTML page, it sort of "clicked". I remember finishing that project in half the time it would have taken me if I had used Sass/BEM like I was used to. 

It was such a productivity boost that I offered a small discount to clients who let me use Tailwind for their projects. After the first year, I stopped accepting projects with other frameworks. I was hooked! 

In January 2020, I started this newsletter to showcase how cool Tailwind was and how much of a game-changer it was for frontend development. I knew it was something special and unique in the industry, but I bet nobody, not even Adam Wathan, could predict just *how popular* it would get! 

It has been a delight to see it grow, mature, and become even more awesome with each major version. 

Tailwind CSS changed my professional life for the better, and this little newsletter is my love letter to it. Thank you all for accompanying me these last 5 years ❤️.

## **🌟 News**

### **Tailwind CSS just turned 10!** 🥳

Adam Wathan shared a fun little milestone: it’s been **10 years since the very first commit** to the file that eventually became Tailwind CSS. It started as a quick experiment with LESS mixins and a desire to stop rewriting the same CSS over and over, and has grown into one of the most influential frameworks in modern web development.

> 10 years since the first commit to the file that eventually became Tailwind CSS 🦕 [pic.twitter.com/FJTKMOpYOJ](https://t.co/FJTKMOpYOJ?ref=tailwindweekly.com)
> 
> — Adam Wathan (@adamwathan) [October 5, 2025](https://twitter.com/adamwathan/status/1974924187203678470?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.com)

### **Tailwind support coming to Expo apps!** ⚡️

![](https://tailwindweekly.com/content/images/2025/10/image-1.png)

Evan Bacon just [dropped](https://x.com/Baconbrix/status/1976050536756691384?ref=tailwindweekly.com) a huge update: he and Mark Lawlor have been working on adding **native CSS and vanilla Tailwind support directly to Expo**. This means library authors will soon be able to ship CSS safely inside Expo packages, and you’ll be able to style native apps with real Tailwind syntax out of the box. 

### **New Tailwind VS Code plugin upgrade!** ✨

![](https://tailwindweekly.com/content/images/2025/10/image-2.png)

Adam Wathan just [announced](https://x.com/adamwathan/status/1975579419335926176?ref=tailwindweekly.com) a nice improvement to the official Tailwind CSS VS Code plugin; it now highlights any classes that could be written in a simpler way. It’s a small but super helpful quality-of-life update, especially if you want your Tailwind to look as clean as the docs.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2025/10/screenshot-1366x768-1759844551037.webp)](https://motion.dev/docs/react-tailwind?ref=tailwindweekly.com)

### [Animating with Tailwind CSS](https://motion.dev/docs/react-tailwind?ref=tailwindweekly.com)

This is an excellent guide on how to combine Tailwind classes with the popular Motion.dev animation library. Motion started as Framer Motion and was part of the Framer product suite, but it earned the love of many frontend devs that wanted a nice and well-documented alternative to GSAP, myself included 😄.

### [How much do you really know about media queries?](https://frontendmasters.com/blog/learn-media-queries/?ref=tailwindweekly.com)

This is THE tour of modern media queries you didn’t know you needed. It goes way beyond the usual basics, and you’ll get concrete snippets, sensible patterns, browser‑support notes, and even `@custom-media` plus native CSS nesting to keep things tidy. If you’ve been sleeping on media queries then this one is for you!

### [10 CSS Features I've Found Really Useful](https://koolcodez.com/blog/useful-css-features/?ref=tailwindweekly.com)

This is a super practical roundup of modern CSS that replaces a bunch of old hacks and even whole JS plugins. It mentions `accent-color` for native form styling, `:has()` for true parent-aware rules, `text-wrap: balance` to fix `widow-y` headlines, `scroll-snap-type/scroll-snap-align` for carousels, plus `aspect-ratio`, `overscroll-behavior`, inset, gap, `pointer-events: none`, and `:is()`. I especially liked the `overscroll-behavior` tip to stop scroll chaining and the aspect-ratio note (no more padding hacks!).

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/2025/10/screenshot-1440x900-1759844655602.webp)](https://agentset.ai/?ref=tailwindweekly.com)

### [Agentset](https://agentset.ai/?ref=tailwindweekly.com)

**Agentset** is the fastest way for developers to build production-ready RAG apps without drowning in boilerplate. It gives you hybrid search, reranking, automatic citations, and deep research out of the box — all through clean JavaScript and Python SDKs. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2025/10/screenshot-1366x768-1759844685446.webp)](https://patterncraft.fun/?ref=tailwindweekly.com)

### [Pattern Craft](https://patterncraft.fun/?ref=tailwindweekly.com)

This is a library of 241 professional-grade patterns and gradients, all crafted with modern CSS and Tailwind, with live previews and one‑click copy of the ready‑to‑use code. You can tap/hover to grab variants like radial glows, grids, aurora blends, and zigzag lines, then drop them straight into your project. Definitely helpful if you want polished backgrounds fast without fussing in Figma or hand‑tuning CSS.

## **👌 Cool Stuff**

[**Tail Lens**](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com) \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

[**Mediabunny**](https://mediabunny.dev/?ref=tailwindweekly.com) – A JavaScript library to read, write & convert video/audio in-browser with WebCodecs, fast and lightweight.

---

[**Request Mirror**](https://request-mirror.ohdear.app/?ref=tailwindweekly.com) – A tool to mirror & inspect HTTP requests with clean JSON, all methods, headers, body, params, and no rate limits.

---

[**OverType**](https://overtype.dev/?ref=tailwindweekly.com) – A markdown editor to type in a textarea with live preview—native UX, no build, no ContentEditable, no VDOM.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #199: Dark Mode for Tailwind Plus, “Tailwind CSS by Example” Course, and Inclusive Design Tips 🌙
URL: https://tailwindweekly.com/issue-199/
Last updated: 2025-10-04T12:00:40.000Z
Hello folks, long time no see 👋

This summer, I decided to take a break from the newsletter to focus on my health, and after plenty of rest, I'm back to our regular schedule 😄.

## **🌟 News**

Here's what we missed since our last issue!

![](https://tailwindweekly.com/content/images/2025/10/Gy-9b2QWUAEzVCD.jpeg)

### “[Tailwind CSS by Example](https://tailwindcss.com/course?ref=tailwindweekly.com)” is coming ✨

Adam [announced](https://x.com/adamwathan/status/1958996192630612137?ref=tailwindweekly.com) an in-depth, real-world v4 course and it looks like its gonna be very hands on. We’re talking full flows like beautiful marketing pages, mobile-optimized UIs, and even a checkout with custom form elements, all built from scratch and pixel-perfect. 

What’s extra nice is the thinking he’ll share along the way: how to break designs into composable parts, when to write custom CSS (and how), and how he approaches component APIs so you can build faster with fewer regrets. He’s targeting a fall release, with a [waitlist](https://tailwindcss.com/course?ref=tailwindweekly.com) for early previews and behind-the-scenes updates. 

![](https://tailwindweekly.com/content/images/2025/10/image.png)

### Dark mode is [here](https://x.com/adamwathan/status/1954906405711815068?ref=tailwindweekly.com) for Tailwind Plus 🌙

This one’s been a long time coming! Every single application UI and marketing block in [Tailwind Plus now has full dark mode support](https://tailwindcss.com/plus/changelog?ref=tailwindweekly.com#2025-08-11). Even better, there’s a handy picker that lets you toggle between light, dark, or system modes so you can grab the exact code snippet your project needs. The team really went the extra mile fine-tuning colors and hierarchy so the dark experience feels just as polished as the light one. 

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com)

**Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/2025/10/screenshot-1366x768-1759539793708.webp)](https://www.smashingmagazine.com/2025/06/designing-for-neurodiversity/?ref=tailwindweekly.com)

### [Designing For Neurodiversity](https://www.smashingmagazine.com/2025/06/designing-for-neurodiversity/?ref=tailwindweekly.com)

This is a fascinating intro to designing for neurodiversity. Instead of treating neurodivergent folks as edge cases, it argues that everyone experiences the web differently, so accessibility should be baked in from the start, not tacked on at the end. There are also a bunch of practical resources and toolkits to help you make your designs more inclusive, whether you’re thinking about dyslexia, ADHD, autism, colorblindness, or just good UX in general. If you want to build better, kinder digital experiences (and have a few new resources for your bookmark folder), this is definitely worth your time.

### [A Better API for the Intersection and Mutation Observers](https://css-tricks.com/a-better-api-for-the-intersection-and-mutation-observers/?ref=tailwindweekly.com)

If you’ve ever found the native `ResizeObserver`, `MutationObserver`, or `IntersectionObserver` APIs a bit clunky to work with then this one is for you. You'll see how to refactor those verbose setups into much simpler, reusable functions you can drop into any project. You’ll not only get practical, copy-paste-ready code for each observer (with both callback and event-based approaches), but also a clear walkthrough of their disconnect/unobserve methods and all their options, so you finally understand what’s actually happening under the hood. 

### [Partial Keyframes](https://www.joshwcomeau.com/animation/partial-keyframes/?ref=tailwindweekly.com)

The article walks through how you can create fade-in and fade-out effects that adapt to each element’s current state, combine multiple animations on the same property, and even use CSS variables inside `keyframes` (seriously, you can make an animation that’s different for every element, just by setting a variable!). There’s a bunch of practical demos, a fun playground to tinker in, and some bonus tips on how to take your CSS animations to the next level. 

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/2025/10/screenshot-1366x768-1759540061314.webp)

### [Peasy](https://peasy.so/?ref=tailwindweekly.com)

Peasy is the fast, lightweight analytics tool built for web developers who want actionable insights without the clutter. Just drop in their <3kb script, and you’re set with a privacy-first dashboard that’s easy to navigate, cookie-free, and packed with real-time data. 

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/2025/10/screenshot-1440x900-1759540152167.webp)](https://tweakcn.com/?ref=tailwindweekly.com)

### [tweakcn](https://tweakcn.com/?ref=tailwindweekly.com)

If you’re using `shadcn/ui` and want your app to feel more intentional without wrestling tokens all day, this visual theme editor is a treat. You get a real-time preview, Tailwind v4 & v3 support, exportable code, and precise controls for colors, typography, radius, spacing, and shadows *and* plus a built-in contrast checker so you don’t ship unreadable combos. 

## **👌 Cool Stuff**

[**Tail Lens**](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com) \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

[**Loccy**](https://loccy.dev/?ref=tailwindweekly.com) – Effortlessly manage app translations with AI-powered localization for web, mobile, and desktop projects.

---

[**Mossaik**](https://mossaik.com/?ref=tailwindweekly.com) – Instantly create stunning, customizable SVG wave backgrounds to boost your website’s visual appeal.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #40: New Tailwind Labs employee & Tailwind UI update!
URL: https://tailwindweekly.com/issue-40/
Last updated: 2025-09-30T09:09:26.000Z
Hello folks!

First off, let’s welcome [David Luhr](https://twitter.com/david%5Fluhr?ref=tailwindweekly.com) to the Tailwind Labs family! Check out the post in the news section for the whole story!

We also got blessed with a Tailwind UI update with 9 new additions, I particularly liked the new “Detail Screen” design, very clean.

Now, here’s this week’s sponsor:

⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

## 🌟News

The Tailwind Labs got a new member of the family! Go say hi to [David Luhr](https://twitter.com/david%5Fluhr?ref=tailwindweekly.com), and be sure to check out [the full story](https://blog.tailwindcss.com/welcoming-david-luhr-to-tailwind-labs?ref=tailwindweekly.com). One spoiler, it’s thanks to him we have the new \`ring\` utility in v2.0!

We also got another Tailwind UI update, here’s what’s new:

- 1 new [Home Screen](https://tailwindui.com/components/application-ui/page-examples/home-screens?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Detail Screen](https://tailwindui.com/components/application-ui/page-examples/detail-screens?ref=tailwindweekly.com) example to the Application UI package
- 2 new [Multi-Column Layout](https://tailwindui.com/components/application-ui/application-shells/multi-column?ref=tailwindweekly.com) examples to the Application UI package
- 1 new [Section Heading](https://tailwindui.com/components/application-ui/headings/section-headings?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Card Heading](https://tailwindui.com/components/application-ui/headings/card-headings?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Stacked List](https://tailwindui.com/components/application-ui/lists/stacked-lists?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Tabs](https://tailwindui.com/components/application-ui/navigation/tabs?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Navbar](https://tailwindui.com/components/application-ui/navigation/navbars?ref=tailwindweekly.com) example to the Application UI package

## 📚Learning of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/32753bea-5ab8-4bb0-abd6-bb746acf165e/image-19.png?t=1738083342)

### [How to install Tailwind CSS v2.0 using Ruby on Rails](https://web-crunch.com/posts/how-to-install-tailwind-css-2-using-ruby-on-rails?ref=tailwindweekly.com)

For the ruby folks, this is an updated guide that uses v2.0, I particularly liked that it gives you the PurgeCSS configuration and shows you how to update your \`layout\` file. Very useful if you’re starting from scratch.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1459e04b-d247-44ba-b36b-3cbd3bc5a799/image-20.jpg?t=1738083343)

### [Campamentos ALYAX 2020](https://alyax.mx/campamentos/?ref=tailwindweekly.com)

I know, its in Spanish but bear with me. This week’s showcase is a website for a camping program for kids. Why am I featuring it? Because it looks awesome! The great use of bright colors, the clean information organization and the images really sold it for me.

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/26ddc602-d9eb-4fe2-83b5-d49034f50d88/image-21.png?t=1738083343)

### [tailwindcss-box-shadow](https://github.com/cossssmin/tailwindcss-box-shadow?ref=tailwindweekly.com)

First plugin recommendation in quite a while eh? This one solved a very particular problem, it generates standard box-shadow utilities, without CSS variables. So if you’re working with emails or even internet explorer, this is for you.

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?status=accepted&expires=1645135460&p%5Fsid=103161&p%5Faid=124142&p%5Flink=3094&p%5Ftok=9c9e340f-f817-47e9-b07b-d4db1c314f07&ref=tailwindweekly.ongloat.com), the tool is still in its early stages but it looks very promising.

---

Need to build a quick marketing page for your next project? Then try out [Tails](https://tailwindweekly.link/tails?ref=tailwindweekly.com)! Tails is the ultimate drag'n drop page builder built for TailwindCSS, they have a great selection of components (over 120+), let you export your code, and have very affordable pricing.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4f5db50c-2f28-4e50-9551-9d217dad3f17/coffee.png?t=1738083343)
### Tailwind Weekly #198: Tailwind Insiders Launch, Maizzle v5 is A Game Changer, and More Dev Tools 🚀
URL: https://tailwindweekly.com/issue-198/
Last updated: 2025-09-20T23:04:47.000Z
Hello folks!

What a week! Tailwind CSS just dropped their first-ever [sponsorship](https://tailwindcss.com/sponsor?ref=tailwindweekly.com) program, and it's way more interesting than your typical "support us" setup. We're talking private Discord access, custom AI rules, and behind-the-scenes content that'll make any Tailwind enthusiast pretty happy.

## **🌟 News**

[![](https://tailwindweekly.com/content/images/image-334.jpg)](https://tailwindcss.com/sponsor?ref=tailwindweekly.com)

****Tailwind CSS just [launched](https://x.com/adamwathan/status/1941162664652411106/photo/1?ref=tailwindweekly.com) their [sponsorship](https://tailwindcss.com/sponsor?ref=tailwindweekly.com) program 🎉**

Adam and the team are calling it "*Tailwind Insiders*" and it's packed with some genuinely useful perks that go way beyond just supporting the project.

**What makes this interesting:**

- **Private Discord access** \- This is the big one for me. Adam mentioned it's already got a way better vibe than the massive public servers, and he's planning to share work-in-progress stuff there. That's pretty exciting if you're into seeing behind-the-scenes development!
- **AI rules that actually work** \- You get access to Adam's custom Cursor/Claude rules that make LLMs stop generating terrible Tailwind code. If you've ever fought with AI trying to use outdated syntax, you'll appreciate this 😅
- **Custom VS Code themes** \- Four Tailwind-inspired themes based on what they use on the website. Adam says he's been using the "*Dark (Enhanced)*" one for years and can't switch to anything else.
- **Raycast extension** \- Super handy for quick lookups like getting CSS for specific classes, checking specificity, finding the nearest Tailwind color for hex codes, or converting pixel values to Tailwind utilities.
- **Early access** \- Pre-release docs and behind-the-scenes source code + Figma files for all those little demos they build for social media and YouTube.

Honestly, even if you're not a huge Tailwind fanboy, the Discord community alone sounds like it could be worth it. There's something appealing about being part of a smaller, more focused group where the actual team is actively participating and sharing their process.

![](https://tailwindweekly.com/content/images/image-335.png)

---

Now let’s talk about updates in the ecosystem!

**[VS Code Extension v0.14.24](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss&ref=tailwindweekly.com)**

**Theme Namespace Highlighting Fixed**

Previously, using theme namespaces could cause syntax highlighting issues.

The extension now properly highlights code when you use theme namespaces inside `--value()` and `--modifier()`. This means your custom CSS variable references like `--value(--var-spacing)` won't break the pretty colors anymore.

It's a small fix, but if you're working with custom theme values, you'll appreciate having proper syntax highlighting back.

**[Maizzle v5](https://maizzle.com/?ref=tailwindweekly.com)**

If you're building HTML emails with Tailwind CSS, Maizzle 5 is a game-changer. Here's what launched with v5:

**The Big Stuff**

*10x Faster Local Development*\* Remember waiting forever for your email templates to compile? Those days are gone. The new dev server with Hot Markup Replacement™ (HMR) makes development blazingly fast.

*Modern Tooling*

- `npx create-maizzle` \- Start a new project in seconds
- Revamped CLI with better commands
- Streamlined configs that actually make sense

*Better CSS Support*   
Finally, you can use modern CSS features like:

- CSS variables (`var()`)
- `calc()` functions
- Better handling of color opacity modifiers (important for Gmail!)

*New Template Tags*

- `<env:?>` \- Conditional rendering based on environment
- `<template>` \- Better template composition

*Content Source Globs* You can now use glob patterns to specify which templates to build. Way more flexible than the old system.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com)

****Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-336.jpg)](https://github.com/spatie/laravel-mailcoach-sdk?ref=tailwindweekly.com)

### **[Tailwind is the worst form of CSS, except for all the others](https://www.mux.com/blog/tailwind-is-the-worst-form-of-css-except-for-all-the-others?ref=tailwindweekly.com)**

This beautiful piece dives deep into why Tailwind CSS sparks such strong opinions, both good and bad, and gives a really fair look at both sides. The author has years of hands-on experience and totally gets why some people see Tailwind’s “opinionated” approach as a pain, there’s a learning curve, the classes can get long and messy, and adding another build step isn’t always fun. But at the same time, they make a strong case for why those opinions actually help teams move faster, avoid decision fatigue, and keep design consistent (which designers love, by the way).

### **[1fr 1fr vs auto auto vs 50% 50%](https://frontendmasters.com/blog/1fr-1fr-vs-auto-auto-vs-50-50/?ref=tailwindweekly.com)**

This is a super practical breakdown of how different values for grid-template-columns, like 1fr, 50%, and auto, actually behave in CSS Grid, even though at first glance they all seem to give you two equal columns. It goes beyond the basics and shows you with real examples (and gotchas!) how things start to diverge when you add column gaps, squeeze in images, or deal with unpredictable text. You’ll see why percentage columns can be awkward, why auto can get weird with text sizing, and why fr units usually feel the most intuitive, but also learn about their surprising quirks, especially with overflowing content.

### **[Optimizing The Critical Rendering Path](https://www.debugbear.com/blog/optimizing-the-critical-rendering-path?ref=tailwindweekly.com)**

The author breaks down the concept of the “critical rendering path”, basically the step-by-step process your browser takes to get actual content on the screen. You’ll learn why certain resources (like HTML, CSS, and sometimes JavaScript or fonts) are considered critical, how tools like Lighthouse help you spot slowdowns, and why optimizing which files load first can seriously boost your page speed (and even your Google rankings). There are also some handy tips about what counts as a critical resource, how to spot render-blocking files, and why extracting and inlining only the CSS needed for what’s visible “above the fold” can make a big difference.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-337.jpg)](https://www.artillery.io/?ref=tailwindweekly.com)

****[Artillery](https://www.artillery.io/?ref=tailwindweekly.com)**

Artillery is a cloud-native, serverless load testing platform built for developers who demand fast, scalable, and reliable systems. Simulate millions of users, test everything from GraphQL APIs to WebSockets, and integrate with your CI/CD and observability stack, all while running distributed, cost-efficient tests directly in your own AWS or Azure account.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-338.jpg)](https://utopia.fyi/clamp/calculator/?ref=tailwindweekly.com)

****[Clamp Calculator](https://utopia.fyi/clamp/calculator/?ref=tailwindweekly.com)**

This fluid token calculator lets you create as many custom fluid tokens as you need, then instantly grab the CSS to drop into your projects. There’s even built-in visualization for tweaking your min and max values, plus extra calculators if you want a more comprehensive setup for type and space. Definitely worth a look if you’re aiming for that perfect balance between flexibility and control in your designs.

## **👌 Cool Stuff**

**[Tail Lens](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com)** \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

**[Mailfrom.dev](https://www.mailfrom.dev/?ref=tailwindweekly.com)** – Easily test, preview, and debug transactional emails in your local development environment.

---

**[BlockAlert](https://linkify.js.org/?ref=tailwindweekly.com)** – Instantly see why your site visitors are blocked and get actionable steps to resolve security triggers fast.

---

**[Amber](https://github.com/amberlang/amber?ref=tailwindweekly.com)** – A modern, type-safe language that compiles to Bash and catches bugs at compile time.

---

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?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #24: New Tailwind-UI components & welcome employee #2!
URL: https://tailwindweekly.com/issue-24/
Last updated: 2025-10-01T08:32:23.000Z
Hello folks! We have another week of cool new stuff, starting with the release of the long-awaited *content sections* components for Tailwind UI and a new addition to the *Tailwind Labs* team! Be sure to send a warm hello to [Simon Vrachliotis](https://twitter.com/simonswiss?ref=tailwindweekly.com) ❤️.

We also got a new stream where Adam prototyped a dark theme for Tailwind, definitely a must watch!

Now, onto the usual 😁.

## 🌟News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9c04adda-7c0e-4ba4-a63e-6bfbbbd92826/simon--1-.jpg?t=1738083348)

### [Simon Vrachliotis Joins Tailwind Labs](https://blog.tailwindcss.com/simon-vrachliotis-joins-tailwind-labs?ref=tailwindweekly.com)

Here’s the official announcement of employee #2, definitely check it out, looks like Simon has been an early adopter and contributor long since anybody else!

We also got New Tailwind UI Components!

One important note tho, right from the announcement:

*It’s important to note that these new content sections *rely on Tailwind CSS >= v1.5.1, and @tailwindcss/ui >= 0.4.0*. Make sure you update those dependencies before trying out these new components in your projects!*

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/219fded2-5891-4a52-b02f-45a7eb7c05fa/new--1-.jpeg?t=1738083348)

New "Content Sections" components (click image for link)

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/99a6511a-fe04-43ca-9951-b506555ed2b6/newa--1-.jpeg?t=1738083348)

New "Sidebar Navigation" components (click image for link)

We also got a new stream! In this one we got to see how to implement dark mode for Tailwind in a very simple but powerful way. [Here’s the code](https://github.com/adamwathan/tailwindcss-dark-mode-prototype?ref=tailwindweekly.com) for the curious, I bet this will be implemented officially on Tailwind very soon.

## 📚Article of the week

### [How I Quit Worrying and Learned to Love TailwindCSS](https://highlandsolutions.com/blog/how-i-quit-worrying-and-learned-to-love-tailwindcss?ref=tailwindweekly.ongloat.com)

Really loved this one! This is a dev who was a die-hard [BEM](http://getbem.com/introduction/?ref=tailwindweekly.com) fan until he used Tailwind, here’s my favorite quote:

*But naming CSS classes is a chore. How do you describe a complex element in two words, while maintaining the flexibility of what that could be? Having to do that over and over is personally a huge bottleneck in my code-writing, and Tailwind eliminates that…*

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/dfe7d885-2cd4-46e7-a4af-6f9913e11125/hwkin--1-.png?t=1738083349)

### [Stephen Hawking's Homage](https://www.hawking.org.uk/?ref=tailwindweekly.com)

We got a visual treat this week! Adam tweeted about the new Stephen Hawking homage website being made with Tailwind and I was impressed with the site. Here you’ll see lots of videos and full bleed images with on point typography and classic colors.

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4392ce81-a234-439b-998c-340a15bad6d9/image-61.png?t=1738083349)

### [Animate.css](https://animate.style/?ref=tailwindweekly.com)

This week Adam got to work on [adding animation support](https://github.com/tailwindlabs/tailwindcss/pull/2068?ref=tailwindweekly.com) for Tailwind, but for the impatient, here’s a very cool library you can use in the meantime. In the author’s words Animate.css is:

*a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.*

Very use to use and it’s practically plug and play. I would recommend not using the CDN tho, so you can take advantage of PurgeCSS.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c9cb8340-f961-4f10-9958-005832364f5d/coffee.png?t=1738083350)
### Tailwind Weekly #197: Package Updates, Cool Tech Deep-Dives, and New Anchor Plugin Magic ✨!
URL: https://tailwindweekly.com/issue-197/
Last updated: 2025-08-14T11:37:56.000Z
Hello folks!

I decided to try something new for the news section: package updates! I’ll be documenting the latest updates to the official Tailwind CSS packages since the last issue. I hope you find it useful 😄 !

Let's dive in!

## **🌟 News**

Here's what's new in the Tailwind ecosystem:

#### **Tailwind CSS Core v4.1.11**

**Vue 3 Developers, Rejoice!** 🎉  
The migration script was getting a bit too eager and changing your Vue 3 event emissions. You know how `emit('blur', props.modelValue)` was mysteriously becoming `emit('blur-sm', props.modelValue)`? Yeah, that was annoying. It's fixed now.

**Clojure/ClojureScript Support Gets Better**  
If you're using Tailwind with Clojure or ClojureScript, class extraction is now more accurate. Keywords like `:hover:text` were getting split incorrectly before, but now they're properly recognized as complete variant-prefixed classes.

**Vite 7 Support is Here**  
Using Vite 7? The `@tailwindcss/vite` plugin now supports it! Just a heads up though - you'll need Node 20.19 or 22.12 minimum since Node 18 support was dropped.

**Better CLI Documentation**  
The `--watch=always` flag is now properly documented in the CLI usage. Small but helpful!

#### **Prettier Plugin v0.6.13**

**Svelte Files Won't Break Anymore**

Previously your Svelte files could completely break if you had duplicate classes in template strings. That's fixed now. The plugin will preserve duplicate classes in string literals without breaking your project.

**Plugin Compatibility Improvements**

If you're using multiple Prettier plugins (like `prettier-plugin-multiline-arrays` and `prettier-plugin-jsdoc`), they now play nice together with the Tailwind plugin. The load order has been optimized to prevent formatting conflicts.

#### **VS Code Extension v0.14.23**

**Better Syntax Highlighting for @theme**

The `@theme` at-rule now has proper syntax highlighting for:

- CSS variables
- Comments
- Nested at-rules

It's one of those small improvements that makes your code look cleaner and easier to read.

**Astro Support Improvements**

If you're using Astro, the extension now properly detects class functions and class attributes inside code fences. This means better IntelliSense support when you're working with JavaScript blocks in your Astro files.

**That's it for this update!** Nothing groundbreaking, but these fixes will definitely make your workflow smoother.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-330.jpeg)](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form)

****Stop wrestling with markup and focus on what matters—your business logic. We transform your designs into pixel-perfect Tailwind CSS code.**

Led by seasoned developers Vivian and Daniela, we specialize in converting your PSD, Figma, Adobe XD, and Sketch files into good, responsive, and maintainable Tailwind CSS markup.

Complete our quick [3-minute form](https://design2tailwind.com/?ref=tailwindweekly.com#quote-form) and receive a tailored quote within 24 hours.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-331.jpg)](https://gomakethings.com/the-css-layer-at-rule/?ref=tailwindweekly.com)

****[The CSS ](https://gomakethings.com/the-css-layer-at-rule/?ref=tailwindweekly.com)`@layer`[ at-rule](https://gomakethings.com/the-css-layer-at-rule/?ref=tailwindweekly.com)**

Chris breaks down how the new CSS `@layer` at-rule can help you control which styles take priority, even if you’re not using a build tool at all. He explains the age-old cascade problem and shows how `@layer` lets you group your CSS into things like “core” and “utilities” so your overrides always work the way you want, no matter what order your files load.

### **[Why JPEG Became the Web's Favorite Image Format](https://spectrum.ieee.org/jpeg-image-format-history?ref=tailwindweekly.com)**

Learn how JPEG didn’t just show up overnight, it was painstakingly developed as a true standard by a committee of big industry players (unlike the GIF, which was more of a one-person show), and that openness helped it take over as the go-to image format. The piece also explains what actually happens when you compress a JPEG, why it handles photos so much better than GIFs or PNGs, and even dives into the weird patent battles that nearly derailed its rise.

### **[Passkeys for Normal People](https://www.troyhunt.com/passkeys-for-normal-people/?ref=tailwindweekly.com)**

This article is a super practical, real-world walkthrough of what passkeys are, why you should care, and how they actually work across different services like WhatsApp, LinkedIn, and Ubiquiti. The author kicks things off by showing how even two-factor authentication with authenticator apps can still leave you open to phishing attacks (with a very relatable personal story), and then dives into how passkeys offer a much more “phishing-resistant” way to log in. You’ll see step-by-step how to set up passkeys on your devices, how you can store them in password managers like 1Password to sync across mobile and desktop, and even how hardware keys like YubiKey add an extra layer of security.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-332.jpg)](https://echobell.one/?ref=tailwindweekly.com)

****[Echobell](https://echobell.one/?ref=tailwindweekly.com)**

Echobell is a robust alerting platform designed to empower web developers with flexible notification options, including phone calls for urgent updates, webhook integrations for automation, and email triggers for alert management.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-333.jpeg)](https://github.com/toolwind/anchors?ref=tailwindweekly.com)

****[Anchors for Tailwind CSS](https://github.com/toolwind/anchors?ref=tailwindweekly.com)**

This Tailwind plugin lets you declaratively define anchors and position elements relative to them, all using readable, composable utilities like `anchor/{name}` and `anchored-{side}/{name}`. You get granular control over offsets, conditional visibility, fallback positioning, and even built-in View Transitions support for animations. The plugin is fully JIT-compatible, plays nicely with both Tailwind v3 and v4, and has clever syntax to make working with CSS variables and anchor names feel intuitive.

## **👌 Cool Stuff**

**[Tail Lens](https://taillens.io/?aff=lVeE1&ref=tailwindweekly.com)** \- A browser tool to tweak classes and preview the results instantly in-browser, then copy the final classes straight into your code for a guaranteed productivity boost.

---

**[syntax-highlight-element](https://www.npmjs.com/package/syntax-highlight-element?ref=tailwindweekly.com)** – Use the CSS Custom Highlight API for fast, customizable syntax highlighting with native web components.

---

**[Sites](https://appwrite.io/sites?ref=tailwindweekly.com)** – An open-source Vercel alternative to build, deploy, and scale web apps with integrated backend, SSR, and DDoS protection.

---

**[Brief](https://brief.dev/?ref=tailwindweekly.com)** – A PHP library to build stylish, extensible email templates with Tailwind CSS and modern components.

---

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) 😁.
### Tailwind Weekly #196: ARIA mental models, v4 instal for Nuxt, and clever container queries 🤓
URL: https://tailwindweekly.com/issue-196/
Last updated: 2025-08-14T15:36:01.000Z
Hello folks!

No major news on the Tailwind front, the Labs team is chilling this summer with a well-deserved rest.

But we still got fancy stuff to show, and I hope you like this week’s sponsor 😃

Let's dive in!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-326.jpeg)](https://taillens.io/?aff=lVeE1&&ref=tailwindweekly.com)

****#1 Dev Tool for Tailwind CSS Developers**

Tailwind developers run into the same loop every day. Say you want to adjust the margin for a button. So you set mt-2 in the code editor, save, reload the page, notice the space is wrong, go back, try mt-4, reload again, and repeat.

This back-and-forth is the main thing that slows them down. The task isn’t hard, it's just repetitive. So even tiny fixes start to inherently consume time.

Tail Lens solves this problem. Tail Lens is the fastest way to work with Tailwind CSS. It lets you tweak Tailwind class, get smart suggestions, search classes and preview changes all in the browser without tabbing to the code editor.

**Key features**

- Smart class alternatives
- Search & preview any class
- Custom config support
- Search by CSS property
- Undo, redo support
- Efficient element navigation
- Tailwind v3, v4 support
- Layout & spacing guidelines & more

You can try it live here: [https://taillens.io](https://taillens.io/?aff=lVeE1&&ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-327.jpg)](https://www.smashingmagazine.com/2025/06/what-i-wish-someone-told-me-aria/??ref=tailwindweekly.com)

****[What I Wish Someone Told Me When I Was Getting Into ARIA](https://www.smashingmagazine.com/2025/06/what-i-wish-someone-told-me-aria/??ref=tailwindweekly.com)**

Eric breaks down all the mental models and gotchas that nobody talks about when they're teaching accessibility basics. He explains why your perfectly valid ARIA might not work with certain screen readers, why adding more ARIA doesn't automatically make things more accessible, and why the official ARIA Authoring Practices Guide can actually lead you astray. The best part is how he explains the historical context (ARIA was built in 2006 for Windows XP-era interactions) which makes all those weird keyboard navigation requirements finally make sense!

### **[Installing Tailwind CSS v4 on Nuxt 3](https://masteringnuxt.com/blog/installing-tailwind-css-v4-on-nuxt-3?friend=MOKKAPPS&&ref=tailwindweekly.com)**

What I love about this guide is how straightforward it is: just install the package, add the Vite plugin, import Tailwind in your CSS, and you're basically done. No complex config files or wrestling with PostCSS like the old days.

### **[Container Query for “is there enough space outside this element?”](https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/??ref=tailwindweekly.com)**

This is a brilliant little CSS trick that solves a problem you probably didn't even know you had! Chris shows you how to use container queries to detect if there's enough space outside an element to place things like pagination arrows. Instead of hardcoding breakpoints or guessing, you can actually test whether the viewport has room for your arrows plus some gap space, and if not, move them inside the component instead. The magic happens by combining viewport units with container queries - basically asking "is my container smaller than the viewport minus the space I need for arrows?" It's one of those techniques that feels almost too clever, but once you see it working, you'll probably find a dozen places where you could use this approach.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-328.jpg)](https://www.helpkit.so/?ref=tailwindweekly.com)

****[Help Kit](https://www.helpkit.so/?ref=tailwindweekly.com)**

HelpKit is the no-code solution for web developers who want to transform their Notion documentation into professional knowledge bases and help centers without leaving their favorite writing environment. Simply connect your existing Notion pages and get a blazingly fast, SEO-optimized knowledge base with custom domains, embedded widgets, and professional branding in minutes.

[![](https://tailwindweekly.com/content/images/image-329.jpg)](https://www.uifonts.app/?ref=tailwindweekly.com)

****[uifonts.app](https://www.uifonts.app/?ref=tailwindweekly.com)**

This is such a clever tool! UI Fonts lets you test and preview fonts in real-time across actual UI components instead of just boring Lorem Ipsum text. You can see how your typography choices look in forms, cards, navigation, modals, basically all the real components you're actually building. What I love is that you're not just picking fonts in isolation, you're seeing them in context with actual interface elements. It's perfect for when you need to convince clients or stakeholders that a font choice actually works in practice, not just in theory.

## **👌 Cool Stuff**

**[Level up with Tailwind CSS v4](https://gumroad.com/a/150955123/sbcrk??ref=tailwindweekly.com)** – A comprehensive eBook and video course covering advanced Tailwind concepts, tips, and real-world examples.

---

**[Claude Squad](https://smtg-ai.github.io/claude-squad/??ref=tailwindweekly.com)** – A CLI tool to manage multiple AI code assistants like Claude and Aider in isolated git workspaces

---

**[Zero](https://0.email/?ref=tailwindweekly.com)** – An AI-native email client with keyboard shortcuts, smart summaries, and natural language commands to process emails faster.

---

**[LicenseDNS](https://www.licensedns.net/?ref=tailwindweekly.com)** – A DNS-based software licensing system that uses DNSSEC for cryptographic verification without complex implementations.

---

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) 😁.
### Tailwind Weekly #195: Adam Talks AI, Dataviz Accessibility, and New CSS Superpowers 🤩
URL: https://tailwindweekly.com/issue-195/
Last updated: 2025-08-14T15:55:05.000Z
Hello folks!

No big news this week, but I got a tidbit for you: Adam joined his good friend Justin Jackson on his podcast and [discussed](https://www.youtube.com/watch?v=X3yfVo2oxlE&&ref=tailwindweekly.com) how the Tailwind Labs team uses AI in their workflow. They dive into the real-world ups and downs of working with AI as experienced devs, from Adam’s early skepticism to how he now treats AI tools like Cursor as an “automation sidekick” for all the annoying parts of coding. You’ll some fresh perspective on why AI actually helps seasoned builders ship more, not less (plus where it still totally drops the ball!).

Let's dive in!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-322.jpeg)](https://outlier.ai/coding/front-end/nwltr/hc??ref=tailwindweekly.com)

****💰 Frontend Devs: Earn Up to $50/Hour Training AI (Remote & Flexible)**

Tired of the 9-to-5 grind? Your HTML, CSS, and JavaScript skills can now unlock a lucrative side hustle with **Outlier AI**. You'll review AI-generated code, write prompts, and evaluate UI/UX designs, basically helping train the next generation of coding AI. No AI experience needed, just your existing frontend skills!

The best part? **Weekly payouts**, fully remote work, and you set your own schedule (most devs work 5-10 hours/week). While other developers worry about AI replacing them, you'll be the one training it, and getting paid well to do it. Featured in Forbes and trusted by innovative companies worldwide.

[Start earning with your frontend skills →](https://tiny.outlier.ai/y9dktc42??ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-323.jpg)](https://fossheim.io/writing/posts/2024-dataviz-a11y-elections/??ref=tailwindweekly.com)

****[Dataviz accessibility principles, demonstrated by the 2024 presidential election dashboards](https://fossheim.io/writing/posts/2024-dataviz-a11y-elections/??ref=tailwindweekly.com)**

This curious piece dives deep into the accessibility of major news sites’ election maps and charts, testing everything from zoomability and keyboard navigation to screen reader support and proper alt text, and finds that, unfortunately, most dashboards are still riddled with issues that leave out users with disabilities. You’ll see real examples of common mistakes like sticky headers blocking content when zoomed, color-only cues that fail for colorblind users, tooltips inaccessible to keyboard and screen reader users, and navigational quirks that make extracting insights much harder if you don’t use a mouse. There’s also a balanced take on why these problems persist, not just individual developer slip-ups, but larger systemic and organizational hurdles, as well as practical advice and resources for anyone who wants to improve. I

### **[Easier layout with margin-trim](https://webkit.org/blog/16854/margin-trim/??ref=tailwindweekly.com)**

The author introduces a new CSS property called `margin-trim`, which lets you easily remove any unwanted margins that touch the edge of a container, no matter how deeply nested the content is. The article breaks down common layout headaches (like combining padding and margins and ending up with weird extra space), shows how `margin-trim` makes everything cleaner and more predictable, and even walks through some practical code examples and browser support tips. You’ll come away knowing when to use `margin-trim`, how it compares to older hacks with `:first-child` and `:last-child`, and how to write fallbacks for browsers that don’t support it yet. I

### **[Securing a Form on the Internet: Still Pretty Difficult](https://serverascode.com//2025/04/12/securing-a-form-on-the-internet.html??ref=tailwindweekly.com)**

The author does a great job of breaking down why something as simple as putting a “contact us” form on your website can end up being way more complicated than you’d think. It walks through all the things you have to worry about, security, spam, bots, hosting, data storage, and more, and makes a strong case for why it’s usually better to just pay for a form provider instead of trying to build your own (unless you really want to deal with all the headaches).

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-324.jpg)

****[Clerk](https://clerk.com/??ref=tailwindweekly.com)**

Clerk is the all-in-one authentication solution designed for web developers who demand modern security, seamless integrations, and an effortless developer experience. With robust SDKs for popular frameworks, fast passcode delivery, and easy multi-tenancy management, Clerk keeps your projects secure and scalable while fitting right into your existing stack. 🎁 Resource

[![](https://tailwindweekly.com/content/images/image-325.jpg)](https://oxbowui.com/?atp=vivgui&&ref=tailwindweekly.com)

****[Oxbow UI](https://oxbowui.com/?atp=vivgui&&ref=tailwindweekly.com)**

Oxbow UI is a massive library, think 400+ clean, responsive, actually good-looking components and UI blocks, all built with Tailwind CSS. I love that you can just copy-paste what you need (landing page layouts, buttons, navs, ecommerce bits, you get the idea), tweak a brand color, and move on with your life, no weird hacks, no subscriptions, and no fighting with stubborn styles. Plus, they promise everything works well on any device, so you don’t have to stress about breakpoints. It’s a one-time payment for forever access, which honestly makes it a solid investment if you want to ship polished stuff without wasting days on boilerplate.

## **👌 Cool Stuff**

**[Tailscan](https://tailscan.com/?ref=tailwindweekly&) –** Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

---

**[Polygonjs](https://polygonjs.com/??ref=tailwindweekly.com)** – A visual node-based editor to build complex 3D web experiences with no coding required.

---

**[OctAPI](https://marketplace.visualstudio.com/items?itemName=HasbiSabah.octapi&&ref=tailwindweekly.com)** – Effortlessly explore, manage, and favorite your API routes with smart detection and instant navigation in VS Code.

---

**[LocalSend](https://localsend.org/??ref=tailwindweekly.com)** – Free, open-source app to securely send files to nearby devices across all major platforms.

---

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) 😁.
### Tailwind Weekly #194: New Compass Template, Vanilla Headless UI Teaser, and Dark Mode Updates Coming Soon! 🚀
URL: https://tailwindweekly.com/issue-194/
Last updated: 2025-08-14T16:12:59.000Z
Hello folks!

Sorry for the silence the past few weeks, I was having major health issues but I’m back now!

Since the last issue, we got a brand new template, a promising upcoming Headless UI update, and possible dark mode support coming soon to Tailwind Plus!!

Let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-317.jpeg)

[](https://tailwindcss.com/blog/2025-05-14-compass-course-starter-kit??ref=tailwindweekly.com)[Compass, the new Tailwind course platform starter kit, just dropped!](https://tailwindcss.com/blog/2025-05-14-compass-course-starter-kit??ref=tailwindweekly.com) 🚀

[Compass](https://tailwindcss.com/plus/templates/compass??ref=tailwindweekly.com) is basically a full-featured starter kit for anyone wanting to publish an online course, and it shows off a ton of new ideas you can absolutely steal for your own projects. It’s also a free update for Tailwind Plus folks.

There are some really clever features packed in here. For one, the course videos support a custom mini-player: scroll and it’ll pop down to the corner so you can watch and read at the same time (and yes, there’s a whole bit about browser APIs and data attributes here, super neat if you’re into advanced UI tricks). There’s also an awesome section for interview-style lessons, with automatically parsed video transcripts from VTT files, makes adding speaker-labeled transcripts way friendlier, especially if you ever end up using AI for transcription.

If you want to launch a course, build a learning platform, or just see how the Tailwind team thinks about content-heavy UIs in 2025, give this a look. You can grab the codebase and poke around, or just steal their transcript/image approaches for your next project. Honestly, super inspiring work!

**A new Headless UI is coming** 🤩

Adam and the crew are working on a “vanilla” [version](https://x.com/adamwathan/status/1925977029394022913??ref=tailwindweekly.com) of Headless UI, and it’s all about web components. No React, no Vue… just drop in a single <script> from a CDN and boom—you get access to a whole set of custom elements for things like dropdowns, dialogs, popovers, tabs, and plenty more. And the real kicker? You don’t have to write a line of JS to start building interactive UIs.

**Dark mode coming soon to Tailwind Plus** 🌓

Dan Hollick just shared a [sneak peek](https://x.com/DanHollick/status/1928486023329124499??ref=tailwindweekly.com) of a cool tool he’s been hacking on: a custom script that takes all the new [Tailwind Plus](https://tailwindcss.com/plus??ref=tailwindweekly.com) components and converts them to dark mode using Claude AI. Here’s the wild part: there are around 600 components ‼️ , so doing this by hand would be a serious grind. With this setup, Dan’s hoping to automate the process and seriously speed up getting the entire component library dark mode-ready.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-318.jpeg)](https://outlier.ai/coding/front-end/nwltr/hc??ref=tailwindweekly.com)

****💰 Frontend Devs: Earn Up to $50/Hour Training AI (Remote & Flexible)**

Tired of the 9-to-5 grind? Your HTML, CSS, and JavaScript skills can now unlock a lucrative side hustle with **Outlier AI**. You'll review AI-generated code, write prompts, and evaluate UI/UX designs, basically helping train the next generation of coding AI. No AI experience needed, just your existing frontend skills!

The best part? **Weekly payouts**, fully remote work, and you set your own schedule (most devs work 5-10 hours/week). While other developers worry about AI replacing them, you'll be the one training it, and getting paid well to do it. Featured in Forbes and trusted by innovative companies worldwide.

[Start earning with your frontend skills →](https://tiny.outlier.ai/y9dktc42??ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-319.jpg)](https://www.joshwcomeau.com/css/height-enigma/??ref=tailwindweekly.com)

****[The Height Enigma](https://www.joshwcomeau.com/css/height-enigma/??ref=tailwindweekly.com)**

Ever wondered why setting height: 50% on an element in CSS sometimes just…does nothing? This blog post finally clears up that classic CSS mystery. The author breaks down the difference between how width and height are calculated, turns out, they’re opposites!, and explains why percentage heights only work when the parent has an explicit, “knowable” height. You’ll get practical visuals and analogies for understanding the circular paradox that trips up so many devs, plus real solutions using rem units, Flexbox, and Grid to make layouts behave the way you want.

### **[EASIEST Way to Animate Tailwind](https://www.youtube.com/watch?v=cIjkDmbsHPw&&ref=tailwindweekly.com)**

This video introduces Tailwind Motion, a plugin that brings easy, accessible, pure-CSS animations right into your workflow. You’ll see how to use presets for classic effects, mix and match base animations like scale, opacity, translation, and more, and even customize every detail (think: delays, easing, and hover-pausing) just by stacking classes. There’s also a cool Chrome extension if you want to build animations visually and copy-paste the result. Even better: it’s free, open source, supports Tailwind v4, and feels way more modern than Tailwind Animate.

### **[Tailwind's ](https://css-tricks.com/tailwinds-apply-feature-is-better-than-it-sounds/??ref=tailwindweekly.com)**`@apply`**[ Feature is Better Than it Sounds](https://css-tricks.com/tailwinds-apply-feature-is-better-than-it-sounds/??ref=tailwindweekly.com)**

And looking at the other side of the pond, here’s a interesting topic for you. This piece dives into the often-overlooked `@apply` feature, showing how you can blend Tailwind’s utility-first approach with classic CSS techniques. The author doesn’t sugarcoat their dislike for “vanilla” Tailwind, but they make a compelling case for how `@apply` can act like Sass mixins, letting you define and reuse custom utilities right in your CSS and HTML, including responsive variants. There are practical, real-world examples (like switching between vertical and horizontal layouts or building simple CSS grids) that make everything feel immediately useful, and you get a balanced take on the strengths and limits of this approach.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-320.jpg)](https://plainframework.com/??ref=tailwindweekly.com)

****[Plain Framework](https://plainframework.com/??ref=tailwindweekly.com)**

Plain is a modern Python web framework built for developers who want to ship full-featured products fast, without the bloat. Forked from Django and tested in real SaaS environments, Plain gives you modular packages, from robust models and authentication to first-class Tailwind integration, that you can mix, match, and customize. Whether you're launching a startup, building internal tools, or prototyping a side project, Plain lets you go from local dev to production with a single command and all the batteries you need included.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-321.jpg)](https://lucide.dev/??ref=tailwindweekly.com)

****[Lucide Icons](https://lucide.dev/??ref=tailwindweekly.com)**

Lucide it's a huge collection (over 1,500 SVG icons!) made by the open-source community, and the key here is that everything is crisp, consistent, and easily customizable right out of the box, think color, size, stroke width, you name it. I love that all the icons are super lightweight, tree-shakable (so you only bundle what you use), and you can install Lucide from basically any package manager.

## **👌 Cool Stuff**

**[Tailscan](https://tailscan.com/?ref=tailwindweekly&) –** Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

---

**[Tempest](https://tempestphp.com/??ref=tailwindweekly.com)** – A zero-config PHP framework with modern templating, auto-discovery, decoupled ORM, and frictionless setup.

---

**[Clop](https://lowtechguys.com/clop/??ref=tailwindweekly.com)** – Instantly optimise images, videos, PDFs, and clipboard content for fast sharing and minimal file size on macOS.

---

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) 😁.
### Tailwind Weekly #193: v4.1.6 Migration Tool Updates, CSS Grid Stacking Magic, and Error Message UX 💫!
URL: https://tailwindweekly.com/issue-193/
Last updated: 2025-08-18T08:50:43.000Z
Hello folks!

Summer is almost here, and the Tailwind CSS team is still shipping! We got quite the migration tool update on the latest release, and Robin was kind enough to detail it all 😁.

Let's dive in!

## **🌟 News**

This is an incredible (and long!) thread on how the new v4.1.6 improves the v4 migration tool. It details every new change (with screenshots!) and how it can improve your migration process coming from v3\. I don’t tend to share threads often but this one is a MUST READ.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-313.jpeg)](https://lp.join1440.com/240917/orig??ref=tailwindweekly.com)

****The Daily Newsletter for Intellectually Curious Readers**

[![](https://tailwindweekly.com/content/images/image-314.jpg)](https://lp.join1440.com/240917/orig??ref=tailwindweekly.com)

Join over 4 million Americans who start their day with [1440](https://lp.join1440.com/240917/orig??ref=tailwindweekly.com) – your daily digest for unbiased, fact-centric news. From politics to sports, we cover it all by analyzing over 100 sources. Our concise, 5-minute read lands in your inbox each morning at no cost. Experience news without the noise; let 1440 help you make up your own mind. Sign up now and invite your friends and family to be part of the informed.

[Join for free today!](https://lp.join1440.com/240917/orig??ref=tailwindweekly.com)

## **📚 Learning**

### **[Stop using position absolute — use CSS Grid stacking!](https://www.youtube.com/watch?v=8327%5F1PINWI&ref=tailwindweekly.com)**

This video shows a brilliant solution to that loading button problem we all face. Instead of hacky absolute positioning or opacity tricks that cause accessibility issues, it demonstrates using CSS Grid to stack your button content and spinner in the same space while maintaining the button's width based on its largest content. What makes this approach awesome is that it works even when your loading text is longer than your default text, and it keeps your button fully accessible to screen readers (using visibility instead of opacity). It's one of those "why didn't I think of that?" techniques you'll immediately want to use in your next project.

### **[JavaScript's ??= Operator: Default Values Made Simple](https://www.trevorlasn.com/blog/javascript-nullish-coalescing-assignment-operator??ref=tailwindweekly.com)**

If you're tired of writing clunky if statements to handle default values in JavaScript, you'll love this breakdown of the `??=` operator. This article clearly explains how this ES2021 feature lets you elegantly handle `null/undefined` values without affecting falsy values like empty strings or zero. The code comparisons are particularly helpful, showing exactly why `??=` beats the alternatives for common scenarios in form handling and API data processing. It's one of those small syntax improvements that makes a big difference in writing cleaner, more precise JavaScript that respects all user inputs.

### **[How to write error messages that actually help users rather than frustrate them](https://piccalil.li/blog/how-to-write-error-messages-that-actually-help-users-rather-than-frustrate-them/?ref=tailwindweekly.com)**

This article nails a critical but overlooked aspect of UX that most developers neglect - how to write helpful error messages instead of frustrating ones. I love the practical approach with clear before/after examples showing how to transform robotic "invalid input" messages into actual human guidance. The section warning against cutesy "whoopsie!" messages when users are already frustrated is spot-on. What makes this especially useful for developers is the focus on creating consistent error patterns - something that helps both users and engineering teams. Rather than reinventing error handling with each new feature, the article advocates for documented patterns that can be reused throughout your app.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-315.jpg)](https://laracon.us/?ref=tailwindweekly.com)

****[Laracon 2025](https://laracon.us/?ref=tailwindweekly.com)**

Laracon is the flagship Laravel event crafted for Web Artisans ready to level up their skills and ship with confidence. Join fellow developers July 29-30, 2025, at Denver’s Mission Ballroom for inspiring talks, hands-on learning, and the chance to connect with the PHP community in an energetic, creative setting. Come meet your people, get inspired, and leave ready to build your best work yet.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-316.jpg)](https://originui.com/?ref=tailwindweekly.com)

****[Origin UI](https://originui.com/?ref=tailwindweekly.com)**

If you're a React developer looking to ship faster, Origin UI is a game-changer. This open-source collection offers 500+ Tailwind CSS components you can literally copy and paste into your projects. Just hit ⌘K to find exactly what you need—from complex image croppers and date pickers to the essential buttons and inputs. No need to wrestle with CSS or reinvent UI patterns that already work. The React implementation means you're not just getting static HTML—these are proper components you can easily customize and extend.

## **👌 Cool Stuff**

**[Tailscan](https://tailscan.com/?ref=tailwindweekly&) –** Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

---

**[Fraction.js](https://www.npmjs.com/package/fraction.js?ref=tailwindweekly.com)** – Work with exact fractions in JavaScript to avoid floating-point errors and boost math precision.

---

**[Flighty](https://flighty.com/?ref=tailwindweekly.com)** – Get instant flight updates, delay predictions, and gate changes before the airlines do, all in one app.

---

**[DBCode](https://dbcode.io/?ref=tailwindweekly.com)** – VS Code extension that lets you manage, query, and visualize multiple databases without leaving your editor.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.com).

Want to support the newsletter? You can buy me a coffee with this [link](https://buymeacoffee.com/vivgui?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #192: Colorblind-Friendly Design, Dynamic Layouts, and a Vinyl Music Player Showcase 🎵 🎨!
URL: https://tailwindweekly.com/issue-192/
Last updated: 2025-08-18T09:12:18.000Z
Hello folks!

No major news to report this week, folks, but we have some cool articles using Tailwind CSS as the main tool, I’m sure you’ll like them 😃 .

Let's dive in!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-309.jpeg)](https://magic.beehiiv.com/v1/4d03390d-2481-4299-b949-ffd8b38b4c38?email={{email}}&ref=tailwindweekly.com)

****Start learning AI in 2025**

[![](https://tailwindweekly.com/content/images/image-310.jpeg)](https://magic.beehiiv.com/v1/4d03390d-2481-4299-b949-ffd8b38b4c38?email={{email}}&ref=tailwindweekly.com)

Everyone talks about AI, but no one has the time to learn it. So, we found the easiest way to learn AI in as little time as possible: [The Rundown AI.](https://magic.beehiiv.com/v1/4d03390d-2481-4299-b949-ffd8b38b4c38?email={{email}}&ref=tailwindweekly.com)

It's a free AI newsletter that keeps you up-to-date on the latest AI news, and teaches you how to apply it in just 5 minutes a day.

Plus, complete the quiz after signing up and they’ll recommend the best AI tools, guides, and courses – tailored to your needs.

[Sign up to start learning.](https://magic.beehiiv.com/v1/4d03390d-2481-4299-b949-ffd8b38b4c38?email={{email}}&ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-311.jpg)](https://liamhammett.com/tailwind-for-colourblind-designers?ref=tailwindweekly.com)

****[Seeing Red, or Maybe Green? How Tailwind Helps Colourblind Designers](https://liamhammett.com/tailwind-for-colourblind-designers?ref=tailwindweekly.com)**

Ever struggled with color blindness? This excellent article dives into the challenges of designing when you can’t easily tell colors apart, and shows how Tailwind’s approach, using human-readable color class names like bg-red-500 instead of cryptic codes, makes a real, practical difference. Instead of guessing what “alert-danger” looks like or relying on IDE extensions, you get a predictable, accessible palette that’s easy to read and work with, no memorization required. It’s a super relatable piece if you’ve ever felt at a disadvantage because of color, and honestly, it’s a nice reminder that thoughtful design choices can make tech more inclusive for everyone.

### **[How to write exceptional documentation](https://chrisnicholas.dev/blog/how-to-write-exceptional-documentation?ref=tailwindweekly.com)**

This piece breaks down the different types of docs, like quickstarts, tutorials, how-to guides, explanations, API references, examples, and templates, and shows you how each serves a different kind of user and need. You'll get super practical advice on things like removing friction from onboarding, structuring content so people actually find what they need, and even writing styles that work best for each section. It’s not just theory; you get real-world tips, actionable checklists, and tons of examples from popular dev tools, all focused on making your documentation clear, approachable, and genuinely helpful.

### **[Make your layouts dynamic with Quantity Queries in Tailwind CSS](https://dev.to/skttl/make-your-layouts-dynamic-with-quantity-queries-1h39?ref=tailwindweekly.com)**

If you’ve ever wanted your layouts to automatically adjust based on how many items are inside a container, without writing a bunch of JavaScript, this article is for you. It walks through the clever use of CSS quantity queries (using the new `:has` selector and friends) to style elements based on their count, like changing backgrounds or grid columns depending on the number of children.

## **💅 Showcase**

### **[Vynildo](https://www.vynildo.com/?ref=tailwindweekly.com)**

This is an exceptional example of what can be achieved with Tailwind CSS with enough time and dedication. This old-school music player is made entirely with HTML, CSS, and some JS. No fancy canvas, no complex library, just markup 😄.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-312.jpg)](https://fullwindcss.com/?ref=tailwindweekly.com)

****[fullwindcss](https://fullwindcss.com/?ref=tailwindweekly.com)**

If you ever find yourself toggling between docs and your codebase trying to remember Tailwind classes or figure out the perfect utility combo, Fullwind CSS is a great resource. It’s basically a Tailwind search and playground all in one, you can search, preview, and customize Tailwind utilities on the fly, then just copy and drop them right into your project. The instant preview is especially handy, and I love that you can experiment with different class combinations without having to reload or context-switch. If you want to speed up your workflow and spend less time guessing or referencing docs, you’ll want to give this a try.

## **👌 Cool Stuff**

**[Tailscan](https://tailscan.com/?ref=tailwindweekly) –** Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

**[Filter](https://filter.addy.ie/?ref=tailwindweekly.com)** – A fast, modern image editor built with React and TypeScript. Edit, filter, and export images on any device.

**[Openchangelog](https://openchangelog.com/?ref=tailwindweekly.com)** — Customize yo r changelog with light/dark themes, custom domains, GitHub sync, RSS, search, and password protection.

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.com).

Want to support the newsletter? You can buy me a coffee with this [link](https://buymeacoffee.com/vivgui?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #191: Experimenting with WASM, Streamlined CSS with :is(), and Elixir UI Goodies 🤓!
URL: https://tailwindweekly.com/issue-191/
Last updated: 2025-08-18T09:31:21.000Z
Hello folks!

It’s been a slow week in the Tailwind CSS front, but I do have something to report! The team [released](https://x.com/adamwathan/status/1912134025684172996?ref=tailwindweekly.com) a new version that adds an experimental WASM build of its native libraries, which means you can now use Tailwind v4 in environments like [StackBlitz](https://stackblitz.com/?ref=tailwindweekly.com) 🤩 .

Now, let’s get to it!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-300.jpeg)](https://magic.beehiiv.com/v1/faa6a747-8c1c-43c1-8155-91aa43268f01?email={{email}}&ref=tailwindweekly.com)

****Find out why 1M+ professionals read Superhuman AI daily.**

[![](https://tailwindweekly.com/content/images/image-305.jpg)](https://magic.beehiiv.com/v1/faa6a747-8c1c-43c1-8155-91aa43268f01?email={{email}}&ref=tailwindweekly.com)

In 2 years you will be working for AI

Or an AI will be working for you

Here's how you can future-proof yourself:

1. Join the [Superhuman AI](https://magic.beehiiv.com/v1/faa6a747-8c1c-43c1-8155-91aa43268f01?email={{email}}&ref=tailwindweekly.com) newsletter – read by 1M+ people at top companies
2. Master AI tools, tutorials, and news in just 3 minutes a day
3. Become 10X more productive using AI

Join 1,000,000+ pros at companies like Google, Meta, and Amazon that are using AI to get ahead.

[Sign up and start learning AI](https://magic.beehiiv.com/v1/faa6a747-8c1c-43c1-8155-91aa43268f01?email={{email}}&ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-306.jpg)](https://www.oddbird.net/2025/02/25/anchor-position-area/?ref=tailwindweekly.com)

****[Better Anchor Positioning with ](https://www.oddbird.net/2025/02/25/anchor-position-area/?ref=tailwindweekly.com)`position-area`**

This article dives into the new position-area CSS property, which seems like a simple shorthand at first but actually introduces new behaviors for positioning elements. Unlike the traditional anchor() method, position-area creates a unique containing block defined by the relationship with its anchor, allowing for more intuitive and precise placements around specific corners or edges. It smartly shifts to prevent overflow, ensuring elements stay within their intended area.

### **[Reducing CSS complexity with the ](https://gomakethings.com/reducing-css-complexity-with-the-is-pseudo-class/?ref=tailwindweekly.com)**`:is()`**[ pseudo-class](https://gomakethings.com/reducing-css-complexity-with-the-is-pseudo-class/?ref=tailwindweekly.com)**

The author shares their recent experience using :is() to tidy up a tangled web of CSS rules, transforming what was once an overwhelming mess into something much more manageable and readable. It also touches on the benefits of :is() over CSS nesting, particularly noting its superior browser compatibility. There's a small caveat about specificity to keep in mind, but overall, this piece does a fantastic job of illustrating how :is() can streamline your CSS workflow and reduce selector complexity.

### **[Managing User Focus with ](https://css-tricks.com/managing-user-focus-with-focus-visible/?ref=tailwindweekly.com)**`:focus-visible`

Ever wondered what `:focus-visible` actually does or why it matters? This article lays it all out: how to use :focus-visible to create stylish, accessible focus indicators that help everyone, especially keyboard users, know where they are on your site. You'll get clear explanations, practical examples, and pro tips for handling browser quirks and fallbacks.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-307.jpg)](https://www.athina.ai/?ref=tailwindweekly.com)

****[Athina AI](https://www.athina.ai/?ref=tailwindweekly.com)**

Athina is an all-in-one AI development platform that helps web developers build, test, and monitor AI features collaboratively and securely. From prompt management to production monitoring and dataset evaluation, Athina streamlines the entire AI workflow, so you can ship reliable AI products faster.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-308.jpg)](https://mishka.tools/chelekom?ref=tailwindweekly.com)

****[Phoenix UI kit](https://mishka.tools/chelekom?ref=tailwindweekly.com)**

This is a full-featured Phoenix & LiveView UI kit packed with ready-to-use components like cards, modals, alerts, and tons more, no JavaScript-heavy setup required. Just run a single generator command and you can drop pro-quality, fully customizable UI right into your Elixir projects. If you want to skip the usual hassle of wiring up UI in Phoenix, and prefer something fast, open-source, and thoughtfully documented, you’ll definitely want to give this one a look!

## **👌 Cool Stuff**

**[Tailscan](https://tailscan.com/?ref=tailwindweekly) –** Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

---

**[SendFast](https://sendfast.app/?ref=tailwindweekly.com)** – Instantly share files with real-time view tracking and notifications for every recipient.

---

**[Sébastien Dubois](https://www.dsebastien.net/?ref=tailwindweekly.com)** – A newsletter on personal knowledge management, productivity, and intentional career growth.

---

**[Radon IDE](https://ide.swmansion.com/?ref=tailwindweekly.com)** – A VSCode extension that brings seamless React Native and Expo development to your editor.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #190: Cursor Styling, Text Balancing, and Dev-Friendly Knowledge Tools for Easter 🐰
URL: https://tailwindweekly.com/issue-190/
Last updated: 2025-08-18T09:46:01.000Z
Hello folks!

No major stuff to report, so we’ll keep it short and sweet! And for those that celebrate it, happy easter 🙌 !

Let's dive in!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-300.jpeg)](https://magic.beehiiv.com/v1/faa6a747-8c1c-43c1-8155-91aa43268f01?email={{email}}&ref=tailwindweekly.com)

****Find out why 1M+ professionals read Superhuman AI daily.**

[![](https://tailwindweekly.com/content/images/image-301.jpg)](https://magic.beehiiv.com/v1/faa6a747-8c1c-43c1-8155-91aa43268f01?email={{email}}&ref=tailwindweekly.com)

AI won't take over the world. People who know how to use AI will.

Here's how to stay ahead with AI:

1. Sign up for [Superhuman AI.](https://magic.beehiiv.com/v1/faa6a747-8c1c-43c1-8155-91aa43268f01?email={{email}}&ref=tailwindweekly.com) The AI newsletter read by 1M+ pros.
2. Master AI tools, tutorials, and news in just 3 minutes a day.
3. Become 10X more productive using AI.

[Join 1 million pros and start learning AI](https://magic.beehiiv.com/v1/faa6a747-8c1c-43c1-8155-91aa43268f01?email={{email}}&ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-302.jpg)](https://css-tricks.com/next-level-css-styling-for-cursors/?ref=tailwindweekly.com)

****[Next Level CSS Styling for Cursors](https://css-tricks.com/next-level-css-styling-for-cursors/?ref=tailwindweekly.com)**

This is a deep dive into the fascinating world of custom cursors, exploring how JavaScript can improve them beyond basic CSS styling. You'll learn how to create dynamic, interactive cursors by using elements that follow your mouse movements, enabling complex animations and transitions that add flair to your website. The article also covers important considerations like accessibility and ensuring your cursor enhancements don't interfere with touchscreens or users with reduced-motion preferences.

### **[Balancing Text In CSS](https://ishadeed.com/article/balancing-text-css/?ref=tailwindweekly.com)**

This article revisits the topic of text-wrap in CSS, specifically focusing on the `text-wrap: balance` property. It dives into the challenges of text wrapping on web pages compared to design tools like Figma, where designers manually adjust text for balance. In the browser, traditional methods like using <br> and max-width have limitations, but `text-wrap: balance` offers a native solution by evenly distributing text across lines for a cleaner look. `text-wrap: pretty` is also introduced, which is more forgiving and useful for preventing orphan words.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-303.jpg)](https://www.honkist.com/?ref=tailwindweekly.com)

****[Honkist](https://www.honkist.com/?ref=tailwindweekly.com)**

Honkist is an excellent platform built for web developers like us who want to level up in the AI era. It serves up condensed, AI-powered insights from top non-fiction books that you can consume during your busy day. You can use the AI chat feature to dig deeper into complex concepts, helping you not just understand key ideas but actually apply them to your projects and career growth.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-304.jpg)](https://tailwindresume.co/?ref=tailwindweekly.com)

****[Tailwind Resume](https://tailwindresume.co/?ref=tailwindweekly.com)**

This is a very interesting resume builder I found recently. It’s built on Tailwind CSS (so you know it’s fast and clean), and it lets you tweak the layout and styles to match your vibe, so no complicated design tools or head-scratching over spacing. You get full control over customization, but it’s super intuitive. The live preview is very good as well: just make your edits and see updates instantly. Whether you need a fresh CV for your dream gig or want to give your old resume a facelift, this builder keeps things simple and efficient, and makes sure your resume looks polished every time.

## **👌 Cool Stuff**

**[Knowledge Management for Beginners](https://knowledge-management-for-beginners.com/?ref=tailwindweekly.com)** – Build a dev-friendly system to capture, organize, and use knowledge to improve your career.

---

**[Lynx](https://lynxjs.org/?ref=tailwindweekly.com)** – Build once, deploy anywhere with native rendering for web, Android, and iOS using your existing CSS and React skills.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #189: New Catalyst Update, Course Template Sneak Peek, and New Editor Themes coming soon 🔥
URL: https://tailwindweekly.com/issue-189/
Last updated: 2025-08-19T08:49:17.000Z
Hello folks!

We got some cool updates this week and some very nice learning resources; hopefully, you learn something new with this issue!

On a side note, if you’re planning to go to Laracon US this year, then don’t miss the [Q&A panel](https://x.com/taylorotwell/status/1910341499683827864?ref=tailwindweekly.com) with Adam, Evan (the creator of Vue), and Taylor (the creator of Laravel). I won’t be able to attend this year, but I’ll definitely watch the livestream!

Let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-293.jpeg)

****New update for Catalyst ⭐️**

The team [shipped](https://x.com/reinink/status/1909248653736149291?ref=tailwindweekly.com) a brand new `Combobox` component, as well as three new auth page examples, including a login page, a registration page, and a forgot password page. Also this is a free update for existing Tailwind Plus subscribers!

![](https://tailwindweekly.com/content/images/image-294.jpeg)

****New official template coming soon 🎨**

Adam [teased](https://x.com/adamwathan/status/1910781789783699507?ref=tailwindweekly.com) the initial design of the next official template, and this looks like it’ll be for online courses. Already looking pretty good, and I’m excited to see the full list of pages!

![](https://tailwindweekly.com/content/images/image-295.jpeg)

****New Tailwind CSS editor themes just around the corner 💻️**

If you have seen any of the recent Tailwind CSS channel videos, then you probably saw that they have their own custom editor theme. Well, they decided to [share](https://x.com/adamwathan/status/1910800038667968786?ref=tailwindweekly.com) it with everyone and are planning to release it soon 😄

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-296.jpeg)](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)

🚀 **Master Tailwind CSS Faster & Smarter!** 🚀

Struggling to master the full power of Tailwind CSS? Sure, the basics are easy, but *hidden tips*, advanced workflows, and nuanced flexibility? That’s where **[Level up with Tailwind CSS v4](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)** shines. 🌟

Authored by the global conference speaker and educator [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.com) (creator of 30+ popular Tailwind tutorials), this guide takes you from **beginner** to **pro** with real-world examples, creative techniques, and time-saving tricks. Available as:

✨ **eBook ($33)**: Dive deep with sample codes & demos.  
🎥 **eBook + Videos ($59)**: Hands-on visuals for faster learning.

[Get better at using Tailwind CSS!](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-297.jpg)](https://ishadeed.com/article/modern-attr/?ref=tailwindweekly.com)

****[First Look at The Modern attr()](https://ishadeed.com/article/modern-attr/?ref=tailwindweekly.com)**

Ahmad's article walks you through the modern attr() function, which now supports multiple value types like colors, numbers, lengths, and more. The tutorial is packed with practical demos showing how to use this for grid layouts, animation delays, progress bars, and even mini utility frameworks (think Tailwind-like attributes without the classes). What I found most valuable were the real-world examples that demonstrate how this approach can make your code cleaner while separating content from styling. Though it's currently Chrome-only, this powerful feature is definitely worth keeping on your radar.

### **[CSS Relative Colors](https://ishadeed.com/article/css-relative-colors/?ref=tailwindweekly.com)**

Another great one from Ahmad! He walks through the powerful new relative colors feature that lets you dynamically modify colors without needing Sass or color pickers. The interactive demos really shine here - you can see exactly how to take an existing color and adjust its opacity, lightness, or even create complementary colors with simple syntax like oklch(from var(--brand) l c calc(h + 90)). What I found most valuable was the comparison between different color spaces (HSL vs OKLCH) for creating accessible color palettes with consistent contrast ratios. The practical examples cover everything from button hover states to shadows, gradients, and even creating grayscale versions of colors.

### **[Three Approaches to the “&” (ampersand) Selector in CSS](https://frontendmasters.com/blog/three-approaches-to-the-ampersand-selector-in-css/?ref=tailwindweekly.com)**

This helpful article walks through three practical ways to use the ampersand selector in native CSS: linking class names for modular components, targeting parent elements for state-based styling, and managing recurring selectors for spacing. The author nicely explains how & works differently in vanilla CSS compared to Sass (representing complete selectors rather than strings), and shows you workarounds using attribute selectors to achieve similar naming patterns. If you've been looking to organize your CSS better without relying on preprocessors, these techniques offer a nice balance of maintainability and clean structure for your stylesheets.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-298.jpg)](https://update.dev/?ref=tailwindweekly.com)

****[Update](https://update.dev/?ref=tailwindweekly.com)**

Update is a developer-focused toolkit that makes implementing authentication, billing, and subscriptions in your app ridiculously simple. It seamlessly integrates with Supabase and Stripe, letting you add payment systems and user permissions in minutes instead of weeks. If you're building a SaaS product and want to skip the headache of piecing together payment infrastructure, this might be the biggest time-saver you'll find this year.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-299.jpg)](https://brands-tail-color.vercel.app/?ref=tailwindweekly.com)

****[Brands Tail Color](https://brands-tail-color.vercel.app/?ref=tailwindweekly.com)**

I just came across this awesome little utility that's super helpful if you're working with brand colors in your Tailwind projects. It's basically a configuration generator that lets you easily add popular brand colors (think Twitter blue, Spotify green, etc.) as background, text, or border colors in your Tailwind setup. The colors are sourced from [brandcolors.net](https://brandcolors.net/?ref=tailwindweekly.com), so they're accurate, and the tool outputs ready-to-use config you can drop right into your project.

## **👌 Cool Stuff**

**[Tailscan](https://tailscan.com/?ref=tailwindweekly) –** Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

---

**[Pico.sh](https://pico.sh/?ref=tailwindweekly.com)** – Developer toolkit for deploying websites, tunneling [localhost](https://localhost/?ref=tailwindweekly.com), and sharing content - all via SSH commands you already know.

---

**[Wasp](https://wasp.sh/?ref=tailwindweekly.com)** – Rails-like framework that combines React, Node.js and Prisma with a simple config language, helping you build full-stack web apps in record time.

---

**[shiki-stream](https://github.com/antfu/shiki-stream?ref=tailwindweekly.com)** – A library for streaming syntax highlighting with Shiki, perfect for real-time code highlighting in LLM outputs and text streams.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.com).

Want to support the newsletter? You can buy me a coffee with this [link](https://buymeacoffee.com/vivgui?%5Fbhlid=461b0785ee212d62b7805c1050a4f0f8d3bc5f45&ref=tailwindweekly.com) 😁.
### Tailwind Weekly #188: Tailwind CSS v4.1 Adds Text Shadows, Mask Utilities, and lots more 🚀!
URL: https://tailwindweekly.com/issue-188/
Last updated: 2025-08-19T09:14:00.000Z
Hello folks!

Sorry for the silence for the past 2 weeks, I was recovering from surgery but feeling much better now and excited to get back to our regular schedule!

This week, we got v4.1 with lots of new additions, and the announcement video is a MUST WATCH if you want the highlights of the release. Also, the thumbnail is hilarious 😂.

Let's dive in!

## **🌟 News**

### **Say hello to Tailwind CSS v4.1!**

Here’s a TL;DR straight from the [blog post](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com):

- [New ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#new-text-shadow-utilities)`text-shadow-*`[ utilities](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#new-text-shadow-utilities) — only about twenty years after they were first supported by a browser.
- [Mask elements with the ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#mask-elements-with-the-mask-utilities)`mask-*`[ utilities](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#mask-elements-with-the-mask-utilities) — use images and gradients to mask elements with new ergonomic APIs.
- [Improved compatibility with older browsers](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#improved-compatibility-with-older-browsers) — we've made things degrade way more gracefully for older browsers, while still taking advantage of modern features in browsers that support them.
- [Fine-grained text wrapping with ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#fine-grained-text-wrapping-with-overflow-wrap)`overflow-wrap` — defend the integrity of your layouts from even the longest German words your users will throw at you.
- [Colored ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#colored-drop-shadow-support)`drop-shadow`[ support](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#colored-drop-shadow-support) — can't really remember why we didn't have these before but we do now.
- [Target input devices with ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com)`pointer-*`[ and ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com)`any-pointer-*` — tweak your design for touch devices explicitly instead of relying on viewport size.
- [Align items to the last baseline](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#align-items-to-the-last-baseline) — align flex or grid items to the baseline of the last line of text using the new `items-baseline-last` and `self-baseline-last` utilities.
- [Keep content visible with ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#keep-content-visible-with-safe-alignment)`safe`[ alignment](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#keep-content-visible-with-safe-alignment) — center content in flex and grid layouts without it disappearing when there's not enough space.
- **[Ignore specific paths with ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#ignore-specific-paths-with-source-not)**`@source not`— explicitly ignore irrelevant large directories and speed up your builds even more.
- [Safelist specific utilities with ](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#safelist-specific-utilities-with-source-inline)`@source inline(…)` — force Tailwind to include classes that aren't in your source files.
- [A bunch of other new variants](https://tailwindcss.com/blog/tailwindcss-v4-1?ref=tailwindweekly.com#a-bunch-of-other-new-variants) — including `noscript`, `user-valid`, `inverted-colors`, and more.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-290.jpeg)](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)

🚀 **Master Tailwind CSS Faster & Smarter!** 🚀

Struggling to master the full power of Tailwind CSS? Sure, the basics are easy, but *hidden tips*, advanced workflows, and nuanced flexibility? That’s where **[Level up with Tailwind CSS v4](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)** shines. 🌟

Authored by the global conference speaker and educator [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.com) (creator of 30+ popular Tailwind tutorials), this guide takes you from **beginner** to **pro** with real-world examples, creative techniques, and time-saving tricks. Available as:

✨ **eBook ($33)**: Dive deep with sample codes & demos.  
🎥 **eBook + Videos ($59)**: Hands-on visuals for faster learning.

[Start your Tailwind mastery today!](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)

## **📚 Learning**

### **[7 Practical CSS Typography Tips & Tricks](https://www.youtube.com/watch?v=d1QOiBRID2E&ref=tailwindweekly.com)**

The creator walks through practical typography tricks like fluid sizing with `clamp()`, perfectly balanced text lines, custom underline styling, and even emoji bullet points that actually look professional. What I love most is seeing the real-time transformation in their CodePen demo - you immediately understand how just a few lines of CSS can dramatically improve readability and visual appeal.

### **[Our Favorite DevTools Features of 2025](https://www.debugbear.com/blog/favourite-devtools-features-in-2025?ref=tailwindweekly.com)**

This post dives into eight fantastic features that are game-changers for optimizing and debugging your sites in 2025\. From pinpointing those complicated performance bottlenecks caused by large DOM trees to distinguishing between first-party and third-party scripts with ease, this article covers it all. You'll learn how to test your site sans third-party cookies, simulate real-world device conditions with calibrated CPU throttling, and even get AI-powered insights to decipher those daunting flame charts.

### **[Responsive Animations for Every Screen Size and Device](https://css-tricks.com/responsive-animations-for-every-screen-size-and-device/?ref=tailwindweekly.com)**

This one dives into the world of responsive animation, offering insights into how to adapt your animations for various devices without "export settings" like in video graphics. You'll learn about different animation types—fixed, fluid, and targeted—and how each requires a unique approach. The piece is packed with practical tips, like leveraging SVG units for responsive scaling and using GSAP's FLIP technique to create seamless transitions.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-291.jpg)](https://codecourse.com/?ref=tailwindweekly.com)

****[Codecourse](https://codecourse.com/?ref=tailwindweekly.com)**

Codecourse is the go-to library of practical screencasts for developers who want to build real applications without wading through theory, featuring hundreds of project-based tutorials across Laravel, Livewire, Vue, and other modern frameworks.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-292.jpg)](https://judoscale.com/tools/paas-pricing-calculator?ref=tailwindweekly.com)

****[The Ultimate PaaS Pricing Comparison Calculator](https://judoscale.com/tools/paas-pricing-calculator?ref=tailwindweekly.com)**

I discovered this super helpful tool last week and had to share it! It's a calculator that lets you compare pricing across different Platform-as-a-Service providers like Heroku, Render, Fly, and Railway by inputting your team size, CPU needs, memory requirements, and more. What I love about it is how it breaks down all the costs in detail, showing you exactly where your money goes for each provider. If you're trying to figure out the most cost-efficient place to host your app or planning infrastructure costs for a new project, this is definitely going to save you hours of research.

## **👌 Cool Stuff**

**[Game & Word](https://gameandword.substack.com/)** – Where gaming meets humanity, exploring the intersection of games, arts, and sciences for both gamers and non-gamers alike.

---

**[The 5-9 Formula](https://www.thefivetonineformula.com/?ref=tailwindweekly.com)** – Weekly interviews with successful side hustlers, delivering actionable business advice in a 5-minute read for aspiring entrepreneurs.

---

**[On Repeat Records](https://thekevinalexander.substack.com/)** – A personalized music discovery newsletter delivering hand-curated playlists straight to your inbox, bypassing algorithms for genuine recommendations.

---

**[Scouting German Football](https://adamfc5.substack.com/)** – In-depth analysis covering all tiers of German football, providing fresh perspectives beyond mainstream narratives of top Bundesliga clubs.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #187: Variables Cleanup, v4.1 Safelisting, and Windybase launch 🤩
URL: https://tailwindweekly.com/issue-187/
Last updated: 2025-08-19T09:32:20.000Z
Hello folks!

This week we got more developer experience updates for Tailwind, a peek at v4.1 new features, and a product launch from yours truly 🙈 . I have been working on it for months and am now finally ready to show it to you all! See the Windy Picks section for more 😄 .

Now, let's dive in!

## **🌟 News**

Two new updates this week!

![](https://tailwindweekly.com/content/images/image-284.jpeg)

The Tailwind Labs team [recently](https://x.com/adamwathan/status/1900581509397950487?ref=tailwindweekly.com) released an update that removes all unused theme variables from your generated CSS, so your CSS variables will be cleaner now 😇 .

![](https://tailwindweekly.com/content/images/image-285.jpeg)

Next: CSS-based safelisting support is [coming](https://x.com/adamwathan/status/1899811448005550132?ref=tailwindweekly.com) in Tailwind CSS v4.1!

It’ll use brace expansion instead of regular expressions, which *makes the generated CSS much more predictable and also makes this whole thing much more compatible with how dynamic things are in v4\.* No ETA yet but stay tuned!

Fun part: while testing this feature, the team figured out a way to [generate](https://x.com/adamwathan/status/1900579350061215936?ref=tailwindweekly.com) “over 5 million classes and at least 600mb of static CSS” 😂

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-286.jpg)](https://windybase.com/?ref=tailwindweekly.com)

🚀 **Building websites takes time, unless you have the perfect starting point.**

Enter **[WindyBase](https://windybase.com/?ref=tailwindweekly.com)**: your go-to directory for *free* and *premium* Tailwind CSS templates and components. Whether you're eyeing sleek landing pages, modern dashboards, or e-commerce templates, we've got what you need to develop faster 🌟.

Every week, we handpick the best resources to simplify your workflow. No more searching, find everything in one place!

Check out **[WindyBase](https://windybase.com/?ref=tailwindweekly.com)** today and never start a project from a blank canvas again 🔥

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-287.jpg)](https://www.youtube.com/watch?v=gfYJvTBu%5Fsk&ref=tailwindweekly.com)

****[Add Custom Colors in Tailwind CSS v4](https://www.youtube.com/watch?v=gfYJvTBu%5Fsk&ref=tailwindweekly.com)**

This is a great explainer about the biggest change in Tailwind CSS version 4: moving from JavaScript configuration to CSS-first theming! The video shows how to add custom colors using the new @theme directive and CSS variables instead of the old `tailwind.config.js` approach. I love how Shruti demonstrates it with a practical chocolate-themed website example, showing both a base "chocolate" color and a "chocolate-dark" variant. If you've been wondering how to customize your Tailwind v4 projects, this tutorial makes it super straightforward and the new approach actually feels more intuitive for CSS developers.

### **[Why the number input is the worst input](https://stackoverflow.blog/2022/12/26/why-the-number-input-is-the-worst-input/?ref=tailwindweekly.com)**

The piece dives into the nitty-gritty of why the `<input type="number">` might not be your best friend when building complex forms, especially when dealing with intricate logic and conditional validations. The author, with 15 years of front-end coding experience, shares insights from their journey, explaining how they learned to navigate the quirks and pitfalls of using number inputs. They introduce Keenforms, a no-code form builder, and discuss the challenges of using number inputs, like inconsistent browser behavior and accessibility concerns.

### **[More Details on ](https://css-tricks.com/more-details-on-details/?ref=tailwindweekly.com)**`details`

The article dives into the intricacies of styling elements within `<details>`, uncovering how the HTML spec and browser implementations may not always play nice together. It also explores the role of `<summary>` as an interactive element and the challenges it poses for accessibility tools.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-288.jpg)](https://noteplan.co/?ref=tailwindweekly.com)

****[NotePlan](https://noteplan.co/?ref=tailwindweekly.com)**

NotePlan is the ultimate productivity hub for web developers, seamlessly integrating notes, tasks, and calendars into one powerful app. With its advanced task scheduling, customizable templates, and bi-directional linking, NotePlan allows you to manage your daily agenda, long-term projects, and personal knowledge all in one place.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-289.jpeg)](https://www.griddyicons.com/?ref=tailwindweekly.com)

****[GriddyIcons](https://www.griddyicons.com/?ref=tailwindweekly.com)**

These icons are a total game-changer for web design. Built with stroke-based layers and live corners for Figma and Framer, these icons give you amazing customization options while staying visually balanced and polished. The ability to request custom icons makes this perfect for any SaaS product needing a cohesive look.

## **👌 Cool Stuff**

**[Tailscan](https://tailscan.com/?ref=tailwindweekly) –** Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

---

**[Siddharth's Newsletter](https://siddharthsshah.substack.com/)** – A VC investor's insights on tech startups, emerging technologies, and funding opportunities in the ecosystem.

---

**[Yemi's Newsletter](https://www.yemi.news/?ref=tailwindweekly.com)** – A weekly digest delivering entertaining story breakdowns, creator opportunities, and handpicked deals with a humorous, casual tone.

---

**[Marketing Simplified](https://coreyhinde.substack.com/)** – A resource for business owners to master Google visibility through SEO, map listings, and ad strategies for local growth.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #186: Tailwind UI rebrand, new video series and cursor rules for v4 🔥!
URL: https://tailwindweekly.com/issue-186/
Last updated: 2025-08-19T09:56:27.000Z
Hello folks!

We got a rebrand, the 6 video course, and even a cursor rule file, what a week!

And even better, Steve Schroger said they’ll be [rebooting](https://x.com/steveschoger/status/1897373865220956292?ref=tailwindweekly.com) the Reactoring UI YouTube channel, so stay tuned for that 😄

Let's dive in!

## **🌟 News**

[![](https://tailwindweekly.com/content/images/image-277.jpg)](https://tailwindcss.com/plus?ref=tailwindweekly.com)

****Tailwind UI is now [Tailwind Plus](https://tailwindcss.com/plus?ref=tailwindweekly.com) ✨**

Still one-time purchase, still the same price, just a new name with [new possibilities](https://x.com/adamwathan/status/1897034366477590802?ref=tailwindweekly.com)! They redesigned the website to match the updated Tailwind CSS v4.0 branding, and made some UX improvements like adding a sidebar to the component browser.

[![](https://tailwindweekly.com/content/images/image-278.jpg)](https://tailwindcss.com/build-uis-that-dont-suck?ref=tailwindweekly.com)

****"Build UIs that don't suck" video series**

The team finally released the [mini 6 video series](https://tailwindcss.com/build-uis-that-dont-suck?ref=tailwindweekly.com) announced last week. It’s short, tactical video lessons, delivered directly to your inbox every day for a week.

[![](https://tailwindweekly.com/content/images/image-279.jpeg)](https://gist.github.com/danhollick/d902cf60e37950de36cf8e7c43fa0943?ref=tailwindweekly.com)

****Cursor rules file for Tailwind CSS v4**

If you use any LLM and are trying to use v4 you probably experienced that it keeps trying to use v3 syntax even if you feed it the official docs. Well, if you use Cursor, Adam [released](https://x.com/adamwathan/status/1897703857943105919?ref=tailwindweekly.com) a custom [Cursor rule](https://gist.github.com/danhollick/d902cf60e37950de36cf8e7c43fa0943?ref=tailwindweekly.com) so it knows how to handle v4 code. Very handy!

## **🤩 Windy Picks**

### **Optimize global IT operations with our World at Work Guide**

[![](https://tailwindweekly.com/content/images/image-280.jpeg)](https://www.deel.com/resources/deel-it-guide-to-the-world-at-work/?ref=tailwindweekly.com)

Explore this [ready-to-go guide](https://www.deel.com/resources/deel-it-guide-to-the-world-at-work/?ref=tailwindweekly.com) to support your IT operations in 130+ countries. Discover how:

- Standardizing global IT operations enhances efficiency and reduces overhead
- Ensuring compliance with local IT legislation to safeguard your operations
- Integrating Deel IT with EOR, global payroll, and contractor management optimizes your tech stack

Leverage [Deel IT](https://www.deel.com/resources/deel-it-guide-to-the-world-at-work/?ref=tailwindweekly.com) to manage your global operations with ease.

[Download free guide](https://www.deel.com/resources/deel-it-guide-to-the-world-at-work/?ref=tailwindweekly.com)

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-281.jpg)](https://www.debugbear.com/blog/prefetch-slower-website?ref=tailwindweekly.com)

****[Resource Prefetching May Slow Down Your Website](https://www.debugbear.com/blog/prefetch-slower-website?ref=tailwindweekly.com)**

Have you ever wondered if resource prefetching really speeds up your website? This article dives into the nitty-gritty of prefetching, revealing both its promises and pitfalls. While prefetching can indeed make subsequent page loads faster by pre-loading resources, it can also inadvertently slow down your initial page load by competing for bandwidth with crucial elements like images. The piece brings to light how prefetched resources often load earlier than expected, sometimes even before your main content, impacting the Largest Contentful Paint (LCP) scores.

### **[Make creative borders with ](https://webkit.org/blog/16214/background-clip-border-area/?ref=tailwindweekly.com)**`background-clip:border-area`

This piece dives into the magical world of `background-clip: border-area`, a powerful tool that lets you apply a background image to a border, filling it in one seamless piece. You'll learn how to transform simple HTML elements by adding gorgeous image borders, fancy gradient frames, and even progress rings with a few lines of code.

### **[The New ](https://geoffgraham.me/the-new-css-important/?ref=tailwindweekly.com)**`!important`

The author dives into a clever CSS strategy used in a popular WordPress theme, examining how classes like .specificity and .extra-specificity can boost a selector's specificity without adding styles. It's a fascinating read if you're curious about alternative methods to handle CSS specificity beyond the usual `!important` or complex selectors.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-282.jpg)](https://aptakube.com/?ref=tailwindweekly.com)

****[Aptakube](https://aptakube.com/?ref=tailwindweekly.com)**

Aptakube is the ultimate Kubernetes GUI for web developers, offering a fast and intuitive interface that surpasses Lens and k9s. With its ability to connect to multiple clusters simultaneously, Aptakube simplifies your workflow by consolidating all your Kubernetes resources into one view.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-283.jpg)](https://thisisfranciswu.com/enterprise-ui-palette-generator/?ref=tailwindweekly.com)

****[Accessible Color Palette Generator](https://thisisfranciswu.com/enterprise-ui-palette-generator/?ref=tailwindweekly.com)**

Thistool automates the generation of accessible UI color palettes. It takes cues from Radix UI's custom color palette tool but adds its own twist based on some rules laid out in the Medium article. Super simple to use: just refresh for a random palette or tweak the inputs and hit "Generate" to craft a palette around your chosen accent color. I

## **👌 Cool Stuff**

**[Tailscan](https://tailscan.com/?ref=tailwindweekly) –** Instantly build, debug, and refine Tailwind CSS sites visually with real-time updates, all within your browser.

---

**[TripMode](https://tripmode.ch/?ref=tailwindweekly.com)** – Control data usage by blocking background apps from accessing the Internet, saving bandwidth on any network.

---

**[Tenno](https://tenno.app/?ref=tailwindweekly.com)** – A Markdown editor with live-editable cells, calculations, and dynamic visualizations, like Excel for devs!

---

**[Superfluid](https://www.readsuperfluid.com/?ref=tailwindweekly.com)** – A must-read newsletter for VCs, founders, and startup operators to stay ahead with insights and updates.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #185: New Mini-Video Series Coming, Color Page Updates, and Future Typography Plugin Changes 🎓!
URL: https://tailwindweekly.com/issue-185/
Last updated: 2025-08-20T08:39:55.000Z
Hello folks!

Another week, another lovely patch [release](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.9?ref=tailwindweekly.com) 😌. Adam also teased a new video series coming soon, this time about designing better UIs with Tailwind. With Adam’s and Steve’s experience delivering great education products I’m sure it’ll be amazing!

Now, let's dive in!

## **🌟 News**

No major news this week folks but the Tailwind Labs team has been cooking! Adam announced a [6-video](https://x.com/adamwathan/status/1894423435117211789?ref=tailwindweekly.com) mini course releasing next [week](https://x.com/adamwathan/status/1895222814673912206?ref=tailwindweekly.com).

![](https://tailwindweekly.com/content/images/image-272.jpeg)

The team also added a beloved feature to the new colors page in v4, now you can [click](https://x.com/adamwathan/status/1894942470196101527?ref=tailwindweekly.com) a color and copy it to the clipboard automatically!

Lastly, Adam confessed that he [hates](https://x.com/adamwathan/status/1894776336402583835?ref=tailwindweekly.com) the typography plugin 🤣 and that its next iteration will be a CSS file you can import and override however you want.

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-273.jpeg)](https://florinpop17.gumroad.com/l/makemoneydev?ref=tailwindweekly.com)

[](https://florinpop17.gumroad.com/l/makemoneydev?ref=tailwindweekly.com)[💻 ](https://florinpop17.gumroad.com/l/makemoneydev?ref=tailwindweekly.com)**[Turn Code Into Cash 💰](https://florinpop17.gumroad.com/l/makemoneydev?ref=tailwindweekly.com)**

Are you a developer stuck on the 9-to-5 treadmill? What if your coding skills could open doors to *freedom* and *flexibility*?

Florin Pop's **“[Ten++ Ways to Make Money as a Developer](https://florinpop17.gumroad.com/l/makemoneydev?ref=tailwindweekly.com)”** eBook ($19) is your roadmap to monetizing your developer skillset. Learn *practical* ways to earn—from freelancing, blogging, and creating digital products, to SaaS and live coding.

Packed with **168 pages of actionable advice** (PDF/EPUB), it's already helped **2,500+ developers** unlock new opportunities. Plus, there’s a **14-day money-back guarantee**—risk-free.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-274.jpeg)](https://polypane.app/blog/decoding-css-selectors-has-not-vs-not-has/?ref=tailwindweekly.com)

****[Decoding CSS Selectors: :has(:not) vs :not(:has)](https://polypane.app/blog/decoding-css-selectors-has-not-vs-not-has/?ref=tailwindweekly.com)**

This article dives deep into the power of CSS functions like :is(), :not(), and :has(), showing how they simplify element selection while working with specificity. It breaks down complex selectors into understandable parts, using a simple HTML structure to illustrate the nuances between :has(:not) and :not(:has). You'll learn how these functions apply differently to elements and their children, and how implicit selectors play a role.

### **[OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl?ref=tailwindweekly.com)**

Andrey dives into why oklch() is a game-changer for design systems and color palettes. The guide breaks down how this new format offers more predictable results for color modifications and palette generation compared to older formats like hsl(). With oklch(), you can tap into the wide-gamut P3 colors, making your designs look better on newer devices. Plus, its human-readable format means no more guessing games when it comes to understanding your colors.

### **[How To Animate Along A Path In CSS](https://www.smashingmagazine.com/2023/10/animate-along-path-css/?ref=tailwindweekly.com)**

With Preethi you'll dive into an approach that cleverly combines animated custom properties, a conic gradient, CSS offset, and even emoji to craft the illusion of a scooter racing around a donut track. By the end of the article, you'll not only understand how to construct a donut-shaped progress indicator but also how to animate it with a playful touch. Whether you're looking to enhance your project's loading states or simply want to experiment with CSS's versatile capabilities, this article provides a delightful read.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-275.jpg)](https://www.gitpod.io/?ref=tailwindweekly.com)

****[Gitpod](https://www.gitpod.io/?ref=tailwindweekly.com)**

Gitpod gives you self-hosted development environments in about three minutes, letting you use your favorite editors or CLI tools right away. It comes with zero-trust security built in, and turns your development environments into code that can be shared and reproduced easily.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-276.jpg)](https://somonoco.com/?ref=tailwindweekly.com)

****[monoco](https://somonoco.com/?ref=tailwindweekly.com)**

You know how we're stuck with just rounded corners in CSS? Well, until CSS Houdini is universally supported, Monoco fills that gap. It dynamically generates SVG code to create those cool shapes UX/UI designers love, and it works perfectly across all modern browsers.

## **👌 Cool Stuff**

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Obscura VPN](https://obscura.net/?ref=tailwindweekly.com)** – A VPN that doesn’t log your activity and circumvents internet censorship with ease.

---

**[LocalCan](https://www.localcan.com/?ref=tailwindweekly.com)** – Effortlessly expose local projects with Public URLs and .local domains. A great Ngrok alternative.

---

**[LookAway](https://lookaway.com/?ref=tailwindweekly.com)** – Reduce digital eye strain with customizable breaks, smart notifications, and seamless Mac integration.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #184: Bug fixes, fancy attr() and Favicons in 2025 ✨
URL: https://tailwindweekly.com/issue-184/
Last updated: 2025-08-20T08:59:09.000Z
Hello folks!

No major news to report on the Tailwind CSS front except for a few [patch releases](https://github.com/tailwindlabs/tailwindcss/releases?ref=tailwindweekly.com) for fixing bugs and small stuff. The Labs team has been squashing bugs like a mad crew; kudos to them 😄!

Now, let's dive in!

## **🤩 Windy Picks**

[![](https://tailwindweekly.com/content/images/image-268.jpg)](https://calebporzio.gumroad.com/l/SFYKpD?ref=tailwindweekly.com)

VS Code is good—but let’s make it *awesome*.

Tired of distractions, clunky defaults, and spending hours configuring your editor? **[Make VS Code Awesome](https://gumroad.com/a/623146483/SFYKpD?ref=tailwindweekly.com)** by Caleb Porzio takes your setup to the next level, with smarter workflows, killer keybindings, and custom extensions designed to boost your productivity.

This isn’t a boring doc—it's a fun, actionable guide packed with tips to optimize your editor, like:

- **Hide the clutter:** Turn VS Code into a clean, distraction-free workspace.
- **Ditch the mouse:** Master intuitive shortcuts for coding bliss.
- **Teach it PHP:** Get proper autocomplete, test runner setups, and more.

With a 144-page ebook, screencasts, pre-built configs, and exclusive tools, thousands of developers are already coding faster, smarter, and happier.

Stop settling for "meh." It’s time to love your editor. [Get started today](https://calebporzio.gumroad.com/l/SFYKpD?ref=tailwindweekly.com).

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-269.jpg)](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs?ref=tailwindweekly.com)

****[How to Favicon in 2025: Three files that fit most needs](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs?ref=tailwindweekly.com)**

This article is a great guide for anyone tired of juggling dozens of favicon files just to get that tiny logo on a browser tab. Instead of going through the ordeal of generating over 20 static PNG files, the piece introduces a streamlined method using just five icons and a JSON file. It dives into the evolution of favicons, their necessity, and how you can adopt a minimalist approach without sacrificing compatibility across modern browsers.

### **[New capabilities for attr()](https://una.im/advanced-attr/?ref=tailwindweekly.com)**

This article dives into the exciting new capabilities of the `attr()` function in CSS, rolling out with Chrome 133\. It’s a game-changer for web developers, allowing attributes to be used beyond simple strings (think colors, numbers, and percentages) with improved semantic power. From creating dynamic product cards to implementing star ratings and grid placements, the article provides practical demos that showcase how these enhancements can streamline your CSS workflow. I

### **[Solved By Modern CSS: Feature Image](https://ishadeed.com/article/modern-css-feature-image/?ref=tailwindweekly.com)**

The author dives into how to use container queries to switch between classic and circular image caption styles based on the container size, which is way more efficient than using media queries alone. They also explore different layout options like absolute positioning, CSS grid, and padding tricks to achieve the desired design. Plus, there's this cool bit about making everything fluid with container query units, ensuring the design adapts to any screen or container size.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-270.jpg)](https://www.mailercheck.com/?ref=tailwindweekly.com)

****[mailercheck](https://www.mailercheck.com/?ref=tailwindweekly.com)**

MailerCheck is a powerful email verification and deliverability tool built with developers in mind, offering a real-time API to validate email addresses, clean lists, and improve delivery rates. It also provides tools like DMARC monitoring and Inbox Placement testing to help you identify issues with domains, improve email performance, and avoid spam filters. With easy integration into platforms like Mailchimp, ActiveCampaign, and more, it’s a straightforward solution to keep email systems efficient and secure.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-271.jpg)](https://svgl.app/?ref=tailwindweekly.com)

****[svgl](https://svgl.app/?ref=tailwindweekly.com)**

If you’re ever in need of clean, ready-to-use SVG logos for developer tools, frameworks, AI platforms, and so much more, this library is a gem. Svgl features hundreds of SVG logos, all neatly categorized (think "AI," "Authentication," "Design," etc.), making it super easy to find what you need. Each logo also links directly back to the product or company it represents, which is a nice touch for proper attribution.

## **👌 Cool Stuff**

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Apitally](https://apitally.io/?ref=tailwindweekly.com)** – Gain deep insights into your API's usage, performance, and consumer behavior with real-time analytics.

---

**[Git-Cliff](https://git-cliff.org/?ref=tailwindweekly.com)** – A customizable changelog generator for any Git repo, supporting regex parsers and easy integration.

---

**[OpenRouter](https://openrouter.ai/??ref=tailwindweekly.com)** – A unified interface for LLMs: better prices, uptime, no subscription, and trending models showcased.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #183: Cleaner Dev Tools with v4, Fluid Typography, & Creative Box Shadows 😘!
URL: https://tailwindweekly.com/issue-183/
Last updated: 2026-05-23T05:11:20.000Z
Hello folks!

After being very sick for the past week, I’m feeling much better now. Thanks to all who gave me their good wishes on X/Bluesky; we’re back in business 🤩 .

Let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-264.jpeg)

When I started using Tailwind CSS v4, I encountered an annoying pain point: Now that every value is a CSS variable, the dev tools pane looks messy. Well, [that](https://x.com/adamwathan/status/1887534209763275085?ref=tailwindweekly.com) was fixed [this](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.6?ref=tailwindweekly.com) week, and the dev tools look much cleaner.

Adam also shared a [thread](https://x.com/adamwathan/status/1890404835888910467?ref=tailwindweekly.com) yesterday about how Tailwind CSS behaves in Vue/Svelte/Astro and with CSS modules. They’re pretty good tips in there, but the TL;DR is:

- Don’t use `@apply` outside CSS files.
- Import as few CSS files as possible in your JS files.

## **📚 Learning**

[![](https://tailwindweekly.com/content/images/image-265.jpg)](https://css-tricks.com/fluid-superscripts-and-subscripts/?ref=tailwindweekly.com)

****[Fluid Superscripts And Subscripts](https://css-tricks.com/fluid-superscripts-and-subscripts/?ref=tailwindweekly.com)**

Lorenz dives into the issues of static scaling in CSS, which can make text too small on phones or too big on desktops, and offers a modern fix using fluid calculations. You'll learn how to use pure CSS to make these elements scale naturally, ensuring readability and accessibility without needing to tweak them for different contexts. The article breaks down the math behind this fluid approach, showing you how to maintain baseline alignment and adjust the vertical offset. It's all about achieving that perfect balance so your text looks professional and consistent, no matter the screen size.

### **[How not to use box shadows](https://dgerrells.com/blog/how-not-to-use-box-shadows?ref=tailwindweekly.com)**

This article is a wild ride through the unconventional uses of box shadows, showing off some of the most bizarre and creative applications you could imagine. Instead of sticking to the standard UX trends, it dives into the chaotic world of layering countless shadows on a single div, pushing boundaries with performance on an M1 chip. You'll explore everything from creating fake 3D effects with bouncing balls to attempting ray tracing, all with box shadows!

### **[Building a player with Tailwind CSS and Web Components](https://www.mux.com/blog/tailwind-css-audio-player-theme-in-media-chrome?ref=tailwindweekly.com)**

In this piece, you’ll build a custom audio player using Media Chrome, a cool open-source library for creating media players using Web Components. You'll breeze through setting up the HTML structure, incorporating SVG icons, and styling with Tailwind to create a sleek design inspired by the [tailwindui.com](https://tailwindcss.com/plus?ref=tailwindweekly.com) homepage. You’ll also explore some of the web’s coolest features, like CSS custom properties and container queries, making the player responsive and accessible from the get-go.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-266.jpg)](https://screencasting.com/?ref=tailwindweekly.com)

****[screencasting.com](https://screencasting.com/?ref=tailwindweekly.com)**

[screencasting.com](https://screencasting.com/?ref=tailwindweekly.com) is your go-to resource for mastering the art of creating high-quality screencasts that delight your users. Whether you're a seasoned developer or just starting, this comprehensive course provides all the essential tools, from content planning to equipment setup and seamless editing techniques.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-267.jpg)](https://squish.addy.ie/?ref=tailwindweekly.com)

****[Squish](https://squish.addy.ie/?ref=tailwindweekly.com)**

This little gem is perfect if you need a quick, browser-based way to compress or convert images. Squish supports a bunch of popular formats like AVIF, JPEG, PNG, WebP, and even JXL, and lets you export images instantly with customizable quality settings (default is 75%, but you can tweak it). The interface is super clean, just drag and drop your images or click to upload, and you’re ready to go.

## **👌 Cool Stuff**

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Terminal Themes](https://terminal-themes.com/?ref=tailwindweekly.com)** \- Find and create themes for Warp and iTerm2 right from the web. They showcase a featured collection of popular themes and have a web editor where you can create your own and download it for both terminals.

---

**[Lexical](https://lexical.com/?ref=tailwindweekly.com)** – An extensible text editor framework that is fast, accessible, and built for cross-platform use with a simple setup.

---

**[Figmalion](https://figmalion.com/?ref=tailwindweekly.com)** – A weekly Figma newsletter packed with updates, insights, resources, and tools for the design community.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #182: a Tailwind UI redesign and upcoming Adam stream ✨
URL: https://tailwindweekly.com/issue-182/
Last updated: 2025-08-20T09:34:04.000Z
Hello folks!

First shameless plug of the year 🤣 ! I had my first-ever [podcast interview](https://republicaweb.es/podcast/la-espectacular-actualizacion-de-tailwind-css-v4-0-con-vivian-guillen/?ref=tailwindweekly.com) on the Republica Web Spanish podcast; we chatted about Tailwind CSS, this newsletter, and tech in general. If you know Spanish, then I hope you give it a listen!

Let's dive in!

## **🌟 News**

After the successful launch of the v4 stable, the Tailwind Labs team took a breather for their yearly team retreat, then jumped right back into it and released [2 patches](https://github.com/tailwindlabs/tailwindcss/releases?ref=tailwindweekly.com) just this week. Love the energy!

On the Tailwind UI side, Steve mentioned on Twitter that they’ll be redesigning the entire site, and so far, the sneak peeks look [lovely](https://x.com/steveschoger/status/1885083703702958505?ref=tailwindweekly.com) 😍 .

![](https://tailwindweekly.com/content/images/image-261.jpeg)

Adam also [mentioned](https://x.com/adamwathan/status/1884729341499629633?ref=tailwindweekly.com) he’ll be doing some live streaming soon a couple of days ago, so stay tuned for that! He usually does it from his personal Youtube [account](https://www.youtube.com/@AdamWathan/streams?ref=tailwindweekly.com), so I recommend you subscribe if you want to be notified.

## **📚 Learning**

### **[Tailwind v4 Is FINALLY Out – Here’s What’s New (and how to migrate!)](https://www.youtube.com/watch?v=ud913ekwAOQ&ref=tailwindweekly.com)**

If you’re still on the fence about Tailwind v4 and need a quick intro or you want to sell v4 to your boss and/or team then this video is for you! It goes through most of the new stuff with examples and does it in a very engaging way.

### **[The :empty pseudo-class in CSS](https://gomakethings.com/the-empty-pseudo-class-in-css/?ref=tailwindweekly.com)**

You know how sometimes you get those pesky empty divs when you're pulling content dynamically from an API? Well, instead of jumping straight into JavaScript to fix it, you can just use `:empty` to hide those elements with no content. It's super straightforward and keeps your code cleaner and less error-prone.

### **[Relatively New Things You Should Know about HTML Heading Into 2025](https://frontendmasters.com/blog/bone-up-html-2025/?ref=tailwindweekly.com)**

This article is a deep dive into some of the latest developments in HTML, revealing hidden gems that you might not have kept up with. It touches on the evolving capabilities of the `<details>` and `<summary>` elements, including how they can now mimic accordion behavior with some accessibility concerns. There's also the new CSS `::details-content` pseudo-element for styling, and the introduction of styleable `<select>` elements, which opens up design possibilities without disrupting existing CSS. Additionally, it highlights the `inert` attribute for disabling interactivity, the `hidden="until-found"` for maintaining search functionality, and the potential of multi-page view transitions to improved navigation.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-262.jpg)](https://huly.io/?ref=tailwindweekly.com)

****[Huly](https://huly.io/?ref=tailwindweekly.com)**

Huly is the ultimate documentation platform for web developers, offering powerful collaborative editing tools that improve team efficiency and streamline project management. With Huly, you can easily share reference materials, collaborate on plans and roadmaps, store meeting notes, and assign action items, all while enjoying real-time collaboration that unifies your team's vision. Enhance your documents with rich text, images, attachments, and code blocks to organize team plans, create technical documentation, and propel your team's progress toward shared goals.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-263.jpg)](https://easingwizard.com/?ref=tailwindweekly.com)

****[Easing Wizard](https://easingwizard.com/?ref=tailwindweekly.com)**

This is a super handy tool for anyone working with CSS animations or transitions! Essentially, it lets you customize and preview cubic-bezier easing functions right in your browser. You can tweak the control points and see how it affects your animation, plus, you can share your configurations with just a click.

## **👌 Cool Stuff**

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Forward Future](https://www.forwardfuture.ai/subscribe?%5Fbhba=9b02a57b-05bd-4007-a4dd-208e3cf298e3&ref=tailwindweekly.com)** delivers quick, insightful updates on the world of AI—**from breaking stories and major breakthroughs to can't-miss tools**—fresh every morning.

---

**[shadcn-form](https://www.shadcn-form.com/?ref=tailwindweekly.com)** – Form fuilding, but make it eas. Create forms with Shadcn, react-hook-form and zod within minutes.

---

**[Hookdeck Event Gateway](https://hookdeck.com/?ref=tailwindweekly.com)** – Seamlessly manage, process, and deliver messages with Hookdeck's reliable platform for event-driven architectures.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #181: v4 Stable Is Here & Miami Connect Highlights 🚀
URL: https://tailwindweekly.com/issue-181/
Last updated: 2025-08-20T09:58:31.000Z
Hello folks!

After more than a year of work, the Tailwind team released v4 [stable](https://x.com/adamwathan/status/1882219476600635677?ref=tailwindweekly.com) this week 🚀. Now they’ll be enjoying a well-deserved rest!

I already migrated a few sites to v4 and started using it on a client project. It's so fast! I thought I would hate not having a config file but I'm actually loving it all being just CSS.

Now, let's dive in!

## **🌟 News**

[![](https://tailwindweekly.com/content/images/image-255.jpeg)](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com)

It’s real, folks; v4 is finally stable! Here are the highlights:

- [New high-performance engine](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#new-high-performance-engine) — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
- [Designed for the modern web](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#designed-for-the-modern-web) — built on cutting-edge CSS features like cascade layers, registered custom properties with `@property`, and `color-mix()`.
- [Simplified installation](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#simplified-installation) — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
- [First-party Vite plugin](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#first-party-vite-plugin) — tight integration for maximum performance and minimum configuration.
- [Automatic content detection](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#automatic-content-detection) — all of your template files are discovered automatically, with no configuration required.
- [Built-in import support](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#built-in-import-support) — no additional tooling necessary to bundle multiple CSS files.
- [CSS-first configuration](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#css-first-configuration) — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
- [CSS theme variables](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#css-theme-variables) — all of your design tokens exposed as native CSS variables so you can access them anywhere.
- [Dynamic utility values and variants](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#dynamic-utility-values-and-variants) — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
- [Modernized P3 color palette](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#modernized-p3-color-palette) — a redesigned, more vivid color palette that takes full advantage of modern display technology.
- [Container queries](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#container-queries) — first-class APIs for styling elements based on their container size, no plugins required.
- [New 3D transform utilities](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#new-3d-transform-utilities) — transform elements in 3D space directly in your HTML.
- [Expanded gradient APIs](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#expanded-gradient-apis) — radial and conic gradients, interpolation modes, and more.
- [@starting-style support](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#starting-style-support) — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
- [not-\* variant](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#not-variant) — style an element only when it doesn't match another variant, custom selector, or media or feature query.
- [Even more new utilities and variants](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com#even-more-new-utilities-and-variants) — including support for `color-scheme`, `field-sizing`, complex shadows, `inert`, and more.

If you want to learn more, then read the [blog post](https://tailwindcss.com/blog/tailwindcss-v4?ref=tailwindweekly.com) AND check out the new [docs site](https://tailwindcss.com/?ref=tailwindweekly.com). The new design is truly amazing 🤩 .

---

I attended the Miami Tailwind Connect event and had a blast. Adam demoed all the cool features of v4, and after, we went to the rooftop for some pizza and beer.

![](https://tailwindweekly.com/content/images/image-256.jpeg)

I also had the pleasure of attending a special dinner for us Tailwind contributor folks and the Tailwind Labs team. Thank you, Adam and the team, for treating Ben, Justin, and me there to a delicious dinner, it was amazing ❤️ .

![](https://tailwindweekly.com/content/images/image-257.jpeg)

****📚 Learning**

[![](https://tailwindweekly.com/content/images/image-258.jpg)](https://martijnhols.nl/blog/accessibility-essentials-every-front-end-developer-should-know?ref=tailwindweekly.com)

****[Accessibility essentials every front-end developer should know](https://martijnhols.nl/blog/accessibility-essentials-every-front-end-developer-should-know?ref=tailwindweekly.com)**

This article breaks down essential accessibility principles into manageable practices that are easy to apply, such as using semantic HTML, ensuring keyboard navigation works, and crafting better image alt texts. It also emphasizes that these practices not only help users with assistive technologies but also enhance the overall user experience and even boost SEO. With examples primarily using React but applicable to any front-end framework, it’s a must-read for those looking to integrate accessibility into their workflow without a huge time investment.

### **[Sharing a Variable Across HTML, CSS, and JavaScript](https://frontendmasters.com/blog/sharing-a-variable-across-html-css-and-javascript/?ref=tailwindweekly.com)**

Chris Coyer created a Word Search Puzzle Maker because his kid got into word searches. It's simple: you input your words, hit a button, and it fills the grid with random letters, ready to print. The neat part is how they used a *single size variable* across HTML, CSS, and JavaScript to make it all work smoothly. Using Pug to generate HTML, they loop through to create the grid elements. In CSS, the same size variable sets up a grid with the right columns and rows, and in JavaScript, it even enables arrow key navigation to make word entry easier. It’s a clever way to control everything from one place, showing just how powerful integrating these technologies can be.

### **[Running animations without keyframes](https://css-tip.com/animation-without-keyframes/?ref=tailwindweekly.com)**

This article introduces a fresh perspective using the new `@starting-style` feature. Imagine crafting animations without diving into `@keyframes`—not as a replacement but as a handy trick in the right scenarios. The piece walks you through a simple rotation example, using large values for an infinite effect, and then steps it up with a more complex animation involving variables. It demonstrates how you can animate and apply a single variable creatively across different properties, like background and rotation.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-259.jpg)](https://www.useplunk.com/?ref=tailwindweekly.com)

****[Plunk](https://www.useplunk.com/?ref=tailwindweekly.com)**

Plunk is an open-source, cost-effective email platform explicitly designed for web developers, consolidating marketing, transactional, and broadcast emails into one solution. Plunk eliminates the hassle of juggling multiple tools and APIs, offering transparent pricing that only charges for what you use and ensures privacy by hosting all data within the EU, while its responsive email editor guarantees flawless rendering across all platforms, including Outlook.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-260.jpg)](https://photogradient.com/?ref=tailwindweekly.com)

****[Photo Gradient](https://photogradient.com/?ref=tailwindweekly.com)**

This tool lets you create stunning gradients from your own photos! The interface is super intuitive, just upload a photo, and it practically does the work for you. It has a couple of controls that make it unique like Warp shape and gradient type. Perfect for when you need that extra pop of color without the hassle of manual adjustments!

## **👌 Cool Stuff**

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[Pixelcode](https://pixelcode.com/?ref=tailwindweekly.com)** – Instantly convert code from screenshots, PDFs, and videos with a Chrome extension. Supports 30+ languages.

---

**[Alcove](https://tryalcove.com/?ref=tailwindweekly.com)** – Experience Dynamic Island for Mac with fluid transitions, instant notifications, and customizable HUDs.

---

**[Harper](https://writewithharper.com/?ref=tailwindweekly.com)** – Elevate your writing with AI-driven editing and style suggestions tailored for developers.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://docs.google.com/forms/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.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) 😁.
### Tailwind Weekly #180: v4 Stable Launch Next Week, Tailwind Connect in Miami, and 12 Great CSS One-Liners 🤩
URL: https://tailwindweekly.com/issue-180/
Last updated: 2025-08-21T08:43:24.000Z
Hello folks!

I wish you all a happy new year and may this year be filled with exciting opportunities, creative projects, and loads of learning for you all.

To start off the year, Adam [asked](https://x.com/adamwathan/status/1877357812436607258?ref=tailwindweekly.com) Twitter/X why people liked using Tailwind on their projects. The responses were overwhelmingly positive and I encourage you to read the comments, they were very insightful.

Now, let's dive in!

## **🌟 News**

It’s official, V4 stable will be out [next week](https://x.com/adamwathan/status/1879856208552845570?ref=tailwindweekly.com)! It’s highly likely it’ll be announced during the event on Tuesday w, but in the meantime, if you want to play with the beta, then here are the [docs](https://tailwindcss.com/docs/installation/using-vite?ref=tailwindweekly.com)!

![](https://tailwindweekly.com/content/images/image-252.jpeg)

And speaking of Tuesday, the Tailwind team [announced](https://x.com/adamwathan/status/1872759289665995127?ref=tailwindweekly.com) the next Tailwind Connect event, which will be held next Tuesday in Miami, Florida. I’ll be attending and reporting back next week, so stay tuned 😄.

## **📚 Learning**

### **[Everything you need to know about the Popover API](https://www.youtube.com/watch?v=yEiXY%5Fm7u8Q&ref=tailwindweekly.com)**

This video is a fantastic intro to the **Popover API**! It shows you how to create interactive popovers using just HTML attributes and a splash of CSS, no JavaScript required. The tutorial walks you through the basics like toggling popovers, adding dismiss functionality, and even styling them with pseudo-selectors and pseudo-elements like `::backdrop`. It also dives into some cool tricks for positioning popovers and explores browser compatibility, especially with features like anchoring.

### **[console.delight](https://frontendmasters.com/blog/console-delight/?ref=tailwindweekly.com)**

You know how we usually just use `console.log()` for text and variables? Well, it turns out you can actually render CSS, SVGs, and even HTML in the console, too. This technique can add a whole new level of interaction and surprise for curious users. You can use CSS to style console messages, swap text in SVGs with JavaScript, and even create animations. The article even dives into some fun examples, like a running horse animation, and discusses browser compatibility quirks.

### **[12 Modern CSS One-Line Upgrades](https://moderncss.dev/12-modern-css-one-line-upgrades/?ref=tailwindweekly.com)**

This piece walks you through learning how to replace outdated hacks with modern solutions like aspect ratio for media, object-fit for images, and logical properties like margin-inline. Plus, it covers progressive enhancements like text-wrap and scrollbar-gutter that offer slick upgrades without breaking in unsupported browsers. It's all about those easy wins and reducing the need for JavaScript—definitely worth a read if you're into optimizing your code.

## **💅 Showcase**

[![](https://tailwindweekly.com/content/images/image-253.jpg)](https://www.kamikana.com/?ref=tailwindweekly.com)

****[Kamikana](https://www.kamikana.com/?ref=tailwindweekly.com)**

Kamikani is a unique tool designed for web developers who want to learn Japanese in a fun and engaging way. Instead of relying on traditional memorization techniques or flashcards, it incorporates an interactive gaming experience. The mechanics are designed to make studying feel enjoyable, encouraging consistent learning without it feeling like a chore. Players can track their progress on leaderboards while naturally building their Japanese language skills in an intuitive and immersive way.

## **🎁 Resource**

[![](https://tailwindweekly.com/content/images/image-254.jpg)](https://learnvue.co/transitions?ref=tailwindweekly.com)

****[Transitions from LearnVue](https://learnvue.co/transitions?ref=tailwindweekly.com)**

This is a collection of ready-to-use snippets that combine the power of Vue with the styling magic of Tailwind CSS. You can copy and paste animation snippets for `appear` animations, between transitions, and even list add/remove animations. This is perfect for developers who want to save time while ensuring their apps look polished and professional.

## **👌 Cool Stuff**

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[The Writer's Job Newsletter](https://www.thewritersjobnewsletter.com/?ref=tailwindweekly.com)** – Weekly curated writing jobs that pay well, helping freelancers land gigs without the hassle.

---

**[Justin Jackson's Newsletter](https://justinjackson.ca/newsletter?ref=tailwindweekly.com)** – SaaS growth tips, bootstrapping lessons, and honest business insights, sent every Saturday morning.

---

**[The Webman Diaries](https://rishirajjain.substack.com/about)** – Insights on web development, caching, edge computing, serverless, and front-end ecosystems, shared weekly.

---

Do you want to share something with the Tailwind CSS community?  
You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.
### Tailwind Weekly #179: 1 Billion Downloads 🤯!
URL: https://tailwindweekly.com/issue-179/
Last updated: 2025-08-21T08:57:24.000Z
Happy holidays folks!

It's almost Christmas and the Tailwind Labs team is still pumping out v4 betas! We're on [beta 8](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-beta.8?ref=tailwindweekly.ongloat.com) now and the stable release is right in the horizon 🚀

Also, folks, this will be the last issue of the year. We'll take a break and come back on the 11th.

Let's dive in!

## **🌟 News**

We hit a big milestone folks! Tailwind CSS [reached](https://x.com/adamwathan/status/1866469603058057500?ref=tailwindweekly.com) 1 BILLION downloads last week 🤩

![](https://tailwindweekly.com/content/images/image-247.jpeg)

For comparison, Bootstrap has 1,168,536,795 downloads and it took them 13 years (vs 7 for tailwind) 🤯

We also got more sneak peeks for the new official site and Adam may be [thinking](https://x.com/adamwathan/status/1868745562604159112?ref=tailwindweekly.com) of doing a drastic reorganizing of the docs to make it more like a API reference a la MDN.

![](https://tailwindweekly.com/content/images/image-248.jpeg)

****📚 Learning**

![](https://tailwindweekly.com/content/images/image-249.jpg)

****[Beautiful focus outlines](https://medienbaecker.com/articles/focus-outlines?ref=tailwindweekly.com)**

If you’ve ever ignored focus outlines on your site thinking they’re “just for accessibility,” this article will completely change your mind. You’ll learn why focus outlines are so important (keyboard users, anyone?), how browser defaults often fall short, and when custom outlines can make a huge impact. Plus, the article dives into practical tips like using :focus-visible, setting offsets, and even experimenting with animations—all without overwhelming your design.

### **[View Transitions API: Single Page Apps Without a Framework](https://www.debugbear.com/blog/view-transitions-spa-without-framework?ref=tailwindweekly.com)**

This piece introduces the View Transitions API, which lets you create fluid animations when moving between pages—or even within the same page. You’ll learn how view transitions improve perceived performance, how to enable them with just a few lines of CSS, and how to tweak animations to fit your design. It even dives into customizing transitions with JavaScript for advanced use cases like back/forward navigation.

### **[Upgrading Rails applications to Tailwind 4](https://www.zolkos.com/2024/11/30/upgrading-to-tailwind4?ref=tailwindweekly.com)**

If you’re running a Rails app and thinking of upgrading to TailwindCSS 4, this guide is for you. It breaks down the upgrade process step by step, from updating your Gemfile with the latest gems to running the necessary Tailwind upgrade script.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-250.jpg)

****[Reflex](https://reflex.dev/hosting/?ref=tailwindweekly.ongloat.com)**

Reflex is a platform designed for web developers to deploy, manage, and scale Reflex applications with minimal effort. It offers features such as one-command deployment, integration with CI/CD pipelines, multi-region scalability, and tools for monitoring performance through alerts and metrics.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-251.jpg)

****[Gimli](https://gimli.app/tailwind?ref=tailwindweekly.ongloat.com)**

Gimli is another browser extension explicitly designed for Tailwind CSS developers. It lets you preview changes directly on hover and adjust utility values using shortcuts like Cmd/Ctrl + Click or drag gestures to slide between options. The interface is minimal and organized similarly to the official Tailwind docs, keeping everything easy to navigate. It has features like variant overrides, auto-detection for relevant sections (e.g., Grid or Flex), and intelligent class name autocomplete, which makes it a handy tool for tailwind directly within your browser.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Unicorn Club ](https://unicornclub.dev/?ref=tailwindweekly.ongloat.com)**– A free newsletter with top tools, tips, & resources to **fuse design + code and build better products**.

---

**[The WP Weekly](https://thewpweekly.com/?ref=tailwindweekly.ongloat.com)** – A concise newsletter bringing **WordPress pros** the latest **tools, launches, and insights** in just 10 minutes every week.

---

**[Dave Kang's Octopus Life](https://davekang.substack.com/?ref=tailwindweekly.ongloat.com)** – Insights on balancing creative freedom & financial sustainability, from a portfolio career expert.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly 178: Tailwind UI on V4, New Docs Design Sneak Peek and More 🚀
URL: https://tailwindweekly.com/issue-178/
Last updated: 2025-08-21T09:16:19.000Z
Hello folks!

We're officially in the holiday season, and the Tailwind Labs team keeps on giving! We got version updates for Tailwind UI and more info about the new docs design that Steve has been cooking 🤩.

Let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-242.jpg)

Now, **all code snippets on Tailwind UI** have an option to copy v4-compatible markup. Pretty neat!

I'm also assuming they'll be rolling out updates to the templates and Catalyst once v4 is stable, so stay tuned!

Steve gave us [another](https://x.com/steveschoger/status/1864053907447537937?ref=tailwindweekly.ongloat.com) sneak peek at the **upcoming docs redesign,** which looks very elegant and clean.

![](https://tailwindweekly.com/content/images/image-243.jpeg)

****📚 Learning**

![](https://tailwindweekly.com/content/images/image-244.jpg)

****[Overflow Clip](https://ishadeed.com/article/overflow-clip/?ref=tailwindweekly.com)**

This lovely piece delves into the often-overlooked overflow: clip property, showing how it can solve common design headaches by allowing you to control clipping on just one axis, unlike the traditional overflow: hidden. Perfect for scenarios like hero sections or decorative elements, this article guides you through practical examples, making complex CSS behavior easy to grasp. With insights into how clip impacts layout and scroll-driven animations, it's a must-read for anyone looking to refine their CSS skills.

### **[Alt Text: Don’t Just Describe Images](https://www.nngroup.com/articles/alt-text-usability/?ref=tailwindweekly.com)**

The article argues for a shift from visual descriptions to emphasizing usability, ensuring alt text contributes meaningful, non-redundant information to users. With practical advice on when alt text is necessary, it highlights the broader context of web accessibility, making it a must-read for anyone looking to improve user experience on their site.

### **[State of HTML 2024](https://2024.stateofhtml.com/en-US?ref=tailwindweekly.ongloat.com)**

If you're curious about the current landscape of web development, the State Of HTML 2024 survey just recently published its results!

## **💅 Showcase**  

![](https://tailwindweekly.com/content/images/image-245.jpeg)

****[Linkero](https://linke.ro/?ref=tailwindweekly.com)**

Linkero is a powerful tool for web developers seeking to streamline their online presence easily and efficiently. With customizable appearance options and a unique link, Linkero allows you to centralize your links, social media profiles, and more on a single, beautifully designed page.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-246.jpeg)

****[Tips.io](https://tips.io/?ref=tailwindweekly.com)**

Tips.io is an AI-powered website builder designed for fast, hassle-free development with Tailwind CSS. Built on a VS Code-like editor, it offers Tailwind class autocomplete and supports both beginners and experts. It eliminates complex setups with zero-configuration, easy management of HTML, and reusable components. It's ideal for quickly building responsive, multi-page sites, and it comes with free themes, so you don't have to start from scratch.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Website Vice](https://websitevice.com/?ref=tailwindweekly.com)** allows you to explore a curated selection of website examples to inspire your next project. It has examples for all sorts of categories, such as business, startup, SaaS, mobile apps, and services.

---

**[Inkdown](https://marketplace.visualstudio.com/items?itemName=1943time.inkdown&ref=tailwindweekly.ongloat.com)** is a seamless WYSIWYG Markdown editor with VSCode integration. It's like having a Notion-like editor on your Markdown file in VSCode.

---

**[Seline](https://seline.com/?ref=tailwindweekly.com)** – Beautiful, lightweight and privacy-focused analytics to easily track visitor interactions. Free for 3,000 events/month.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-9.jpeg)
### Black Friday/Cyber Week 2024 Deals for the Tailwind CSS Community
URL: https://tailwindweekly.com/black-fridaycyber-week-2024-deals-for-the-tailwind-css-community/
Last updated: 2025-08-21T09:40:48.000Z
Hello folks!

It's that time of the year again and as is tradition, I compiled a list of Black Friday deals that I think could be useful for Tailwind CSS developers.

We'll be back to our regular schedule next week.

Now, let's dive in!

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

As always, let's start with the **[Tailwind Labs bundle](https://tailwindcss.com/plus?ref=tailwindweekly.com)**!

![](https://tailwindweekly.com/content/images/image-241.jpeg)

You'll get access to

- Over [500 Tailwind CSS component examples](https://tailwindcss.com/plus/ui-blocks?ref=tailwindweekly.com) in HTML, React, and Vue
- All of our [website templates](https://tailwindcss.com/plus/templates?ref=tailwindweekly.com), built with Tailwind CSS + Next.js
- The [218-page Refactoring UI ebook](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#the-book)
- All three in-depth Refactoring UI [video tutorials](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#video-tutorials)
- All of the Refactoring UI bonus content, including [color palettes](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#color-palettes), [font recommendations](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#font-suggestions), and an exclusive [icon library](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#custom-illustrated-icons)

**[Lexington Themes](https://lexingtonthemes.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com)**, the most popular **Astro JS and Tailwind CSS bundle**, features 30 stunning multipage templates. Includes new themes, updates, unlimited projects, and lifetime support—no subscription required! Get **40% OFF** with the code **LEXINGTON40**.

**Polypane**, a browser for developers who want to build responsive, accessible, and performant websites,[is offering 25% off their yearly plans](https://polypane.app/black-friday/?ref=tailwindweekly). I**f you build responsive websites, this is a must-have tool.**

**Tower, the excellent git client and the one I personally use** is offering [30% off any plan](https://www.git-tower.com/windows?via=vivian&ref=tailwindweekly.ongloat.com) this week.

**Beyond Code, the makers of Herd and Devtools for Tailwind CSS,** is having [a sale on all their products](https://beyondco.de/?ref=tailwindweekly.com). They're also famous for their Laravel-specific dev tools apps and all their products are super high quality!

**Inspect Flow, the complete developer tool for Tailwind CSS**, is offering 50% off and it's a one-time fee. You can check it out [here](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com).

Caleb Porzio is also offering 50% off on his [Alpine Components product](https://alpinejs.dev/components?ref=tailwindweekly.ongloat.com). They're basically **headless components made with Alpine.js and Tailwind CSS** and it also has examples for integrations with various other libraries.

Tailscan, the **ultimate tool for Tailwind CSS** that lets you build, design, and **debug any Tailwind website** visually right within your browser, is [offering a $30 discount on the lifetime license](https://tailscan.com/?ref=tailwindweekly.ongloat.com#pricing) until Cyber Monday!

**[TailGrids](https://tailgrids.com/?ref=tailwindweekly.ongloat.com)**, a library of **600+ high-quality Tailwind CSS UI components**, lets you effortlessly copy, paste, and start building. It’s available for HTML, React, Vue, and Figma! Get **40% OFF** with the code **BLFCM2024**.

Shruti Balasa, the author of **[Complete Guide to CSS Flex and Grid](https://shrutibalasa.gumroad.com/l/css-flex-and-grid?ref=tailwindweekly.ongloat.com)** and **[Level up with Tailwind CSS](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**, is offering 50% off on both books using the code “BLACKFRIDAY23” valid until Cyber Monday.

The "**CSS for Javascript Developers**" course made by Josh Comeau, which I think is the best CSS course in the market right now, is having a [Black Friday sale](https://css-for-js.dev/?ref=tailwindweekly.ongloat.com) as well

**[JavaScript Flashcards](https://darakondoff.gumroad.com/l/syzcwy?a=623146483&ref=tailwindweekly.ongloat.com)** are perfect for preparing for your next JS interview, featuring the most frequently asked questions to help you succeed. Get **20% OFF** with the code **BLACKFRIDAY2024**.

**[A 1:1 Guide for Engineering Managers](https://karloscodes.gumroad.com/l/team-1-1?a=623146483&ref=tailwindweekly.ongloat.com)** is a practical resource and Notion template designed to transform routine check-ins into meaningful conversations, build stronger teams, and help your people unleash their potential. Get **60% OFF** with the code **BLACKFRIDAY**.

**[TablePlus](https://tableplus.com/?ref=tailwindweekly.ongloat.com)**, the modern, native, and friendly GUI tool for relational databases like MySQL, PostgreSQL, SQLite, and more, is offering **25% OFF** for all plans with the code **BLACK\_FRIDAY\_2024**. If you work with databases, this is a must-have.

The **[Small Bets Community](https://dvassallo.gumroad.com/l/small-bets/BLACK%5FFRIDAY%5F2023?a=623146483&ref=tailwindweekly.ongloat.com)**, an online community for **solopreneurs**, is offering 40% off its lifetime membership.

**[Typefully](https://typefully.com/?via=vivgui&ref=tailwindweekly.ongloat.com)** helps you grow your audience on **𝕏, Threads, LinkedIn and** **Bluesky**. Use AI to improve your posts, schedule content and analyze performance. Get **30% OFF for 1 year** with the code **BF2024**.

**[Show Them Course](https://www.showthem.com/?ref=tailwindweekly.ongloat.com)**, a Landing Page Optimization Course by Rob Hope from One Page Love, is offering **60% off** with the code **BF2024**.

**[Open Graph Design](https://opengraphdesign.com/?ref=tailwindweekly.ongloat.com)** helps you improve the appearance and engagement of your social media posts with a tailor-made Open Graph image. Perfect for startups, side projects, and businesses looking to stand out online. Use code **BF2024** for **$30 OFF**!

Bootstrap Logos is offering a **[Logo Refresh service](https://bootstraplogos.com/refresh?ref=tailwindweekly.ongloat.com)** that gives your existing logo a modern, professional update without the need for a full rebrand. Fast, reliable, and guaranteed results. Use code **40BF24** for **40% OFF** this Black Friday!

These were the deals that stood out to me the most, if you want to check out more then I highly recommend [this list](https://github.com/trungdq88/Awesome-Black-Friday-Cyber-Monday?ref=tailwindweekly.ongloat.com).
### Tailwind Weekly #177: The Tailwind CSS v4.0 beta has landed 😍!
URL: https://tailwindweekly.com/issue-177/
Last updated: 2025-08-22T07:37:25.000Z
Hello folks!

It's official, the [first Tailwind CSS v4 beta](https://x.com/adamwathan/status/1859669606190940368?ref=tailwindweekly.ongloat.com) has been released and, at the time of this writing, we're already on beta [#2](https://github.com/tailwindlabs/tailwindcss/releases?ref=tailwindweekly.ongloat.com) 🔥.

Let's learn more about it!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-237.jpeg)

Here's what v4 is all about:

- **Built for performance* — full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.*
- **Unified toolchain* — built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.*
- **CSS-first configuration* — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.*
- **Designed for the modern web* — built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.*

If you want to know more, the Tailwind team created this *massive* [page](https://tailwindcss.com/docs/installation/using-vite?ref=tailwindweekly.ongloat.com) on what's new, what's changed, and how to set it up.

But the coolest part to me is the [migration tool](https://tailwindcss.com/docs/installation/using-vite?ref=tailwindweekly.ongloat.com). I tested it on a small Astro project and it was pretty accurate. I just needed to make a few tweaks but it got me like 95% there.

To top it all off, if you want to get into the nitty-gritty, Adam did a live stream with Sam Selikoff, which was basically like a "first impressions" video of v4 from Sam's perspective with Adam guiding him and answering his questions. It's a bit long but very worth the watch, especially at the [48:30](https://youtube.com/watch?si=-kWMhoYe0VNWuGjT&t=2910&ref=tailwindweekly.ongloat.com&v=vhcntygYBsI&feature=youtu.be) mark 🤯.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-238.jpg)

****[CSS min() All The Things](https://www.smashingmagazine.com/2024/10/css-min-all-the-things/?ref=tailwindweekly.com)**

Dive into the CSS min() function and explore how it can offer a flexible approach to responsive design without relying heavily on media queries. The min() function smartly chooses the smallest value, helping adjust layouts based on available space without extra calculations or breakpoints. The article breaks down practical examples, from font sizing to margins and widths, demonstrating how min() can create fluid designs using mixed units like viewport and relative units.

### **[JavaScript Sets and Maps: Beyond Arrays and Objects](https://www.trevorlasn.com/blog/sets-and-maps-in-javascript?ref=tailwindweekly.com)**

This article is a great intro to JavaScript Sets and Maps, showing how they can solve problems better than arrays and objects. Before ES6, handling unique values or key types could be tricky and inefficient. If you're looking to improve your code's efficiency and clarity, this article is a great resource!

### **[CSS Fan Out with Grid and @property](https://frontendmasters.com/blog/css-fan-out-with-grid-and-property/?ref=tailwindweekly.com)**

This piece cleverly shows how to leverage CSS Grid to handle layout complexities, making your animations not only easier but also visually appealing. You'll learn to set grid rows dynamically, expanding them smoothly, thanks to custom properties – it's a cool hack for anyone who's struggled with bouncy reveals in animations before. A must-read if you're keen on CSS animation techniques or just want to stay updated with neat grid tricks.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-239.jpeg)

****[Dex](https://getdex.com/?ref=tailwindweekly.com)**

Dex is an innovative personal CRM designed for web developers looking to streamline their networking efforts without the complexities of conventional sales-focused CRMs. It seamlessly integrates your existing workflow by syncing with LinkedIn and other tools to automatically update and organize your contacts, freeing you from manual data entry and allowing you to focus on forging meaningful relationships.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-240.jpeg)

****[Type Scale Generator](https://landin.gs/tools/type-scale-generator/?ref=tailwindweekly.com)**

This Type Scale Generator is perfect for generating responsive type scales, allowing you to customize settings like base body size, font scaling, and even fluid typography across different viewport sizes. The interface is super intuitive—you can easily adjust font weights, line heights, and letter spacing, and get instant previews in various formats like CSS, SCSS, and Tailwind. It's convenient if you're aiming for a consistent, visually appealing typography system without diving headfirst into design theory.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Cursor Directory](https://cursor.directory/?ref=tailwindweekly.com)** – Enhance project collaboration with customizable .cursorrules for chats and quick actions on the Cursor editor.

---

**[Granola AI](https://www.granola.ai/?ref=tailwindweekly.com)** – Simplify meeting notes with easy transcription and formatting for quick, effective review and sharing.

---

**[Astro Weekly](https://astroweekly.dev/?ref=tailwindweekly.com)** is a free 5-minute newsletter on the latest updates, resources, tools, inspiration, and more from the Astro ecosystem.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #176: Fixes for Chrome, Official Templates Marketplace Hints, and New v4 Betas 🚀
URL: https://tailwindweekly.com/issue-176/
Last updated: 2025-08-22T07:53:32.000Z
Hello folks!

We got a couple of new stuff this week, from bugfixes to new v4 features (with tips!), v4 is slowly but surely making progress.

Also, it's the middle of November, and the Black Friday sales are ramping up! I'll be sending a special Black Friday edition in a few weeks, so stay tuned.

Let's dive in!

## **🌟 News**

#### **[Fix](https://x.com/adamwathan/status/1857135673968631889?ref=tailwindweekly.ongloat.com) for custom text selection colors [broken](https://github.com/tailwindlabs/tailwindcss/issues/15000?ref=tailwindweekly.ongloat.com) in Chrome 131**

If you customized the text selection property on your site, then you need to update to tailwindcss@3.4.15 and set this flag on your tailwind config:

#### **We may get an official templates marketplace 👀**

Adam [tweeted](https://x.com/adamwathan/status/1856709014404362693?ref=tailwindweekly.ongloat.com) this week asking template makers to mention their best templates, and the Tailwind Labs team will pick the best ones and showcase them on the Tailwind site. There will probably be a shared revenue scheme which is standard in the industry. I think this will be great for the community so small template makers will get more visibility 🙂

### **A couple of v4 tips from Adam**

We got 3 new v4 betas this week, and Adam tweeted a few of the new coolest features like:

*In v4, you'll be able to specify the [color interpolation mode for gradients](https://x.com/adamwathan/status/1856519817617945047?ref=tailwindweekly.ongloat.com)*

![](https://tailwindweekly.com/content/images/image-231.jpeg)

**In v4, this is [all you'll have to do](https://x.com/adamwathan/status/1855592067029737512?ref=tailwindweekly.ongloat.com) for py-1 to mean 1px instead of 4px, py-7 to mean 7px instead of 28px*

![](https://tailwindweekly.com/content/images/image-232.jpeg)

****CSS now has an official logo 🎨**

This is more on the community side, but it was notable enough to mention it!

Believe it or not, CSS has never had an official logo. When CSS3 came out, people just defaulted to using the CSS3 logo, but it was never *official*. Well the CSS-Next Community Group finally came together and [created one](https://github.com/CSS-Next/logo.css?ref=tailwindweekly.ongloat.com)!

![](https://tailwindweekly.com/content/images/image-233.jpeg)

****📚 Learning**

![](https://tailwindweekly.com/content/images/image-234.jpeg)

****[The most effective ways to improve Core Web Vitals](https://web.dev/articles/top-cwv?ref=tailwindweekly.com)**

This article is a great resource for improving your site's Core Web Vitals, focusing on Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). It gets straight to the point with practical, easy-to-do tricks that really work.

### **[CSS display contents](https://ishadeed.com/article/display-contents/?ref=tailwindweekly.com)**

Another great piece by Ahmad Shadeed! This is a deep dive into the CSS property display: contents and how it can be a game-changer for creating more fluid layouts. He breaks down practical examples, like rearranging elements without altering the HTML structure, and showcases how it can simplify complex layouts by ungrouping elements within containers.

### **[Installing Google Fonts as npm packages](https://www.amitmerchant.com/google-fonts-as-npm-packages/?ref=tailwindweekly.com)**

Amit Merchant dives into a handy solution for installing Google Fonts via npm packages using Fontsource. It tackles the typical issues of traditional font inclusion—avoiding extra HTTP requests, managing multiple fonts conveniently, and addressing privacy concerns—as Fontsource offers a straightforward way to self-host these fonts. Amit explains how easy it is to integrate these fonts into your project with npm commands and import statements, making it a breeze to manage fonts locally, reduce request load times, and even enable offline use for Progressive Web Apps.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-235.jpeg)

****[Querio](https://querio.ai/?ref=tailwindweekly.com)**

Querio is the BI platform that helps developers to query and explore data with AI agents that connect directly to your database, maintaining business context. It supports intuitive querying, dynamic dashboards, and powerful charting—all designed to enhance efficiency and data-driven decision-making.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-236.jpg)

****[FlyonUI](https://flyonui.com/?ref=tailwindweekly.com)**

FlyonUI is an open-source components library built with Tailwind. The library features semantic classes and JavaScript plugins, and its compatible with Vue.js and React. I see this as a [Daisy UI](https://daisyui.com/?ref=tailwindweekly.ongloat.com) competitor, and I really liked their designs.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Velvet](https://www.usevelvet.com/?ref=tailwindweekly.com)** – Deploy AI confidently with easy analysis, evaluation, and monitoring in just 2 lines of code.

---

**[PM2](https://pm2.keymetrics.io/?ref=tailwindweekly.com)** – Effortlessly keep your Node.js apps running 24/7 with PM2's powerful process manager.

---

**[Gleek](https://www.usevelvet.com/?ref=tailwindweekly.com)** – Create diagrams using only your keyboard. Generate and visualize ideas effortlessly for free!

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #175: New v4 Alpha, a Redesign Sneak Peek, and Animation Library Magic 💅🏻
URL: https://tailwindweekly.com/issue-175/
Last updated: 2025-08-22T08:06:34.000Z
Hello folks!

With another week comes another v4 [alpha](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-alpha.31?ref=tailwindweekly.ongloat.com)! We also got a sneak peek of the upcoming Tailwind's homepage [redesign](https://x.com/steveschoger/status/1854579671670607905?ref=tailwindweekly.ongloat.com), and it's looking pretty sleek 💅🏻.

Let's dive in!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-228.jpeg)

****[A Friendly Introduction to Container Queries](https://www.joshwcomeau.com/css/container-queries-introduction/?ref=tailwindweekly.com)**

Josh W. Comeau's article is a fantastic introduction to container queries. If you've been struggling with traditional media queries, this guide shows how container queries can solve layout challenges by applying CSS based on an element's container size, not just the viewport. Josh breaks down the Containment API's role in making container queries viable, with clear examples and practical advice.

### **[Practical Accessibility Tips You Can Apply Today](https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/?ref=tailwindweekly.com)**

Kevin's article provides practical tips to enhance web accessibility by improving key UI elements like dropdown menus, modal dialogs, and tabbed interfaces. He focuses on easy-to-implement strategies like using semantic HTML, ARIA attributes, and proper focus management, which can significantly improve usability for users relying on screen readers and keyboard navigation.

### **[Latency numbers every frontend developer should know](https://vercel.com/blog/latency-numbers-every-web-developer-should-know?ref=tailwindweekly.com)**

Malte Ubl's article from Vercel highlights critical latency numbers every frontend developer should know to improve web performance. It covers how network latency, determined by connection type (e.g., WiFi, 5G, LTE) and server distance, impacts key metrics like TTFB and FCP. The piece underscores the importance of minimizing latency for faster and more responsive web applications.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-229.jpeg)

****[poolside](https://rombo.co/tailwind/?ref=tailwindweekly.com)**

poolside is an innovative AI tailored for software engineers, designed to transform your development process by fine-tuning itself with your code and practices. Offering secure, in-house deployment, it empowers developers in regulated industries to enhance productivity and accelerate software delivery without compromising data security.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-230.jpeg)

****[tailwindcss-motion](https://rombo.co/tailwind/?ref=tailwindweekly.com)**

The Rombo's animation library for Tailwind CSS is perfect for adding smooth, accessible, and performant animations without hassle. It's got a simple syntax and endless configurability, and it's open-source, so you can customize it. Installation is super easy with just an npm install. It includes cool presets like Fade, Slide, and Bounce, plus a visual animator to build and export code for Tailwind, Framer Motion, or GSAP.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Tiiny Host](https://tiiny.host/?ref=tailwindweekly.com)** – Simplify hosting and sharing your web projects with easy uploads and instant links.

---

**[Payload](https://payloadcms.com/?ref=tailwindweekly.com)** – Fast-growing open-source CMS for devs to build dynamic apps with modern, flexible features.

---

**[ServerlessAI](https://serverlessai.dev/?ref=tailwindweekly.com)** – Effortlessly build and scale AI apps client-side with no backend, manage costs, and use latest AI models.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #174: Style queries, music with CSS Grid, and emails with Tailwind 🎨!
URL: https://tailwindweekly.com/issue-174/
Last updated: 2025-08-22T08:17:58.000Z
Hello folks!

No big official news to report this week, but we got a [new v4 beta](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-alpha.31?ref=tailwindweekly.ongloat.com), so the v4 work is coming along nicely. Every week, v4 comes closer and closer to feature parity with v3 and with even new features, I can't wait for the stable release 👌🏻.

Now, let's dive in!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-225.jpeg)

****[On compliance vs readability: Generating text colors with CSS](https://lea.verou.me/blog/2024/contrast-color/?ref=tailwindweekly.com)**

If you've ever wrestled with selecting text colors that stand out against varying backgrounds, this piece is for you! Lea explores the new contrast-color() function, which promises to simplify this process, offering an easy way to ensure text is always readable no matter the background. The article doesn't just stop at introducing new features; it dives deep into leveraging the powerful Relative Color Syntax (RCS), arming CSS devs with the tools to be creative and efficient.

### **[Printing music with CSS grid](https://cruncher.ch/blog/printing-music-with-css-grid/?ref=tailwindweekly.com)**

Stephen Band's blog post dives into using CSS Grid to create accessible and responsive music notation on the web—a solution for musicians tired of squinting at PDFs on small screens. By leveraging CSS Grid's powerful layout capabilities, the post shows how to use data attributes to precisely position notes and symbols, crafting a fluid experience that adapts seamlessly across devices. Whether you're a coder or musician, this approach shows how web technologies can transform digital music rendering.

### **[CSS Scroll-triggered Animations with Style Queries](https://ryanmulligan.dev/blog/scroll-triggered-animations-style-queries/?ref=tailwindweekly.com)**

Sparked by a remarkable CodePen demo, Ryan explores how CSS can replicate effects traditionally managed by JavaScript, like highlighting text as you scroll. The clever use of custom properties and style queries showcases the power and potential of modern CSS, though full browser support is still on the horizon. If you're passionate about innovative web design techniques and curious about pushing CSS to its limits, this post is a fascinating read.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-226.jpeg)

****[Shuttle](https://shuttle.zip/new/s/space/?ref=tailwindweekly.com)**

Shuttle is your go-to solution for smart asset management tailored for web developers, offering a user-friendly platform that ensures your files are always in your control. With the ability to customize sharing settings and keep track of access, you can host, share, and receive creative assets with unmatched ease and security.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-227.jpeg)

****[tailwind-to-inline](https://github.com/vardan-arm/tailwind-to-inline?ref=tailwindweekly.com)**

If you work with email templates and want to use Tailwind CSS, then tailwind-to-inline,might be right up your alley. It solves the headache of needing inline styles in emails by letting you use Tailwind CSS classes just like you would in a regular project. With a single function, you can convert those classes into inline styles, generating email-ready HTML without having to manually style every bit of your template. It's particularly handy for anyone looking to streamline their workflow and minimize errors when designing emails.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

**[Merklemap DNS](https://www.merklemap.com/dns-records-database?ref=tailwindweekly.com)** – Access 4B+ DNS records for security, insights, and network analysis in JSON.

**[cpx](https://cpx.dev/?ref=tailwindweekly.com)** – Run any Composer package command without installation or conflicts, speed up your PHP workflows.

**[bolt.new](https://bolt.new/?ref=tailwindweekly.com)** – Prompt, run, and deploy full-stack web apps seamlessly—start with pre-made templates or build from scratch.

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #173: New V4 Palette and Fresh Tailwind UI Components 🌟
URL: https://tailwindweekly.com/issue-173/
Last updated: 2025-08-25T08:36:36.000Z
Hello folks!

Sorry I missed last week, I had some health issues, but we're back on track now 🙂.

We have some cool updates to [report](https://x.com/samuelgoddard/status/1848483776604815655?ref=tailwindweekly.ongloat.com), but the coolest thing, in my opinion, is that Intercom released a new top-level [page](https://fin.ai/?ref=tailwindweekly.ongloat.com) made entirely with Tailwind CSS v4! And this is not your average "nice text and cool screenshots" landing page; this is one of the most complex web pages I have ever seen 🤯.

Now, let's dive in!

## **🌟 News**

**New Color Palette**

The v4 alpha is coming along nicely, and now we're on [alpha.30](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-alpha.30?ref=tailwindweekly.ongloat.com) but *last* week on, we got a new color palette! It's still a first draft, but its looking pretty nice so far.

![](https://tailwindweekly.com/content/images/image-221.jpeg)

****New Tailwind UI components**

![](https://tailwindweekly.com/content/images/image-222.jpeg)

We got a new [content section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/content-sections?ref=tailwindweekly.com#component-e112c6098be3cddb51fdefe73581193d) with image tiles and stats, a new [feature section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/feature-sections?ref=tailwindweekly.com#component-a942eb436b5cdbccfd682861afe44f06) example with a large screenshot framed by a stylish, glassy border, and a new [footer example](https://tailwindcss.com/plus/ui-blocks/marketing/sections/footers?ref=tailwindweekly.com#component-6202da7e2ba22afb6dd3e6a3e86ee3b2) with a prominent call to action.

### **Headless UI now supports React 19**

The Tailwind Labs team updated Headless UI to [support](https://x.com/reinink/status/1849820489784422908?ref=tailwindweekly.ongloat.com) the latest React 19 RC, but it seems they'll wait for the official release before updating the Tailwind UI templates. Even so, a very welcome update!

### **📚 Learning**

### **[Favorite New Tailwind Extension](https://www.youtube.com/watch?v=ByX1KyW0uPM&ref=tailwindweekly.com)**

Introducing the [Fluid Tailwind](https://fluid.tw/?ref=tailwindweekly.ongloat.com) plugin—this resource walks you through transitioning values like padding, margin, or text size in an elegant, seamless manner using Tailwind's utility classes. What's really impressive is how it maintains compatibility with other popular plugins like Tailwind Merge. The setup has a few tricky spots, but this tutorial carefully navigates you through each step, guiding you to use it in a real-world environment.

### **[How to use the CSS backdrop-filter property](https://blog.logrocket.com/use-css-backdrop-filter-property/?ref=tailwindweekly.com)**

The article dives into creative ways to apply visually rich effects such as blurring, contrast, and hue-rotation to the background of elements, giving you several tools to make your interfaces pop. Whether you're aiming for trendy glassmorphism or subtle grayscale overlays, you'll learn how to implement each with practical examples like popups and galleries. Plus, it covers browser support to ensure compatibility across devices.

### **[How To Manage Dangerous Actions In User Interfaces](https://www.smashingmagazine.com/2024/09/how-manage-dangerous-actions-user-interfaces/?ref=tailwindweekly.com)**

The author explores effective ways to manage dangerous actions in user interfaces, ensuring users don't accidentally perform irreversible tasks. It covers strategies like using modal dialogs for critical actions, implementing "danger zones" for high-risk decisions, and employing passkeys and two-factor confirmations for added security.

## **💅 Showcase**  

![](https://tailwindweekly.com/content/images/image-223.jpeg)

****[Buildkite](https://buildkite.com/?ref=tailwindweekly.com)**

Buildkite is the ultimate Scale-Out Delivery Platform for web developers ready to move beyond CI/CD bottlenecks. With dynamic pipelines, test optimization, and secure package registries, it empowers teams to deliver fast and adaptively, turning complex software delivery into a competitive advantage.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-224.jpeg)

****[Tailwind CSS Patterns](https://railsdesigner.com/tailwindcss-patterns/?ref=tailwindweekly.com)**

This library offers a collection of beautifully crafted patterns made with Tailwind CSS. From timeless classics like polka dots and stripes to more intricate designs like houndstooth and herringbone, these patterns are perfect for adding that visual flair to your projects.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[file.rocks](https://www.file.rocks/?ref=tailwindweekly.com)** – Own your files forever: manage and share via any S3-compatible storage without subscriptions.

---

**[Gitpod](https://www.gitpod.io/?ref=tailwindweekly.com)** – Automate and standardize dev environments. Self-host in 3 minutes and boost your productivity and secure your code.

---

**[noDNS.fyi](https://nodns.fyi/?ref=tailwindweekly.com)** – Preview new websites without DNS changes. Secure, simple setup with automatic TLS/SSL and unique URLs.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #172: Cap Unit Magic, Alt Text Guidelines & Crafting Chrome Extensions with Tailwind CSS 🛠️!"
URL: https://tailwindweekly.com/issue-172/
Last updated: 2025-08-25T08:47:17.000Z
Hello folks!

It's been a calm week on the Tailwind CSS front, no major news to report, but that doesn't mean we're short on exciting content 😉.

Let's dive in!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-218.jpg)

****[CSS Cap Unit](https://ishadeed.com/article/css-cap-unit/?ref=tailwindweekly.com)**

If you’ve ever struggled to align elements based on capital letter height, this piece is a gem. Ahmad walks us through his process, starting with standard solutions like fixed sizes and the ex unit, before landing on the cap unit—a recent addition to CSS that's perfect for this job.

### **[Long Alt](https://adrianroselli.com/2024/04/long-alt.html?ref=tailwindweekly.com)**

In this article, Adrian stresses the importance of keeping alt text concise—brief, free of special characters, and ideally in one language. He demonstrates how excessive alt text can confuse screen readers and browsers, leading to a poor user experience.

### **[How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite](https://www.luckymedia.dev/blog/how-to-create-a-chrome-extension-with-react-typescript-tailwindcss-and-vite-in-2024?ref=tailwindweekly.com)**

Perfect for both beginners and experienced developers, this article walks you through setting up a development environment, creating components, styling with TailwindCSS, and understanding the components of a Chrome extension. Lokman simplifies the setup without skimping on details, ensuring you grasp each step, from creating a Vite project to integrating React and configuring TypeScript. You'll enjoy hands-on learning as you build a functional extension and test it in Chrome.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-219.jpeg)

****[Larabelles](https://larabelles.com/?ref=tailwindweekly.com)**

Larabelles is a vibrant community dedicated to making the world of PHP and Laravel development more accessible to web developers who are under-represented due to their gender. By joining Larabelles, web developers gain access to a wealth of resources, including educational materials and networking events designed to foster personal and professional growth. Connect globally and locally while showcasing your talent and supporting diversity in tech with Larabelles.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-220.jpeg)

****[Magic UI](https://magicui.design/?ref=tailwindweekly.com)**

Magic UI is a UI library with over 50 stunning animated components you can use immediately—all free and open-source. All its components are built using React, TypeScript, Tailwind CSS, and Framer Motion, and it markets itself as a perfect companion for [shadcn/ui](https://ui.shadcn.com/?ref=tailwindweekly.ongloat.com).

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Extism](https://extism.org/?ref=tailwindweekly.com)** – Make all software programmable with an easy, **secure WebAssembly plug-in system**.

---

**[Name Checker](https://namechecker.vercel.app/?ref=tailwindweekly.com)** – Quickly verify your project **name's availability across major package managers**.

---

**[Cap](https://cap.so/?ref=tailwindweekly.com)** – Effortlessly create and share beautiful screen recordings with this **open-source alternative to [Loom](https://loom.com/looms?ref=tailwindweekly.com)**.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #171: New Pricing Example, Latest v4 Alpha, and CSS Layout Magic 🚀
URL: https://tailwindweekly.com/issue-171/
Last updated: 2025-08-25T08:59:49.000Z
Hello folks!

We're officially in Q4, folks, and the v4 release is getting closer 🤞🏻.

Also, this week, the famous Wes Bos gave his biggest and loveliest compliment to Tailwind CSS ❤️.

Tailwind is CSS but [@adamwathan](https://x.com/adamwathan?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) was just nice enough to write it for you— Syntax (@syntaxfm) [October 2, 2024](https://x.com/syntaxfm/status/1841517474929639710?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

Let's dive in!

## **🌟 News**

We did get a brand new pricing section example on Tailwind UI 🤩

![](https://tailwindweekly.com/content/images/image-215.jpeg)

See the demo [here](https://tailwindcss.com/plus/ui-blocks/marketing/sections/pricing?ref=tailwindweekly.com#component-d95a835cac90b32aa5d8baa9ec647b59).

We also got a new v4 [alpha](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-alpha.26?ref=tailwindweekly.ongloat.com) with:

- Support for prefixes
- Added color-scheme utilities
- Support for important option in JS config files
- Add support for blocklist in JS config files

And a lot of other experimental features!

## **📚 Learning**

### **[Scaling CSS Layout Beyond Pixels](https://www.youtube.com/watch?v=8slZJrTK3nE&ref=tailwindweekly.ongloat.com)**

On this talk you'll learn practical tips for using CSS Grid and Flexbox, and discover how functions like clamp(), min(), and max() can transform your layouts. With real-world examples and charming anecdotes (picture childhood pics from a Nebraska farm), this session connects broader CSS principles to everyday challenges, such as responsive design and web accessibility.

### **[With :focus-visible, you can have focus styles when it makes sense](https://hidde.blog/focus-visible-more-than-keyboard/?ref=tailwindweekly.com)**

Traditionally, focus styles were controlled with the :focus pseudo-class, displaying outlines all the time. However, :focus-visible changes the game by only showing focus styles when it makes sense—for example, when a keyboard or non-pointing device is used, but not for mouse clicks. It’s not just about keyboard users; it’s more about when browsers determine focus is appropriate based on heuristics. This subtle but powerful CSS enhancement enhances accessibility and predictability across diverse input methods, from keyboards to assistive tech like braille displays and voice control.

### **[Improving rendering performance with CSS content-visibility](https://nolanlawson.com/2024/09/18/improving-rendering-performance-with-css-content-visibility/?ref=tailwindweekly.com)**

The author delves into optimizing performance for an emoji picker overwhelmed by a whopping 20k custom emoji. Instead of jumping straight into complex solutions like virtualization, Nolan explores content-visibility, a CSS property that helps manage layout and paint performance without compromising the accessibility tree or find-in-page functionality. By leveraging the size predictability of emoji categories, he demonstrates a clever, less intrusive way to boost performance, achieving a significant improvement in rendering speed with reduced code complexity.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-216.jpeg)

****[Trigger.dev](https://trigger.dev/?ref=tailwindweekly.com)**

Trigger.dev is an open-source platform that effortlessly integrates into your existing tech stack, managing background jobs with no timeouts or infrastructure headaches. Enjoy the simplicity of our JavaScript and TypeScript SDK, enabling you to deploy scalable tasks, from video processing to AI integrations, with automatic retries and advanced error handling.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-217.jpeg)

****[tailwindcss-quantity-queries](https://github.com/skttl/tailwindcss-quantity-queries?ref=tailwindweekly.com)**

This neat plugin introduces the power of quantity queries, allowing you to style your components dynamically based on their content structure rather than just viewport size. Whether you're dealing with fewer than three child elements or need to tweak styles for groups larger than five, this tool is your go-to for building responsive and context-aware UIs with ease.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Retcon](https://retcon.app/?ref=tailwindweekly.com)** – Effortlessly rewrite Git history with intuitive drag-and-drop and undo changes with ease.

---

**[Coding Font](https://www.codingfont.com/?ref=tailwindweekly.com)** – Discover your perfect coding font with a fun, interactive experience and enhance your productivity.

---

**[Passit](https://passit.io/?ref=tailwindweekly.com)** – Secure and manage passwords across devices with Passit’s open-source, cross-platform manager.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #170: New Bento Grids, More v4 Alpha Features, and DNS Stories 🌟
URL: https://tailwindweekly.com/issue-170/
Last updated: 2025-08-25T09:12:54.000Z
Hello folks!

This week we got a new component category on Tailwind UI and a new v4 alpha full of cool stuff!

Also, Adam [mentioned](https://x.com/adamwathan/status/1837875531460522152?ref=tailwindweekly.ongloat.com) that Tailwind CSS does over 10 MILLION installs every single week now 🤯. Compare it to reaching 10 million installs in TOTAL in 2020; we have come such a long way 🤩.

Let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-212.jpeg)

****[New Bento Grids category to Tailwind UI](https://tailwindcss.com/plus/ui-blocks/marketing/sections/bento-grids?ref=tailwindweekly.com)**

We first got them on the [Radiant](https://tailwindcss.com/plus/templates/radiant?ref=tailwindweekly.com) template, and [now](https://x.com/reinink/status/1838939160792453369?ref=tailwindweekly.ongloat.com) they're on Tailwind UI. There are 3 different designs and quoting the team:

> *"We built them with customization in mind. We wanted it to be easy for you to swap out the graphics with your own screenshots and content."*

#### **The latest v4 Alpha is full of goodies!**

The latest [v4](https://x.com/adamwathan/status/1838633955232236016?ref=tailwindweekly.ongloat.com) alpha [landed](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-alpha.25?ref=tailwindweekly.ongloat.com) four days ago! Here's the list of cool things that were added:

- Add support for aria, supports, and data variants defined in JS config files
- Support screens in JS config files
- Add bg-radial-\* and bg-conic-\* utilities for radial and conic gradients
- Add new shadow-initial and inset-shadow-initial utilities for resetting shadow colors
- Add field-sizing-\* utilities
- Include gradient color properties in color transitions

## **📚 Learning**

### **[What is DNS? (and how it makes the Internet work)](https://www.youtube.com/watch?v=NiQTs9DbtW4&ref=tailwindweekly.ongloat.com)**

I know this is not your typical frontend related article but I loved this video so much I wanted to share it. This video breaks down DNS in an easy-to-understand way, likening it to your phone's contact list that maps names to phone numbers. You'll follow the journey of a DNS query, learn about how DNS servers work together to find the right IP address, and discover how to protect your browsing with tools like DNS over HTTPS (DoH).

### **[Sticky Headers And Full-Height Elements: A Tricky Combination](https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/?ref=tailwindweekly.com)**

Struggling to get sticky headers and full-height elements to play nice together? In this piece, Philip dives into the quirks of CSS sticky positioning, explaining why sticky headers often misbehave when combined with elements designed to span the full height of the viewport (100vh). He shares practical solutions, from initial mishaps with Flexbox and fixed heights to a clever, final approach using CSS Grid.

### **[Use cases for CSS comparison functions](https://ishadeed.com/article/use-cases-css-comparison-functions/?ref=tailwindweekly.com)**

Curious about how CSS comparison functions can simplify your life? Ahmad Shadeed's article dives into practical use cases for clamp(), max(), and min(), showing how these functions can control fluid sizing, positioning, and more without relying heavily on media queries. From making responsive decorative elements to implementing dynamic loading bars and fluid hero heights, this piece is full of practical tips and examples.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-213.jpeg)

****[t0ggles](https://t0ggles.com/?ref=tailwindweekly.com)**

t0ggles makes juggling multiple projects a breeze for developers. View all your tasks in one place with a visual board where each column is a different project, and tasks are color-coded by status. With smart AI task creation and seamless GitHub integration, it turns your clunky workflow into something smooth and efficient.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-214.jpeg)

****[Beautiful Tailwind CSS Gradients](https://railsdesigner.com/tailwindcss-gradients/?ref=tailwindweekly.com)**

This collection of hand-crafted gradients built with Tailwind CSS is perfect for spicing up your next web app. You can easily copy-paste them into your project and even change the direction of the gradient as you please.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Amnesia](https://goodsnooze.gumroad.com/l/amnesia?a=623146483&ref=tailwindweekly.ongloat.com)** – A Mac app to disable monthly reminders for Screen Capture Access on MacOS Sequoia on a per-app basis.

---

**[Github Profile Generator](https://www.github-profile-generator.in/?ref=tailwindweekly.com)** – Effortlessly create a polished GitHub profile with custom headers, views counter, and intros.

---

**[StakeWeb](https://stakeweb.com/?ref=tailwindweekly.com)** – Monetize unused domains with high-quality, SEO-focused landing pages and keep 100% of your profits.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #169: v4 Progress, Cutting-Edge CSS Techniques, and Accessibility Insights 🌐
URL: https://tailwindweekly.com/issue-169/
Last updated: 2025-08-25T09:24:50.000Z
Hello folks!

v4 development is getting more exciting by the week and we'll be getting so many new features that it'll be like a whole new framework! I'm excited to go over the docs once they're released, just to relearn everything it offers once again. Kudos to the Tailwind Labs team 😄!

Let's dive in!

## **🌟 News**

The work on v4.0 is still ongoing, and Adam spent the week tweeting about new features the team was developing.

Things like:

- [Pointer](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer?ref=tailwindweekly.ongloat.com) media query support ([tweet](https://x.com/adamwathan/status/1836866911881097514?ref=tailwindweekly.ongloat.com)), which would be incredibly useful to target only touchscreen devices
- Conic and radial gradient support ([tweet](https://x.com/adamwathan/status/1836846761622569410?ref=tailwindweekly.ongloat.com)), which v3 doesn't currently have
- Preserving custom shadow color when you change shadow size ([tweet](https://x.com/adamwathan/status/1836477989124448456?ref=tailwindweekly.ongloat.com))
- And my favorite: now we won't have to override a text size's line height on every breakpoint! (touchscreen)

Overall, a very productive week on the v4 front! 😄

## **📚 Learning**

### **[Email Obfuscation Using CSS](https://www.youtube.com/watch?v=w0rQwOSVmZs&ref=tailwindweekly.com)**

Want to keep your email visible to users but hidden from spam bots? This video by Zoran Jambor dives into a clever technique using CSS to obfuscate email addresses, ensuring they stay accessible for real people while blocking unwanted spam. Zoran breaks down how this works, why it's effective, and even gives a live demo showing the technique in action.

### **[Transition to height: auto; & display: none; Using Pure CSS](https://www.youtube.com/watch?v=1VsMKz4Zweg&ref=tailwindweekly.com)**

Animating height: auto and transitioning from display: none has been a headache for many developers, often requiring JavaScript or hacks. But in this video, Zoran Jambor walks you through a cutting-edge technique using the new calc-size() function and transition-behavior property, making these tricky animations straightforward.

### **[The web's clipboard, and how it stores data of different types](https://alexharri.com/blog/clipboard?ref=tailwindweekly.com)**

Ever wondered how the clipboard on the web works? Alex Harri dives deep into the intricacies of the web's clipboard and its APIs. This detailed post explores how the clipboard stores various data types like plain text, HTML, and images, and reveals some cool hacks and proposals (like Web Custom Formats) to overcome its limitations. Alex demonstrates how to use the async Clipboard API for reading and writing different data types and explains why certain formats are restricted for security reasons. If you’re curious about how the web clipboard really works and want some practical insights, this article is definitely worth a read!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-210.jpeg)

****[Replit](https://replit.com/?ref=tailwindweekly.com)**

Replit is an AI-powered platform that streamlines software development and deployment, allowing you to build, share, and deliver applications quickly. It offers a collaborative cloud workspace where you can write, review, and debug code in real time with built-in AI support for generating and debugging code.

PS: We all know Tailwind websites tend to look really cool so I decided to ditch the showcase website description and aim more for explaining what the site is about, I hope you like it!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-211.jpeg)

****[WhoCanUse](https://www.whocanuse.com/?ref=tailwindweekly.com)**

WhoCanUse is an excellent tool that lets you see how people with different types of visual impairments will perceive your color combinations. It calculates contrast ratios and grades them according to WCAG standards but also simulates how those colors look to people with color blindness, cataracts, and low vision, among other conditions. It's super insightful, letting you tweak your designs to be more accessible and inclusive.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Polar](https://polar.sh/?ref=tailwindweekly.com)** – **Monetize your coding projects effortlessly**; handle billing, upsales, and taxes with ease.

---

**[Calendar Link](https://github.com/AnandChowdhary/calendar-link?ref=tailwindweekly.com)** – Generate **event links for Google, Outlook, Yahoo!**, and other popular calendars.

---

**[Droppable](https://pixelwrld.co/droppable?ref=tailwindweekly.com)** – Send large files from your Mac desktop quickly and easily, **no subscriptions**.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #168: Radiant Debuts, Tailwind CSS v4.0 Updates, and Adam's Laracon Highlights 🤩
URL: https://tailwindweekly.com/issue-168/
Last updated: 2025-08-26T08:32:30.000Z
Hello folks!

The Tailwind UI team has been busy! We got a new stunning Tailwind UI template and more updates for v4, and we even got a potential release date 😄

Also you *cannot* miss Adam's Laracon talk where he gave a mind blowing presentation about making "responsive" props *with just CSS*.

Now, let's dive in!

## **🌟 News**

**New Tailwind UI template**

Say hello to [Radiant](https://tailwindcss.com/plus/templates/radiant?ref=tailwindweekly.com) ([preview](https://radiant.tailwindui.com/?ref=tailwindweekly.ongloat.com)).

![](https://tailwindweekly.com/content/images/image-208.jpeg)

**"Radiant is a beautiful multi-page SaaS business template built with Tailwind CSS and Next.js, designed and built by the Tailwind CSS team.*

*It's designed to be easy to adapt for your own project by dropping in your own app screenshots and content. Even the animated bento cards on the home page are built to be customized.*

*The blog is powered by [Sanity](https://www.sanity.io/?ref=tailwindweekly.ongloat.com), so even the non-developers on your team can publish new articles.*

*Like all of our templates, it's a free update if you've got a Tailwind UI All-Access license"*

There's even an [official blog post](https://tailwindcss.com/blog/2024-09-12-radiant-a-beautiful-new-marketing-site-template?ref=tailwindweekly.ongloat.com) that goes deep into the technical side of creating it, I highly recommend you read it, even if its for mere curiosity.

I must say, after having seen all the teasers on Twitter, the design looks stunning, and those bento box sections are 👌🏻.

**An update on Tailwind CSS v4.0**

Adam sent a big email update on Friday and one of the topics was v4\. He gave a summary of the progress so far:

- The main focus has been backward compatibility
- 23 new alpha releases have been rolled out since March
- JavaScript configuration files and plugins are finally supported, including complex ones like @tailwindcss/typography.

He also said that the team aims for a beta release in early November, with hopes to finalize the stable version of v4.0 by the end of the year 🤞🏻.

### **Adam's Laracon Talk**

Adam gave a talk at Laracon US a couple of weeks ago and I watched it live, I cannot tell you the amount of "wow" moments I had with the learnings he shared, especially the final tip! I have been coding CSS for 10 years now, and THAT tip was worth the price of the conference! I won't spoil you, you have to watch it 🤭.

## **📚 Learning**

### **[Finally Understanding The Usefulness Of CSS Subgrid: In Just 10 Minutes](https://www.youtube.com/watch?v=GviAcM2Vzhc&ref=tailwindweekly.com)**

Ever heard of CSS Subgrid? This video dives into this overlooked feature, showing how it can solve annoying alignment issues in your layout, like misaligned pricing tables when text changes. It’s a quick, eye-opening guide that makes CSS Grid setups way more robust.

### **[The Undeniable Utility Of CSS :has](https://www.joshwcomeau.com/css/has/?ref=tailwindweekly.com)**

Josh Comeau explores the incredible potential of the CSS :has pseudo-class, which allows styling a parent element based on its child’s state. He covers real-world use cases like creating interactive UI elements and even a JavaScript-free Dark Mode toggle.

### **[Creating Perfect Font Fallbacks in CSS](https://www.aleksandrhovhannisyan.com/blog/perfect-font-fallbacks/?ref=tailwindweekly.com)**

The author discusses the importance of using font-display: swap to prevent invisible text while web fonts load, but points out the potential issue of layout shifts when fallback fonts are not compatible. He introduces CSS properties like size-adjust, ascent-override, and descent-override to finesse font metrics and minimize these shifts.

## **💅 Showcase**

### **[hi.new](https://www.hi.new/?ref=tailwindweekly.com)**

Who knew email security could look this good 😍? Hi.new’s sleek dark theme with vibrant green accents creates a stunning, modern vibe. It's all straight lines and green accents, and with clean typography, it makes email protection both stylish and user-friendly.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-209.jpeg)

****[Loadership](https://www.loadership.com/?ref=tailwindweekly.com)**

LoaderShip offers a huge variety of CSS-only loaders, from spinners to progress bars, and the best part is, there's no need for any dependencies or installations. It’s super easy to use – just pick your favorite style, tweak the settings to match your brand, and copy-paste the generated CSS code straight into your project. Plus, you get real-time previews as you configure, so you can see exactly what you're working with.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[DeskPad](https://github.com/Stengo/DeskPad?ref=tailwindweekly.com)** – Create a **virtual monitor for seamless screen sharing** and easy workspace management.

---

**[Icons for AI](https://iconsforai.com/?ref=tailwindweekly.com)** – Free **16x16 SVG icons tailored for AI projects,** perfect for enhancing your UI designs.

---

**[Overleaf](https://www.overleaf.com/?ref=tailwindweekly.com)** – Write like a pro with Overleaf, the **collaborative, online LaTeX editor** for technical documents.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #167: v4 Teasers, CSS Mysteries, and Accessible Web Tips 💡!
URL: https://tailwindweekly.com/issue-167/
Last updated: 2025-08-26T08:44:57.000Z
Hello folks!

This week brings exciting updates with Tailwind v4 on the horizon, plus some cool insights for refine your CSS mental model and improving web accessibility.

Let's dive in!

## **🌟 News**

v4 is so close! Adam teased a new v4 alpha with JS config file support and plugin support on Twitter

> Quick demo of JS config file support and plugin support in the latest Tailwind CSS v4 alpha 🫣 [pic.twitter.com/3ctK6dtPm4](https://x.com/adamwathan/status/1830715726195306731?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [September 2, 2024](https://x.com/adamwathan/status/1830715726195306731?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

And also did a live coding session where he upgraded some projects to the new v4 alpha

> Live upgrading some projects to the new Tailwind CSS v4 alpha [https://t.co/5aQ1kcRZGx](https://x.com/i/broadcasts/1OwGWNDRzknKQ?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [September 5, 2024](https://x.com/adamwathan/status/1831740214051799281?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

And it also turns out that v4 will also include a site design refresh! Steve showed a couple of illustration examples which will be used on the new site

![](https://tailwindweekly.com/content/images/image-205.jpeg)

****📚 Learning**

### **[The Secret Mechanisms of CSS](https://www.youtube.com/watch?v=kj7WGnUDaI4&ref=tailwindweekly.com)**

Josh takes you through a very relatable problem — an image in a container with unexplained extra space — and not only gives a solution but breaks down *why* it happens. He talks about CSS treating images like text elements, how we often jump to Stack Overflow or ChatGPT for quick fixes like line-height: 0, and the importance of digging deeper into how CSS really works. This talk will shift your mindset from "quick fixes" to real understanding, making your CSS game so much stronger!

### **[Improving the Screen Reader Experience for Learn WCs](https://component-odyssey.com/articles/12-improving-the-screen-reader-experience-for-learn-wcs?ref=tailwindweekly.com)**

The author walks you through the real-world challenges they faced while building *Learn WCs*, a web component learning tool, and how testing with a screen reader helped them discover issues with how elements were announced (like form states not being clear or decorative content being read unnecessarily). They cover practical solutions, like using ARIA attributes, adding hidden elements for screen readers, and making interactive components more intuitive. If accessibility is on your radar, this one’s a must-read!

### **[Quick guide to web typography for developers](https://sinja.io/blog/web-typography-quick-guide?ref=tailwindweekly.com)**

This is a super practical breakdown of how to make text look clean and readable on the web, especially for developers who might not have a designer at hand. He covers everything from choosing fonts, using local vs. external ones, and why WOFF2 is the go-to format. There’s also great advice on handling line height, setting rems, and even working with variable fonts for better performance. Perfect for getting solid results without deep-diving into typography theory!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-206.jpeg)

****[ImReallyATRex](https://www.imreallyatrex.com/?ref=tailwindweekly.com)**

This musician site hits all the right notes with its bold, in-your-face style! The neon red typography against the dark background immediately grabs your attention and that shirtless guitarist? Total rockstar energy, giving the site a raw, authentic feel. The playful touches like the skull logo and “Next Time” buttons keep things fun but edgy. And the subtle grid textures tie everything together, creating a laid-back yet confident look that totally matches the vibe of an underground music scene. Definitely one of the cooler designs out there!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-207.jpeg)

****[Chai Builder](https://www.chaibuilder.com/?ref=tailwindweekly.com)**

Chai Builder is an open-source, drag-and-drop page builder that makes creating websites easy. The desktop app, Chai Studio, lets you work offline, integrates seamlessly with React, and even exports your designs as HTML, JSX, or Vue snippets. The kicker? It's AI-powered, so you can use AI to style and tweak your pages. It’s perfect if you need to get something out the door fast without sacrificing customization.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[0xCAFE](https://0xcafe.news/?ref=tailwindweekly.ongloat.com)** \- **Get your daily dose of tech with quick news** 📰, must-read articles 📚, and interesting GitHub repositories 💻—**all packed into a concise 15-minute read**. 📧

---

**[OrbStack](https://orbstack.dev/?ref=tailwindweekly.com)** – A fast, lightweight **Docker & Linux alternative for macOS** with low memory usage and no battery drain.

---

**[blocks.md](https://blocks.md/?ref=tailwindweekly.com)** – Turn your **Markdown into beautiful, customizable forms and web pages** with ease. Fully localizable.

---

**[Swapy](https://swapy.tahazsh.com/?ref=tailwindweekly.com)** – Easily **add drag-to-swap functionality to any layout** with just a few lines of code. Framework-agnostic.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #166: Simplifying Web Performance, HTML Semantics, and Tailwind Signals Magic 🌟!
URL: https://tailwindweekly.com/issue-166/
Last updated: 2025-08-26T09:04:27.000Z
Hello folks!

I had the pleasure of finally meeting Adam face-to-face at Laracon US this week.

![](https://tailwindweekly.com/content/images/image-201.jpeg)

And his talk was top-notch! It was all about new but obscure CSS and how math in CSS can be very powerful for some use cases. I'll share it with you all as soon as it comes out!

Now, let's dive in!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-202.jpeg)

****[blocking=render: Why would you do that?!](https://csswizardry.com/2024/08/blocking-render-why-whould-you-do-that/?ref=tailwindweekly.com)**

This is a deep dive into the newly implemented blocking=render attribute for <script> and <style> elements. While it might seem counterintuitive to intentionally make resources render-blocking, Harry breaks down the rare but specific scenarios where this attribute can be crucial. He explains the differences between non-blocking, render-blocking, and parser-blocking states, and how stylesheets and scripts impact web performance.

### **[The article element](https://heydonworks.com/article/the-article-element/?ref=tailwindweekly.com)**

Heydon’s latest dive into the <article> element is both funny and spot-on. He revisits the excitement around HTML5’s launch and the confusion that followed with elements like <article>. The article breaks down how <article> is supposed to define a self-contained section, but Heydon points out the irony that many still struggle with proper HTML structure. He emphasizes how crucial headings are for accessibility and questions if <article> really adds much value. If you’re into HTML semantics with a side of humor, this one's worth a read.

### **[One line CSS solution to prevent anchor links from scrolling behind a sticky or fixed header](https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html?ref=tailwindweekly.com)**

If you've ever had a sticky or fixed header mess with your anchor links, this article offers a super simple fix. It introduces a one-line CSS solution using scroll-margin-top or scroll-padding-top to prevent your content from getting hidden behind the header when an anchor link is clicked. With solid browser support, you can implement this fix right away and improve your site's UX in just one line of code.

## **💅 Showcase**  

![](https://tailwindweekly.com/content/images/image-203.jpeg)

****[Planetscale](https://planetscale.com/?ref=tailwindweekly.com)**

The latest Planetscale site offers a clean, professional design that prioritizes usability. It’s all about clarity and ease of use here—think crisp typography, subtle colors, and a layout that just flows effortlessly. The way they highlight their MySQL platform’s scalability and performance without overwhelming you with technical jargon is impressive. And that touch of gradient on the feature boxes? 👌🏻.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-204.jpeg)

****[tailwindcss-signals](https://github.com/toolwind/signals?ref=tailwindweekly.com)**

This new plugin lets you use a declarative API to signal states, simplifying your code by eliminating the need for chained variants. It’s still experimental and relies on style queries (which aren’t fully supported in all browsers yet), but it’s worth exploring if you want to future-proof your Tailwind projects.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Wasp](https://wasp.sh/?ref=tailwindweekly.com)** – **Rails-like framework for React and Node.js**. Build and deploy full-stack apps with minimal code.

---

**[Instant](https://www.instantdb.com/?ref=tailwindweekly.com)** – **Real-time, client-side database for building collaborative, offline-ready apps** with ease. No backend required.

---

**[Hugeicons Pro](https://hugeicons.com/?ref=tailwindweekly.ongloat.com)** – **36,000+ beautifully crafted icons for designers and developers**. Customizable, scalable, and lightweight.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #165: Popover API, CSS Animation Magic, new CSS Math function 🤓
URL: https://tailwindweekly.com/issue-165/
Last updated: 2025-08-26T09:17:38.000Z
Hello folks!

It's been a quiet week, and Adam is surely preparing for his Laracon talk next week, "*Designing a Component Library.*" I'll have the privilege of attending the conference as well and will tell you all about it in the next issue!

Let's dive in!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-198.jpeg)

****[Popover API is Here](https://frontendmasters.com/blog/popover-api-is-here/?ref=tailwindweekly.ongloat.com)**

So, the Popover API is finally out, and it’s actually pretty useful! If you've ever had to deal with popups or modals, you’ll appreciate this guide—it shows you how to create elements that pop up without locking the rest of the page, so users can still interact with other stuff. The only thing is, it’s not perfect yet for things like tooltips until the Anchor Position API gets more support, but once that’s in place, it’ll be even more powerful. If you're tired of wrestling with popups, this is definitely worth checking out.

### **[CSS animation-composition](https://12daysofweb.dev/2023/animation-composition/?ref=tailwindweekly.com)**

Tyler Gaw’s article on CSS animation-composition explains how to gain more control over animations by letting you adjust whether values replace, add to, or accumulate with existing styles. While it’s not something you’ll use every day, this property is great for more complex animation scenarios where precision is key.

### **[The New CSS Math: rem() and mod()](https://danielcwilson.com/posts/mathematicss-rem-mod/?ref=tailwindweekly.com)**

Dan Wilson's article dives into two new CSS math functions, rem() and mod(), which bring remainder and modulus operations directly to CSS. With rem(), you can calculate remainders just like in JavaScript’s %, while mod() gives you similar behavior but with a twist—it takes the sign of the divisor instead of the dividend. These functions are handy for more precise control over layout and rotation, and while they’re available in Safari and Firefox, you’ll need to enable a feature flag in Chrome/Edge.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-199.jpeg)

****[Campsite](https://www.campsite.com/?ref=tailwindweekly.com)**

Adam shared this one recently, and I just had to mention it! Campsite's design is all about balance—minimal yet functional, and dark mode never looked so good! The layout feels open with its strategic use of white space, making navigation smooth and intuitive. The typography is clean and modern, and the subtle use of color highlights key features without being overwhelming. Overall, a beautiful site!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-200.jpeg)

****[Tailwind Class Genie](https://marketplace.visualstudio.com/items?itemName=yannxaver.tailwind-class-genie&ref=tailwindweekly.ongloat.com)**

If you ever get tired of scrolling through docs to find the right Tailwind class, this VSCode extension is a game-changer. Tailwind Class Genie lets you cycle through class names directly in your editor, so you can focus on how things look without memorizing every utility. You just use a couple of key bindings to switch up or down between classes like font-normal or mr-24—no need to constantly check the docs! It's a massive time-saver, especially for devs who are deep in Tailwind projects and just want to tweak spacing or typography on the fly.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Bref](https://bref.sh/?ref=tailwindweekly.com)** – Deploy **serverless PHP apps on AWS**, scaling effortlessly while reducing infrastructure management and costs.

---

**[Avatars](https://copyui.com/templates/avatars?ref=tailwindweekly.com)** – A **Figma plugin boilerplate** with TypeScript integration to jumpstart plugin development and streamline workflows.

---

**[Share URL](https://nigelotoole.github.io/share-url/?ref=tailwindweekly.com)** – Easily **share URLs using Web Share**, copy to clipboard, or **post to social media** with customizable options.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #164: Fun text underlines and more practical uses for the :has() selector 🎨
URL: https://tailwindweekly.com/issue-164/
Last updated: 2025-08-26T09:26:19.000Z
Hello folks!

No official news to report this week except that Steve is exploring some [thumbnail designs](https://x.com/steveschoger/status/1824091604983931348?ref=tailwindweekly.ongloat.com), maybe for a new Tailwind UI product? We'll see 👀!

Let's dive in!

## **📚 Learning**

### **[Tailwind Toot — text underlines, but cooler](https://www.youtube.com/watch?v=WSCkaPXcZoA&ref=tailwindweekly.com)**

Okay, this video is a fun little deep dive into making text underlines more interesting with Tailwind CSS. If you think underlines are boring, you're not alone—this tutorial shows you how to change things up. The author plays around with colors, starting with a basic violet, but then takes it a step further by switching the underline style to wavy, dotted, dashed, and more.

### **[Some little ways I’m using CSS :has() in the real world](https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world/?ref=tailwindweekly.com)**

This is a practical look at how Andy Bell has been using the :has() pseudo-class in actual client projects. He shares a few real-world examples, like adjusting banner layouts based on the presence of a button or using :has() to flexibly style form labels when they contain inputs. Nothing fancy here, but definitely a solid read if you want to see how :has() can make your life easier.

### **[Your background images might be causing CLS](https://blog.sentry.io/your-background-images-might-be-causing-cls/?ref=tailwindweekly.com)**

This article digs into a sneaky issue you might not even realize is messing up your site’s performance—background images causing Cumulative Layout Shift (CLS). The author explains how CLS is measured, why it matters for Core Web Vitals, and how even background elements can contribute to the problem. The post wraps up with a practical fix: adding width and height attributes to avoid these shifts, and even shows how to use semantic CSS for better results.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-196.jpeg)

****[Bytebase](https://www.bytebase.com/?ref=tailwindweekly.com)**

This one’s for all the database lovers out there! 😍 Bytebase is an open-source solution for schema migrations and database management at scale. The landing page is crisp and professional, with a nice mix of dark and light themes while keeping the visuals minimal. What really stands out are the subtle gradients and beautiful typography—clean and easy on the eyes.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-197.jpeg)

****[tailwindcss-scoped-preflight](https://github.com/Roman86/tailwindcss-scoped-preflight?ref=tailwindweekly.com)**

If you’ve ever run into CSS collisions when combining Tailwind with other UI libraries, this plugin is a game-changer. It lets you isolate Tailwind’s base styles (preflight) to specific parts of your DOM, preventing conflicts with external libraries. It’s super customizable—you can control where these styles apply or remove/modify them if needed. If you’re working on a project with mixed tech stacks, this tool can save you from a lot of headaches!

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Sendy](https://sendy.co/?ref=tailwindweekly.com)** – Self-hosted newsletter tool to **send bulk emails 100x cheaper via Amazon** SES, starting at $1/10k emails.

---

**[Bruno](https://www.usebruno.com/?ref=tailwindweekly.com)** – Git-friendly, **offline API client using plain text for collections**. Privacy-focused, no cloud-sync, always local.

---

**[Editor.js](https://editorjs.io/?ref=tailwindweekly.com)** – **Free, block-style editor that outputs clean JSON**. Easy to extend, open-source, and built for developers.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #163: Performance Fixes, Utility-First CSS Myths, and `aria-current` styling 🤩
URL: https://tailwindweekly.com/issue-163/
Last updated: 2025-08-28T08:33:50.000Z
Hello folks!

This week, we’re bringing you a fresh batch of Tailwind goodness, from a key performance fix in v3.4.8 to myth-busting insights on utility-first CSS. Plus, we take a closer look at the sleek redesign of Deno’s site and introduce a handy new Tailwind plugin for viewport-based animations.

Let's dive in!

## **🌟 News**

No major news in the ecosystem this week except for the [v3.4.8 release](https://github.com/tailwindlabs/tailwindcss/releases?ref=tailwindweekly.ongloat.com), which fixed a potential performance issue with some specific glob patterns on the content property.

The issue was [documented on Twitter](https://x.com/timneutkens/status/1783851267237781574?ref=tailwindweekly.ongloat.com) a few months ago, and the amazing [Robin](https://x.com/malfaitrobin?ref=tailwindweekly.ongloat.com) came up with a clever [fix](https://github.com/tailwindlabs/tailwindcss/pull/14140?ref=tailwindweekly.ongloat.com). See another Twitter thread [here](https://x.com/adamwathan/status/1821286325259239554?ref=tailwindweekly.ongloat.com).

## **📚 Learning**

### **[Utility First CSS Isn’t Inline Styles](https://www.youtube.com/watch?v=g6wtyg3O4Fo&ref=tailwindweekly.com)**

Sarah Diang’s talk brilliantly dispels the myth that utility-first CSS is just fancy inline styles. She explains how atomic classes, unlike inline styles, are part of a modular system that offers powerful features like media queries and pseudo-classes, making them far more flexible and maintainable. If you have a dev friend still skeptical about Tailwind CSS they this is a good talk to recommend to them.

### **[What is a Component Library and Should You Build Your Own?](https://component-odyssey.com/articles/10-what-is-a-library-should-you-build-your-own?ref=tailwindweekly.com)**

This piece dives deep into the concept of component libraries, exploring what they are and whether you should build your own. I liked that it draws parallels between web development and music albums, mentioning how component libraries save time, reduce repetitive work, and ensure consistency across projects.

### **[How to use aria-current in Tailwind](https://www.youtube.com/watch?v=910m7o1xdMA&ref=tailwindweekly.com)**

In this brief tutorial, Chris shows how to style navigation links in Tailwind CSS when using the aria-current="page" attribute for accessibility. By extending the aria object in the Tailwind config file, Chris creates a custom style that underlines the current page link, making it visually different for sighted users while also ensuring screen readers can accurately identify the current page.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-194.jpeg)

****[Deno](https://deno.com/?ref=tailwindweekly.com)**

I previously featured the Deno site before but they recently did a redesign and the new site looks sooo good 😍. The dark theme gives it a sleek, modern feel, while the green accents add just the right touch of vibrancy. The typography is clean, and the use of space is impeccable—nothing feels crowded or overwhelming. I love how the site guides you through its features with clear, concise sections, each highlighting what Deno has to offer.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-195.jpeg)

****[tailwindcss-intersect](https://github.com/heidkaemper/tailwindcss-intersect?tab=readme-ov-file&ref=tailwindweekly.ongloat.com)**

This cool plugin lets you leverage the power of the Intersection Observer API right within Tailwind's utility classes. Think of it as adding :hover-like states but based on an element's visibility in the viewport—like making an element fade in as it scrolls into view. It's super easy to integrate, just a few lines in your config, and you're good to go.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Vim for Docs](https://chromewebstore.google.com/detail/vim-for-google-docs/aphmodfjbhofkpibocbggkdfnpbpjmpp?ref=tailwindweekly.ongloat.com)** – Enhance **Google Docs with Vim keybindings** for lightning-fast editing and seamless navigation.

---

**[StreamPot](https://streampot.io/?ref=tailwindweekly.com)** – Simplify video processing with a **friendly FFmpeg API** for seamless media management in the cloud.

---

**[ImprovMX](https://improvmx.com/?ref=tailwindweekly.com)** – **Set up free email forwarding for your domain** in seconds with fast, reliable, and secure email aliases.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #162: v4 new features, more Heroicons, and a new work log!
URL: https://tailwindweekly.com/issue-162/
Last updated: 2025-08-28T08:49:24.000Z
Hello folks!

After a short hiatus to take care of some health stuff, we're back!

V4 is still in active development, and we got a ton of new features for it! Remember that the main plan is to reach feature parity with v3 but using CSS syntax and, of course, the speed improvements, among other things. It's so close!

Now, let's dive in!

## **🌟 News**

First and most important thing: Adam decided to share weekly team updates, and they're an incredible peek into the Tailwind Labs pipeline, especially for v4 development. Here's the [tweet](https://x.com/adamwathan/status/1817980012072681729?ref=tailwindweekly.ongloat.com) with the links for the last 2 weeks and the links themselves:

- [Week of July 15 — July 19](https://public.3.basecamp.com/p/EmgokCgzegdQe4Zkdj6AY3nx?ref=tailwindweekly.ongloat.com)
- [Week of July 22 — July 26](https://public.3.basecamp.com/p/qmgcZtoPqyhtr2qEo1GNbh61?ref=tailwindweekly.ongloat.com)

Next, these past few weeks, Tailwind CSS v4 got 2 cool updates:

**[Support](https://x.com/adamwathan/status/1810771569008079325?ref=tailwindweekly.ongloat.com) for defining custom variants**

![](https://tailwindweekly.com/content/images/image-187.jpeg)

****[Support](https://x.com/adamwathan/status/1813583224746254421?ref=tailwindweekly.ongloat.com) for overriding built-in variants**

![](https://tailwindweekly.com/content/images/image-188.jpeg)

****And a nice [side effect](https://x.com/adamwathan/status/1819427336502047227?ref=tailwindweekly.ongloat.com):**

*"If you're using an external library that includes Tailwind classes, that library can just expose a CSS file that registers those source paths."*

![](https://tailwindweekly.com/content/images/image-189.jpg)

****We also have a new Tailwind UI template in the works: [Radiant](https://x.com/reinink/status/1818382514366349330?ref=tailwindweekly.ongloat.com), a Sanity-powered blog.**

![](https://tailwindweekly.com/content/images/image-190.jpeg)

****And we got a new [batch](https://x.com/steveschoger/status/1811102092578410795?ref=tailwindweekly.ongloat.com) of Heroicons**

![](https://tailwindweekly.com/content/images/image-191.jpeg)

Lots of pictures this week, I know 😅 but I think they're a much better representation of the new stuff than whatever I can write for you.

## **📚 Learning**

### **[Subgrid in Tailwind CSS](https://www.youtube.com/watch?v=Freh62XKYes&ref=tailwindweekly.com)**

Shruti Balasa showcases the power of CSS Grid's subgrid for responsive designs in Tailwind CSS, emphasizing dynamic column sizes and overcoming tables' limitations. Through practical examples like testimonial cards and dropdowns, she demonstrates the subgrid's game-changing potential for complex layouts.

### **[Introduction to Container Queries](https://www.youtube.com/watch?v=TxtvkKe20Rs&ref=tailwindweekly.com)**

Chris delves into container queries, demonstrating their power in adapting components to the parent container's size for responsive designs. Through a practical example of a card layout with dynamically adjusting font sizes, he showcases the flexibility and intuitiveness of container queries, offering a media-query-free approach to responsiveness.

### **[The Magic of Clip Path](https://emilkowal.ski/ui/the-magic-of-clip-path?ref=tailwindweekly.com)**

Emil explores the clip-path CSS property, highlighting its ability to create stunning animations and visual effects. Beyond basic shape clipping, Emil demonstrates how clip-path can be used for comparison sliders, image reveals, scroll-based animations, and more.

### **[Creative list styling](https://web.dev/articles/creative-list-styling?ref=tailwindweekly.com)**

Michelle delves into creative HTML list styling using CSS, covering unordered, ordered, and description lists with advanced techniques like custom markers and pseudo-elements. Emphasizing accessibility with attributes like aria-current role="list" she offers valuable insights for developers seeking to elevate their list styling skills.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-192.jpeg)

****[Evidence](https://evidence.dev/?ref=tailwindweekly.com)**

Evidence is an open-source lightweight framework for building data apps, and its website is very aesthetically pleasing. With elegant typography, warm colors, and many screenshots, they show that they take data apps very seriously. Even tho their product might be considered boring; their landing page is anything but.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-193.jpeg)

****[generate-tailwind-scale](https://github.com/skttl/generate-tailwind-scale?ref=tailwindweekly.com)**

This little tool can help you create custom spacing scales for Tailwind CSS. The utility allows you to define spacing increments, prefixes, and suffixes to generate a scale that fits your project. It outputs a configuration that integrates seamlessly with Tailwind, literally, copy and paste.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[Fabric.js](https://fabricjs.com/?ref=tailwindweekly.com)** – A powerful JavaScript library for **creating interactive, customizable canvas-based graphics** and animations.

---

**[DropNotch](https://junebytes.com/dropnotch?ref=tailwindweekly.com)** – Easily **share files using AirDrop, Mail, Messages and more** by simply dropping them into your MacBook notch area.

---

**[File0](https://www.file0.dev/?ref=tailwindweekly.com)** – Simplify file storage with a lightweight S3 alternative that offers **instant CDN deployment and zero setup hassle**.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #161: Tailwind UI now uses RSC, new heroicons & new template coming soon 🎁!
URL: https://tailwindweekly.com/issue-161/
Last updated: 2025-08-28T09:00:01.000Z
Hello folks!

It's the middle of summer, and we're excited to bring you the latest updates in the Tailwind CSS ecosystem.

The Tailwind Labs team was at Figma Config last week and they're still hard at work releasing stuff. We got React Server Components, new Heroicons and even a new template, not too shabby!

Now, let's dive in!

## **🌟 News**

**Tailwind UI React [examples](https://x.com/reinink/status/1808968997485916586?ref=tailwindweekly.ongloat.com) now use React Server Components**

![](https://tailwindweekly.com/content/images/image-181.jpeg)

Since Server components don't support passing functions as props, the Tailwind Labs team decided to remove all render props and added data-\* attributes for state management.

They also updated any components that *do* need to be client components to include **'use client'** at the top of the example so that you can copy and paste them into your RSC project and they'll work right away.

**New Heroicons batch and new Tailwind UI template**

![](https://tailwindweekly.com/content/images/image-182.jpeg)

Steve mentioned he's working on the next batch of Heroicons which will include all the ones from the picture above "*plus a bunch more that I'm still fine-tuning.*"

![](https://tailwindweekly.com/content/images/image-183.jpeg)

He's also adding the finishing touches to the next Tailwind UI template, which will ship in the coming days.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-184.jpeg)

****[Refactoring a scroll-driven animation from JavaScript to CSS](https://component-odyssey.com/articles/08-refactoring-a-js-driven-scroll-animation-to-css?ref=tailwindweekly.com)**

Ever feel like your JS scroll animations are a bit heavy? This article is perfect for you; it guides you through converting those animations to CSS, making them much smoother and more efficient. The author explains how to pinpoint JS inefficiencies, then shows how to use CSS properties like scroll-behavior and scroll-snap for better performance.

### **[How to Use Rem Units in CSS for Accessible Design](https://www.a11y-collective.com/blog/what-is-rem-in-css/?ref=tailwindweekly.com)**

Ever wonder how rem units work in CSS? This guide explains it clearly. It covers how rem (root em) units are based on the root element's font size, making scalable and accessible design easier. The author also compares rem with px and em, and provides practical examples for using rem in font sizing, media queries, and more.

### **[Changing Colors in an SVG Element Using CSS and JavaScript](https://www.kirupa.com/web/changing%5Fcolors%5Fsvg%5Fcss%5Fjavascript.htm?ref=tailwindweekly.com)**

This article explains how to change the colors of SVG elements using CSS and JavaScript. It covers the basics of SVG structure, using CSS selectors and custom properties to target and modify SVG parts and dynamically changing colors with JavaScript.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-185.jpeg)

****[Tuple](https://tuple.app/?ref=tailwindweekly.com)**

Tuple is the best tool for remote pair programming I have ever used, and they recently redesigned their site. The first thing you see is the clean, crisp design with plenty of white space that makes the interface look crisp and elegant. The subtle color gradient in the background gives it a modern and fresh look. The screenshots showcase a sleek and intuitive interface that will make coding with your team a breeze.

Honestly, the new redesign is lovely and really showcases how great the tool is.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-186.jpeg)

****[DynaUI](https://www.dynaui.design/?ref=tailwindweekly.com)**

DynaUI is a component library with a rich collection of 50+ animated components built with React, Tailwind CSS, and Framer Motion. It has great documentation and even 3 templates (Saas, Agency, and Portfolio) so you can see the components in action. I honestly love the component animations, they feel really smooth and unique!

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[PXCLI](https://pxcli.com/?ref=tailwindweekly.com)** – Run commands **across various JavaScript package managers** seamlessly. Switch between npm, yarn and pnpm with ease, without changing your workflow.

---

**[Kit.domains](https://kit.domains/?ref=tailwindweekly.com)** – Monitor the **health of your domains** for free with real-time alerts and detailed analysis tools.

---

**[RustRover](https://www.jetbrains.com/rust/?ref=tailwindweekly.com)** – An advanced IDE by JetBrains, tailored for Rust development with **smart code analysis, refactoring, and debugging tools**.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #160: Headless UI v2.1 is out 🤩!
URL: https://tailwindweekly.com/issue-160/
Last updated: 2025-08-28T09:08:54.000Z
Hello folks!

We got a short and sweet piece of news and some cool related articles.

I honestly love how we're getting more CSS-focused articles these days. More devs are investing time learning CSS properly and pushing it to the limit, just like Tailwind CSS does. Exciting times!

Now, let's dive in!

## **🌟 News**

We got a cool update for Headless UI for React, mostly focused on QoL and included:

**A simplified transition API**

![](https://tailwindweekly.com/content/images/image-178.jpg)

Now you'll be able to do transitions with data- properties instead of using the Transition component, seems pretty cool and I think its something that could be exported to Vue in the future.

**Render multiple dialogs as siblings**

I know it sounds like a mouthful, but it basically loads multiple dialogs at the same time to keep things accessible.

0:00

/

0:10

See the **[official blog post](https://tailwindcss.com/blog/2024-06-21-headless-ui-v2-1?ref=tailwindweekly.ongloat.com)** for more details!

## **📚 Learning**

### **[Debugging CSS, no extensions required](https://www.youtube.com/watch?v=ndeClnyHSo8&ref=tailwindweekly.com)**

In this video, Kevin Powell explains how to debug CSS issues using browser DevTools. He shows simple techniques like inspecting elements, checking computed styles, and understanding the box model. This tutorial is perfect for learning how to fix layout problems without using extra browser extensions.

### **[Marc Lou's Headline Tips — with Tailwind CSS](https://www.youtube.com/watch?v=UFcMNzJ2M84&ref=tailwindweekly.com)**

Marc Lou shares useful tips for creating effective headlines using Tailwind CSS. He demonstrates how to style headlines to make them stand out, ensuring they are both visually appealing and easy to read.

### **[Nested Anchor Links using CSS](https://www.amitmerchant.com/nested-anchor-links-using-css/?ref=tailwindweekly.com)**

This guide explains how to create clickable nested links within a <div> element using CSS. The trick is to set the outer <div>'s position to relative, then use an absolutely positioned empty <a> tag to cover the entire area. This allows another clickable <a> tag inside the same <div> without breaking HTML rules. This method is *very* useful for card components with multiple links.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-179.jpeg)

****[Papermark](https://www.papermark.com/?ref=tailwindweekly.com)**

Papermark's site is an excellent example of modern, functional design. The layout is simple, focusing mostly on the content itself. With clean typography and plenty of white space, it’s very easy to navigate.

I like how they use bright colors to highlight important sections and how everything else has duotone variations of white, black and gray.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-180.jpg)

****[HTMLrev](https://htmlrev.com/free-tailwind-templates.html?ref=tailwindweekly.com)**

This site contains a curated collection of Tailwind CSS templates and they've got a ton of free templates for various uses like websites, blogs, portfolios, e-commerce, and dashboards. The templates are clean, responsive, and easy to customize so they're perfect for quickly setting up projects without starting from scratch.

### **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[Markdown Mastery](https://piccalil.li/blog/a-quick-and-easy-guide-to-markdown/?ref=tailwindweekly.ongloat.com)** – A quick and **easy guide to Markdown**, perfect for beginners and pros alike, by Piccalilli.

---

**[Redact](https://redact.dev/?ref=tailwindweekly.com)** – Mass delete your **messages, posts, likes, and more** from over 40 services with ease.

---

**[Mullvad VPN](https://mullvad.net/en?ref=tailwindweekly.com)** – Secure your internet freedom with **Mullvad VPN, just €5/month**. Easy setup with anonymous account creation.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #159: Adam on the Tuple podcast, blend modes, and dumb CSS mistakes 😁!
URL: https://tailwindweekly.com/issue-159/
Last updated: 2025-08-29T08:34:01.000Z
Hello folks!

Not much to report on Tailwind CSS land this week, the team is working steadily on v4.0, and we're expecting a stable release later this year 🤞!

Let's dive in!

## **🌟 News**

Adam appeared on the [Tuple](https://tuple.app/?ref=tailwindweekly.ongloat.com) podcast to talk about Tailwind, especially the release of the upcoming v4.0.

*They delve into the motivation behind the rewrite, the challenges faced, and the approach to maintaining backward compatibility. The conversation covers topics related to software versioning, open-source maintenance, backward compatibility, the use of Rust in Tailwind, testing strategies, and the future of Tailwind as a business.*

Steve is also hard at work on the next Tailwind UI template, which is the same Adam has been coding on his live coding videos, BarelyHR. He shared some [previews](https://x.com/steveschoger/status/1801662736876900612?ref=tailwindweekly.ongloat.com) on X and they're looking great!

![](https://tailwindweekly.com/content/images/image-174.jpeg)

****📚 Learning**

![](https://tailwindweekly.com/content/images/image-175.jpeg)

****[Building a Multi Brand Design System with Tailwind: Tips, Tricks and Tradeoffs](https://www.thinkmill.com.au/blog/building-a-multi-brand-design-system-with-tailwind-tips-tricks-and-tradeoffs?ref=tailwindweekly.com)**

This is a great guide on why Tailwind is a great choice for multi-brand design systems, simplifying complex tasks like components and conditional styling logic. There’s also a cool section on creating custom plugins for typography and colors from which I learned a few things.

### **[Which Blend Mode?](https://www.ctnicholas.dev/articles/which-blend-mode?ref=tailwindweekly.com)**

This is a deep dive into how blend modes work by applying mathematical operations between pixels on different layers, like the multiply blend mode. The guide breaks down the exact calculations and even provides a simple JavaScript function to illustrate how these operations are performed. If you're curious about how blend modes affect colors and want a clear, practical explanation, this article is a great read.

### **[My Dumbest CSS Mistakes](https://css-tricks.com/my-dumbest-css-mistakes/?ref=tailwindweekly.com)**

In this very relatable piece, Chris Coyer, known for his CSS tricks, shares some common CSS errors he has made, like using "flexbox" instead of "flex" and forgetting to use var() around CSS variables. It's a great read because it reminds us that everyone makes mistakes, and CSS is pretty forgiving. Plus, the author encourages readers to share their own blunders, making it an engaging and educational piece.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-176.jpeg)

****[Typeframes](https://www.revid.ai/?ref=tailwindweekly.com)**

Typeframes is an absolute gem for anyone looking to create stunning videos from text. The dark theme combined with vibrant accents really makes the content shine. The highlight for me is the live preview feature, which shows you exactly how your text will transform into a video. It feels pretty magical!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-177.jpeg)

****[AI CSS Animations](https://www.aicssanimations.com/?ref=tailwindweekly.com)**

This week's resource lets you create complex CSS animations just by describing what you want in plain English. You type in a prompt like "Slide in from the left and scale up," hit submit, and boom! It generates the animation code for you. It even shows you a live preview so you can see exactly how it looks and tweak it to perfection. Definitely check it out if you’re looking to spice up your web projects!

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[Peaks](https://www.vogel.haus/peaks?ref=tailwindweekly.com)** – **Optimize your circadian rhythm** with Peaks, a tool to understand and improve your daily productivity cycles.

---

**[SpaceBadgers](https://badgers.space/?ref=tailwindweekly.ongloat.com)** – Generate **high-quality, scalable SVG badges for your projects**, powered by a Rust-based core library.

---

**[FlutterFlow](https://www.flutterflow.io/?ref=tailwindweekly.com)** – Rapidly **build and iterate beautiful, modern apps** with FlutterFlow, perfect for quick market testing.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #158: Adam is screencasting again + a partner theme for ray.so 👀
URL: https://tailwindweekly.com/issue-158/
Last updated: 2025-08-29T08:46:43.000Z
Hello folks!

No major news this week folks but we do have some tidbits! Adam started screencasting again, and I already learned a few tricks by watching the video series. More info in the News section!

Now, let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-169.jpg)

****Adam went wild with screencasting this week!**

Adam decided to live stream coding the next template they're launching and has done 3 videos so far; here are the links:

Part 1

Part 2

Part 3

**Catalyst now [includes](https://x.com/adamwathan/status/1796934659034472560?ref=tailwindweekly.ongloat.com) the source for the demo project**

So now, when you next download the UI Kit, you'll have all the demo files included

![](https://tailwindweekly.com/content/images/image-170.jpeg)

****The Tailwind Labs team created a partner theme for [ray.so](https://ray.so/?ref=tailwindweekly.ongloat.com)**

[ray.so](https://ray.so/?ref=tailwindweekly.ongloat.com) is a little web tool that lets you turn your code into beautiful images. It has a few options like hide/show background and toggle between dark/light mode and also offers different syntax colors.

Well, now the Tailwind Labs team has created a syntax color theme for ray.so using Tailwind CSS colors, and it looks lovely 😍

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-171.jpeg)

****[Here’s What We Learned From the First State of HTML Survey](https://frontendmasters.com/blog/state-of-html-2023-results-2/?ref=tailwindweekly.com)**

It turns out that the <datalist> element, which allows for autocomplete without JavaScript, topped the charts, while new features like the Popover API and the <dialog> element are also winning hearts for simplifying tasks traditionally handled by JavaScript. However, forms are still a pain point for many, with tons of feedback on styling woes, especially with <select> and <input type="date">, and the headaches of complex form validation.

### **[Hidden vs. Disabled In UX](https://www.smashingmagazine.com/2024/05/hidden-vs-disabled-ux/?ref=tailwindweekly.com)**

Hiding things can make them hard to find, and disabling them without telling users why can be annoying. The advice here is to disable features when you want users to see them but can’t use them yet and to hide features only if they’re completely irrelevant. Always let users know why something is disabled and how to turn it on. It’s all about keeping things clear and simple for a better user experience!

### **[5 Tailwind CSS Anti-Patterns to Avoid](https://spin.atomicobject.com/tailwind-css-anti-patterns/?ref=tailwindweekly.com)**

This one dives into some common pitfalls that can trip you up while using Tailwind, like relying too heavily on Tailwind’s default settings or misusing its features in ways that make your code harder to manage. The article doesn’t just point out what not to do; it offers practical advice on how to keep your styles clean, maintainable, and perfectly aligned with your design goals. It’s a great read to help you make the most of Tailwind without falling into bad habits—definitely worth a look if you want to refine your approach and keep your project looking sharp!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-172.jpeg)

****[Klack](https://tryklack.com/?ref=tailwindweekly.com)**

Here's one for the keyboard enthusiasts out there! Klack is a Mac app that makes your keyboard sound like a mechanical keyboard. Its site is a dream with its minimal design and smooth gradients. The soft, calming tones and well-placed white space make for an effortlessly classy look. The real star here? The feature list reads like a candy store for typists: high-fidelity sound, immersive spatial audio, and customizable switches! Trust me, if you love the satisfying click of a good keyboard, this will be your new favorite app.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-173.jpeg)

****[Tailwind Grid Builder](https://tailscan.com/resources/grids?ref=tailwindweekly.com)**

TailScan's Grid Builder tool is fantastic for anyone looking to build responsive grids effortlessly with Tailwind. It allows you to customize the number of rows and columns, add breakpoints, and tweak individual item properties like order, span, and position. It's under active development, so you might encounter a few bugs, but it's definitely worth exploring.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[PayOnce Apps](https://payonceapps.com/?ref=tailwindweekly.com)** – A curated list of **lifetime deal apps**, empowering devs to save costs while boosting productivity.

---

**[CommitAsync](https://www.commitasync.com/?ref=tailwindweekly.com)** – Find **$100K+ remote developer jobs**, fully vetted for guaranteed salaries and freedom to work remotely.

---

**[Spaceman](https://www.jaysce.dev/projects/spaceman?ref=tailwindweekly.com)** – View and rename your **macOS Spaces directly from the menu bar** with a lightweight, customizable app.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #157: new Catalyst and prettier updates + 500MM milestone 🤯
URL: https://tailwindweekly.com/issue-157/
Last updated: 2025-08-29T09:00:25.000Z
Hello folks!

I know I missed last week, sorry about that! I have been dealing with some health issues on and off, but to make up for it, this issue has double the news and double the fun 😁!

Now, let's dive in!

## **🌟 News**

These last 2 weeks were very productive for the Tailwind Labs team! Here's the rundown:

![](https://tailwindweekly.com/content/images/image-162.jpeg)

****Tailwind CSS reached 500 MILLION downloads 🥳**

The VSCode intellisense plugin also has 6.3 million installs, surreal 🤯

![](https://tailwindweekly.com/content/images/image-163.jpg)

****New update for the prettier plugin that cleans up whitespace and duplicate class names**

It's been a while since we got an update for the plugin but it was well worth the wait. If you want the latest version just run npm i prettier-plugin-tailwindcss@latest

![](https://tailwindweekly.com/content/images/image-164.jpeg)

****New Catalyst update**

After months of hard work, we finally got new components on Catalyst, which also include:

- Sidebar and stacked layouts
- Dark mode
- React based
- Simple, flexible API
- Javascript + Typescript

Check the official [blog post](https://tailwindcss.com/blog/2024-05-24-catalyst-application-layouts?ref=tailwindweekly.ongloat.com) for more info!

![](https://tailwindweekly.com/content/images/image-165.jpg)

Lastly, Adam jumped on a call with [Justin Jackson](https://x.com/mijustin?ref=tailwindweekly.ongloat.com) to chat about Tailwind CSS, business, and hiring! Check out the video [here](https://x.com/adamwathan/status/1795520375729574174?ref=tailwindweekly.ongloat.com).

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-166.jpeg)

****[Forced colors explained: A practical guide](https://polypane.app/blog/forced-colors-explained-a-practical-guide/?ref=tailwindweekly.com)**

This article from Polypane is a must-read for anyone interested in web accessibility. It delves into the concept of forced colors, a CSS media query that can dramatically alter the appearance of your site to improve accessibility. The guide covers the origins of forced colors, their implementation, and practical steps to ensure your website remains user-friendly for those who rely on this feature.

### **[Time-based CSS Animations](https://yuanchuan.dev/time-based-css-animations?ref=tailwindweekly.com)**

This guide explains how to leverage the latest CSS Math functions like mod(), round(), and trigonometric functions to create sophisticated animations. By using a custom variable with the CSS Houdini API, you can track time in milliseconds and animate elements accordingly.

### **[Using CSS content-visibility to boost your rendering performance](https://blog.logrocket.com/using-css-content-visibility-boost-rendering-performance/?ref=tailwindweekly.com)**

LogRocket explores the CSS content-visibility property, which can significantly improve rendering performance by allowing the browser to skip the layout and painting of elements not immediately needed. This can lead to faster initial page loads and improved performance throughout the page's lifecycle. The article breaks down the fundamentals of rendering, the benefits of using content-visibility, and provides practical use cases and examples.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-167.jpeg)

****[Podscan](https://podscan.fm/?ref=tailwindweekly.com)**

Podscan.fm is a game-changer for podcast media monitoring, it offers instant notifications when your product is mentioned in a podcast. The site features a clean, professional design with a monochromatic color scheme and refined typography. It's all about simplicity and functionality and the dark mode interface is a nice touch, making data easy to read and navigate.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-168.jpeg)

****[Rails Designer](https://railsdesigner.com/?ref=tailwindweekly.com)**

I came across this resource recently, and it's a game-changer for anyone working with Ruby on Rails. The site focuses on design and UI components tailored specifically for Rails apps. What's cool is that it integrates with the Hotwire trifecta, meaning you get the benefits of Turbo, Stimulus, and Strada right out of the box. This makes adding dynamic, interactive elements to your Rails projects super easy without diving deep into JavaScript.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[Fuzzysort](https://github.com/farzher/fuzzysort?tab=readme-ov-file&ref=tailwindweekly.ongloat.com)** – Fast and powerful fuzzy search library for JavaScript, with **high performance and flexible integration**.

---

**[DeadSimpleSites](https://deadsimplesites.com/?ref=tailwindweekly.ongloat.com)** – Explore **minimal website designs** for clean, effective, and user-friendly inspiration.

---

**[Scriptable](https://scriptable.app/?ref=tailwindweekly.ongloat.com)** – **Automate iOS with JavaScript**, integrating Siri Shortcuts to present tables, websites, and more.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #156: the State of HTML 2023 survey results are in!
URL: https://tailwindweekly.com/issue-156/
Last updated: 2025-08-29T09:12:15.000Z
Hello folks!

This was a very exciting week for frontend developers, with ReactConf and VueConf making announcements left and right! From the Tailwind Labs team, we got a nudge that we'll be getting the new Catalyst update just after ReactConf; fingers crossed 🫰🏻!

Now, let's dive in!

## **🌟 News**

Most of the Tailwind Labs team is at ReactConf right now so there's not a lot of report but I do have a few things 😏.

![](https://tailwindweekly.com/content/images/image-158.jpeg)

According to [Adam](https://x.com/adamwathan/status/1789306462079979908?ref=tailwindweekly.ongloat.com), the upcoming Catalyst release will come just after ReactConf so it'll probably be this month, and from what the screenshot shows, it'll pack A LOT of new stuff!

![](https://tailwindweekly.com/content/images/image-159.jpg)

We also got the State of HTML 2023 survey results and it was full of insights, I found this the best one (from the conclusion):

> Developers crave more interactive HTML elements: not only were interactive elements like <datalist> or the Popover API among those accumulating the most positive sentiment across all categories, but in addition all top [missing elements](https://2023.stateofhtml.com/en-US/usage/?ref=tailwindweekly.ongloat.com) were interactive widgets.

Be sure to check out the results in detail [here](https://2023.stateofhtml.com/en-US/?ref=tailwindweekly.ongloat.com)!

## **📚 Learning**

### **[Tailwind Just Got So Much Better!](https://www.youtube.com/watch?v=CTIyv9Soe2E&ref=tailwindweekly.com)**

There's a new Tailwind CSS plugin on the block called Tailwind Signals, which utilizes style queries via container queries to enable custom states that can be used by any of its ascendants in the DOM. The author explains how this plugin builds on the existing group and peer utilities in Tailwind, making it easier to style elements based on the state of their parent or sibling. The best part? You can do all this without any JavaScript—just pure CSS!

### **[Patrick / articles / Do you really understand CSS radial-gradients?](https://patrickbrosset.com/articles/2022-10-24-do-you-really-understand-CSS-radial-gradients/?ref=tailwindweekly.com)**

A great deep dive into the CSS radial-gradient function, perfect for anyone looking to master this powerful styling tool. Te author walks you through everything from the basic syntax to advanced usage, explaining how to create intricate designs using radial gradients. You'll learn about the gradient box, center point, ending shape, and how to control color stops effectively. With clear examples and visual aids, this article makes complex concepts easy to understand.

### **[Using Grid Named Areas to Visualize (and Reference) Your Layout](https://css-tricks.com/using-grid-named-areas-to-visualize-and-reference-your-layout/?ref=tailwindweekly.com)**

This piece dives into how you can use grid-template-areas to create intuitive, visually-representative names for different parts of your grid. Instead of positioning items with line numbers, which can get confusing, this method allows you to label sections of your grid with names like "header," "main," and "footer." It makes your CSS look like an ASCII art representation of your layout, making it much easier to understand and maintain.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-160.jpeg)

****[Adonis](https://adonisjs.com/?ref=tailwindweekly.com)**

AdonisJS is a TypeScript-first backend framework that is all about speed and simplicity. The landing page is sleek with a minimalistic design, featuring elegant typography and a lot of white space. I also loved the detailed code snippets and feature highlights, I think they clearly show this is a great tool for modern web development.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-161.jpeg)

****[Franken UI](https://franken-ui.dev/?ref=tailwindweekly.com)**

Franken UI is perfect for those who love the design of [shadcn/ui](https://ui.shadcn.com/?ref=tailwindweekly.ongloat.com) but aren't keen on using React. Franken-UI lets you mix and match components from different design systems without the need to dive into React, Vue, or Svelte. It uses Tailwind CSS for styling and UIkit JavaScript for functionality, making it super flexible and easy to use. The documentation is clear and packed with examples, so you'll find it straightforward to integrate into your projects.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[Execute Program](https://www.executeprogram.com/?ref=tailwindweekly.com)** – **Master coding** with interactive lessons designed to improve retention **through spaced repetition**.

---

**[daily.dev](https://daily.dev/?ref=tailwindweekly.com)** – **Personalized news feed and dev communities** to help you stay updated and grow as a developer.

---

**[Extension](https://extension.js.org/?ref=tailwindweekly.com)** – **Develop cross-browser extensions** effortlessly with zero configuration, supporting **TypeScript, WebAssembly, and React**.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.
### Tailwind Weekly #155: Headless UI v2 is out 🚀!
URL: https://tailwindweekly.com/issue-155/
Last updated: 2025-09-01T06:38:58.000Z
Hello folks!

We got the much anticipated Headless UI v2 update for React (Vue version pending) and some sneak peeks for new stuff coming got Catalyst and Tailwind UI. I say the Tailwind Labs team is on fire and I can't wait for what's to come!

Now, let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-153.jpeg)

The big highlight of this week was the launch of Headless UI v2.0 folks!

> As we’ve been working on [Catalyst](https://tailwindcss.com/blog/introducing-catalyst?ref=tailwindweekly.ongloat.com) these last several months, we’ve been making dozens of improvements to Headless UI that let you write even less code, and make the developer experience even better.

The Tailwind Labs team has been hard at work on this release, which includes a brand-new website and docs, a new checkbox component, built-in anchor positioning, HTML form components, [and more](https://tailwindcss.com/blog/headless-ui-v2?ref=tailwindweekly.ongloat.com)!

It's important to point out that the new v2.It was only released for React. The Vue version is still pending, but I'm sure they're already working on it.

Next, with v2 launched the team is back to working on Catalyst and Tailwind UI!

For Catalyst Jonathan released a few screenshots [mentioning](https://x.com/reinink/status/1789030386703512033?ref=tailwindweekly.ongloat.com) he's been building functional demos, here's some screenshots:

![](https://tailwindweekly.com/content/images/image-154.jpeg)

As for the Tailwind UI side, Steve [said](https://x.com/steveschoger/status/1788267952652898724?ref=tailwindweekly.ongloat.com) that they're working on new designs for the Feature Sections category, he also showed a sneak peek and it looks beautiful 😍

![](https://tailwindweekly.com/content/images/image-155.png)

****📚 Learning**

### **[23 CSS features you should know (and be using) by now](https://www.youtube.com/watch?v=opHu7HvFM60&ref=tailwindweekly.com)**

This video, presented by Jen Simmons and featuring Adam Argyle, is an insightful tutorial on lesser-known but highly useful CSS features that are often overlooked despite their great browser support. They cover a variety of topics, including focus-visible, focus-within, and aspect-ratio, among others, providing practical examples and demonstrations for each. Overall, I enjoyed the video and think you will too.

### **[CSS Email Obfuscation - Create a Clickable Link](https://www.youtube.com/watch?v=WhwvCAbRJVE&ref=tailwindweekly.com)**

Another video for you! This one shows an cool technique for obfuscating email addresses using CSS, combined with a bit of JavaScript to enhance functionality by creating clickable mail links. The author shows how to effectively hide parts of the email using CSS and then employs JavaScript to manipulate the href attribute of anchor tags, making the email addresses both obfuscated from bots and accessible to users as clickable mailto links.

### **[AVIF is the Future of Web Images](https://medium.com/@fbrkovic/avif-is-the-future-of-web-images-a0b94d7f483e?ref=tailwindweekly.com)**

In this piece, the author champions AVIF as the future of web images, showing its superiority over existing formats like JPEG, PNG, and WebP. He elaborates on AVIF's advanced compression capabilities that significantly reduce file sizes without sacrificing image quality, thanks to its use of the AV1 video codec. If you heard about AVIF but haven't started to use it then this article might convince you!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-156.jpeg)

****[Flare](https://flareapp.io/?ref=tailwindweekly.com)**

Who says green and purple isn't stylish? This week's showcase is Flare, an error-tracking platform tailored to Laravel, and I must say, its landing page is lovely. With big font sizes, beautiful gradients with a grainy effect and smooth animations, they speak to a developer audience that not only wants good function but also beautiful form.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-157.jpeg)

****[Fluid](https://fluid.tw/?ref=tailwindweekly.com)**

Fluid is a Tailwind CSS plugin that offers a 'fluid' clamp() that works with every utility. I honestly loved the idea since it just adds a new syntax prefix (\~) to the existing classes, so you don't need to learn brand-new terminology. Also, this is THE best plugin demo website I have seen in ages, so kudos to the author for that!

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Windy](https://usewindy.com/?ref=tailwindweekly) is a browser extension** for Google Chrome and Firefox that lets you **transform HTML elements to Tailwind CSS with a single click**. Speed up your workflow with Windy and **save hours or even days** when converting existing styles to Tailwind CSS.

---

**[Can I Email](https://www.caniemail.com/?ref=tailwindweekly.com)** – Comprehensive **HTML & CSS support** functionality information for **modern email clients**.

---

**[Pruvious](https://pruvious.com/?ref=tailwindweekly.com)** – A reliable, **developer-centric CMS** optimized for seamlessly **building and managing Nuxt sites**.

---

**[Storefront.Design](https://www.storefront.design/?ref=tailwindweekly.com)** – Curating and enabling the creation of the **internet’s most exceptional online storefronts**.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #154: new Catalyst update coming next week 🚀
URL: https://tailwindweekly.com/issue-154/
Last updated: 2025-09-01T06:51:58.000Z
Hello folks!

Spring is finally here, and with it comes new Tailwind stuff to be excited about! We're getting new Catalyst components, more Heroicons, and a peek at new Headless UI stuff coming soon. Keep reading to learn more!

Now, let's dive in!

## **🌟 News**

We're (possibly!) getting a Catalyst update next week

![](https://tailwindweekly.com/content/images/image-148.jpeg)

Adam [mentioned](https://x.com/adamwathan/status/1785823015789338800?ref=tailwindweekly.ongloat.com) on Twitter that we'll be getting new application layouts for Catalyst, which will probably be released next week. From the screenshots, the layouts look clean and minimalistic; I look forward to playing with them next weekend!

The Tailwind Labs team is also working on a very soon-to-be-released Headless UI v2.0\. Here's a [tweet](https://x.com/reinink/status/1785758445133558151?ref=tailwindweekly.ongloat.com) showcasing a few demos of the new upcoming features.

And the last official news is that we're getting even more new icons for Heroicons.

![](https://tailwindweekly.com/content/images/image-149.jpeg)

These ones seen more tailored to a rich text editor, maybe a new Catalyst component is coming 👀...

On the community side, Simon Vrachliotis tweeted how we can use color transparency in Tailwind CSS v4, thanks to the color-mix() CSS function. There's even a [demo](https://play.tailwindcss.com/BqwGtNSDx2?ref=tailwindweekly.ongloat.com)!

> 🚀 New in Tailwind CSS v4 🚀

> The use of CSS `color-mix()` in Tailwind CSS v4 simplifies color management — no more need to convert HEX colors to RGB to support transparency 🤙 [pic.twitter.com/Sa89aHCEI6](https://x.com/simonswiss/status/1783749682583519307?ref=tailwindweekly.com)— Simon Vrachliotis (@simonswiss) [April 26, 2024](https://x.com/simonswiss/status/1783749682583519307?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-150.jpeg)

****[Critical CSS? Not So Fast!](https://csswizardry.com/2022/09/critical-css-not-so-fast/?ref=tailwindweekly.com)**

This insightful piece tackles the myths around Critical CSS. It's not the silver bullet for performance it's often hyped to be, especially when retrofitted. The author dives deep into why Critical CSS might not speed up your site as expected and offers a real-world perspective on its effectiveness, or lack thereof. A must-read if you're considering streamlining your site's render path but aren't sure where to start or what to prioritize.

### **[Going beyond pixels and (r)ems in CSS - Absolute length units](https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/absolute-length-units?ref=tailwindweekly.com)**

While typically avoided for responsive designs, this article makes a compelling case for using units like pixels and inches in certain scenarios. From ensuring pixel-perfect layouts in specialized applications (think touch screens in retail settings) to maintaining exact sizes in print and fixed-media outputs, there are still valid reasons to go absolute.

### **[On disabled and aria-disabled attributes](https://kittygiraudel.com/2024/03/29/on-disabled-and-aria-disabled-attributes/?ref=tailwindweekly.com)**

The author offers a thoughtful take on the often misunderstood 'disabled' and 'aria-disabled' attributes in HTML. Diving into the technical nuances, she explains how disabled literally disables form controls, making them unfocusable and unmodifiable, while aria-disabled keeps elements interactive but conveys their disabled status to assistive technologies.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-151.jpeg)

****[HeyForm](https://heyform.net/?ref=tailwindweekly.com)**

This week's showcase is just lovely. The layout is crisp, the typography is spot-on, and the use of soothing color gradients makes everything "pop" without being overwhelming. I also so very much love the user persona icons, its rare to see such detail in icons these days and these turned out very well.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-152.jpeg)

****[Variable Fonts](https://v-fonts.com/?ref=tailwindweekly.com)**

This site is a comprehensive collection of variable fonts packaged into an interface that allows you to tweak the weight and width in real-time. It also shows all kinds of information about each font, like the designer, publisher, character set, and even the licensing.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**[Tailscan](https://tailscan.com/?ref=tailwindweekly) is the ultimate browser tool for Tailwind CSS**. Build, design, and visually debug your Tailwind website with Tailscan within the browser. With **conversion, autocompletion, config support, class validation, and visual guidelines,** you'll instantly level up your development experience!

---

**[InspectFlow](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com) is a Tailwind CSS browser extension** for developers that helps you **inspect, edit, and copy components easily**. Features real-time editing, CodePen integration, and class autocomplete.

---

**[Tigris Storage](https://www.tigrisdata.com/?ref=tailwindweekly.com)** is a robust, globally distributed **S3-compatible object storage** solution designed for developers seeking reliable and scalable data handling.

---

**[Shiki](https://shiki.style/?ref=tailwindweekly.com)** is anelegant, powerful syntax highlighter for developers seeking beautiful code presentation.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #153: aspect-ratio, text-balance, and attribute selectors, oh my!
URL: https://tailwindweekly.com/issue-153/
Last updated: 2025-09-01T07:01:44.000Z
Hello folks!

No news to report this week. Adam is on [vacation](https://x.com/adamwathan/status/1780025207639384424?ref=tailwindweekly.ongloat.com) and the rest of the Tailwind Labs team is working on [Catalyst stuff](https://x.com/reinink/status/1780012467390763017?ref=tailwindweekly.ongloat.com). It's a well-deserved break!

Let's dive in!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-145.jpeg)

****[Things That Can Break aspect-ratio in CSS](https://frontendmasters.com/blog/things-that-can-break-aspect-ratio-in-css/?ref=tailwindweekly.com)**

This one is short and sweet. It outlines 3 ways that break the aspect-ratio CSS property. I found #1 interesting, I had never encountered that one before, so I learned something new!

### **[When to use CSS text-wrap: balance; vs text-wrap: pretty;](https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/?ref=tailwindweekly.com)**

The TL;DR is "*use text-wrap: balance; on headings and subheadings. And use text-wrap: pretty; on paragraphs of text to get rid of orphans on the last line.*". Still, I highly recommend you check the article; it goes over good reasons why you should follow this rule of thumb.

### **[Styling External Links with Attribute Selectors](https://css-irl.info/styling-external-links-with-attribute-selectors/?ref=tailwindweekly.com)**

Attribute selectors are like this a\[href='/'\] (the brackets) and they're pretty handy for custom stuff. This guide's specific use case is also very useful for when you want a CSS-only approach, and it's great for accessibility, too.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-146.jpeg)

****[Versoly](https://versoly.com/?ref=tailwindweekly.com)**

Versoly is a page builder built with Tailwind CSS that has been in the community for a few years now, and I want to revisit their updated homepage design. With its soft blue hues and minimalist design, it's very different from your typical flashy site builder website and I think that's what makes it shine.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-147.jpeg)

****[Tailwind Colors](https://tailscan.com/colors?ref=tailwindweekly.com)**

The creator of [Tailscan](https://tailscan.com/?ref=tailwindweekly.ongloat.com), a Chrome extension for Tailwind devs, created this resource for the Tailwind community. It's a cheat sheet for the Tailwind color palette, and while we have featured a few here, I really like the simplistic design of this one, I hope you do too.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Exploring Alpine.js](https://exploringalpinejs.com/?ref=tailwindweekly.com)** \- A new video course to **level up your Alpine.js skills**. Discounted early access available now.

---

**[Lummi Photos](https://www.lummi.ai/?ref=tailwindweekly.com)** \- the best free stock photos and royalty-free images, **powered by robots**.

---

**[Counterscale.dev](https://counterscale.dev/?ref=tailwindweekly.com)** – Free, open-source **web analytics on Cloudflare**. Privacy-focused, easy to deploy.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #152: Possible breaking change for V4 🤔
URL: https://tailwindweekly.com/issue-152/
Last updated: 2025-09-01T07:11:13.000Z
Hello folks!

It's a slow week on the Tailwind CSS front, folks. We got Adam talking chop on a popular developer podcast and a possible breaking change coming for v4\. Besides that, this week's resource is my top favorite in a long while; it's Tailwind but for animations! Be sure to check it out.

Now, let's dive in!

## **🌟 News**

Adam appeared on the Devtools.fm podcast this week! I haven't had a chance to listen to the whole episode, but the feedback has been great so far!

Also, Adam is considering a breaking change for v4\. I personally want the fix; what do you think? Be sure to reply to the Twitter thread.

> Breaking change I'm considering for v4…

> For reasons that are no longer relevant, variants in Tailwind are applied right-to-left/inside-out, which many have pointed out as being unintuitive.

> Fix this for v4? [pic.twitter.com/zG0Lg87lZN](https://x.com/adamwathan/status/1776782342616441087?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [April 7, 2024](https://x.com/adamwathan/status/1776782342616441087?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

## **📚 Learning**

### **[The background values no one knows about](https://www.youtube.com/watch?v=oiai47goI6A&ref=tailwindweekly.com)**

Learn the lesser-known tricks of CSS for manipulating background images! The tutorial covers everything from repeating patterns to adjusting image sizes dynamically. Ideal for those looking to refine their web development skills and add some polish to their projects!

### **[On popover accessibility: what the browser does and doesn’t do](https://hidde.blog/popover-accessibility/?ref=tailwindweekly.com)**

Discover the intricacies of the new popover attribute's accessibility features. This comprehensive guide explores how built-in accessibility measures help shape user experiences, delving into browser behaviors, aria attributes, and the thoughtful design decisions behind them. Perfect for developers and designers aiming to enhance web accessibility.

### **[Implementing Vertical Form Controls](https://webkit.org/blog/15190/implementing-vertical-form-controls/?ref=tailwindweekly.com)**

Explore how Safari 17.4 revolutionizes form control elements with vertical writing mode support across macOS, iOS, iPadOS, and visionOS. This detailed post goes into the technical enhancements that make this possible, including updates to CSS properties and custom layout adjustments.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-143.jpeg)

****[MrScraper](https://mrscraper.com/?ref=tailwindweekly.com)**

Talk about a visual feast without the fluff! This week's showcase's layout is clean, with a modern twist on the minimalist approach. The lovely blue theme is easy on the eyes, and the use of subtle gradients brings depth to a seemingly flat design. Also, love the no-nonsense sans-serif font 🤌 (Noto Sans, for the curious!).

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-144.jpeg)

****[Glaze](https://glaze.dev/?ref=tailwindweekly.com)**

If you love Tailwind CSS and Alpine.js and want something similar for animations, then you'll love Glaze! It's built on GSAP, so it's super powerful, and it uses a utility-first approach that makes it really easy to get cool animations up and running fast. It's excellent for adding responsive animations that work across different screen sizes, and the setup is straightforward, literally just dropping a CDN link. This will be part of my starter projects from now on!

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Under New Management](https://github.com/classvsoftware/under-new-management?ref=tailwindweekly.ongloat.com)** – An extension that detects when your favorite browser extensions **change ownership**, ensuring you stay informed and secure.

---

**[Cally](https://wicky.nillia.ms/cally/?ref=tailwindweekly.com)** – Lightweight **calendar components** **under 9kb**, offering single dates, ranges, and multi-month displays.

---

**[Node.js: The Documentary - An Origin Story](https://www.youtube.com/watch?v=LB8KwiiUGy0&ref=tailwindweekly.com)** – Explore the transformative journey of **Node.js with its creator, Ryan Dahl**, reflecting on its conception and evolution in the software world.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #151: new Tailwind CSS homepage coming soon 👀
URL: https://tailwindweekly.com/issue-151/
Last updated: 2025-09-01T07:22:09.000Z
Hello folks!

There has been no major news in the last few weeks. The Tailwind Labs team is still working on the v4 alpha, which could be officially released this summer 🤞. The best part? We'll get a new homepage to go with the release. Check the next section for more info!

Now, let's dive in!

## **🌟 News**

Here's the rundown folks:

![](https://tailwindweekly.com/content/images/image-139.jpeg)

Steve is [exploring](https://x.com/steveschoger/status/1774821827526713405?ref=tailwindweekly.ongloat.com) mobile menu designs for the next Catalyst update.

We're also getting a new Tailwind CSS homepage, probably for the v4 official release. Here are some sneak peeks [straight](https://x.com/steveschoger/status/1775245864744759531?ref=tailwindweekly.ongloat.com) from Steve.

![](https://tailwindweekly.com/content/images/image-140.jpeg)

Also, the application deadline for the new roles at Tailwind Labs was April 3rd, so we can expect the announcement of the new hires soon!

And last but not least, Tailwind CSS' April fool's joke this year was hilarious 🤣

> Something I've been trying to crack for a long time in Tailwind is making `calc()` expressions less verbose.

> Was doing some personal budgeting on the weekend and had a eureka moment — coming in Tailwind CSS v4 🔥 [pic.twitter.com/1LxkoCDnDx](https://x.com/adamwathan/status/1774811700115521709?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [April 1, 2024](https://x.com/adamwathan/status/1774811700115521709?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

## **📚 Learning**

### **[CSS4 Is Coming (Not a Clickbait)](https://www.youtube.com/watch?v=j4mOm1qic7k&ref=tailwindweekly.com)**

Believe it or not CSS3 is 10 years old already and CSS4 is on the horizon. This video shows how we got to CSS3 and what we can expect for CSS4\. Overall, it's a great watch.

### **[What is INP and why you should care](https://blog.sentry.io/what-is-inp/?ref=tailwindweekly.com)**

Google is shaking things up with the new Core Web Vital metric: Interaction to Next Paint (INP). INP measures the critical moments between interactions like clicks or key presses and the following visual feedback. By phasing out First Input Delay (FID), Google will now consider your site's INP when determining your ranking on the SERPs.

### **[Designing better target sizes](https://ishadeed.com/article/target-size/?ref=tailwindweekly.com)**

As defined by the article, a target size is *the specific region within a user interface element where a user clicks, touches, or taps to trigger an action*. This concept is critical on mobile and Shadeed created an excellent guide on how to improve this for your users.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-141.jpeg)

****[Mailcoach](https://www.mailcoach.app/?ref=tailwindweekly.com)**

The new Mailcoach landing page shows that blue can still be elegant if used correctly. Made by the Spatie team, known for its Laravel packages, Mailcoach is an email marketing service that respects your users' privacy and emphasizes good developer experience. Their landing page is a testament to this, with its elegant font choices, clean layout, and blue tones.

The best part? You can even self-host it!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-142.jpeg)

****[css2wind](https://www.css2wind.com/?ref=tailwindweekly.com)**

This is a cool minigame that helps you learn Tailwind CSS classes by asking you to translate a given CSS property into its Tailwind CSS equivalent. It's a very simple game, and your score is based on 8 points (probably following Tailwind's rule of 4). I think this is the perfect tool to learn Tailwind's classes ASAP and make it fun.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

If you love Astro then you'll love **[Astro Weekly](https://astroweekly.dev/?ref=tailwindweekly.ongloat.com)**: a free **5-minute** weekly email roundup packed with **insights, tools and resources** from the Astro universe.

---

**[CartoSVG](https://cartosvg.com/?ref=tailwindweekly.com)** \- Easily integrate stylish, **interactive maps** with optimized SVG. Perfect for light, engaging sites.

---

**[VitePress](https://vitepress.dev/?ref=tailwindweekly.com)**: Turn Markdown into elegant docs quickly with **Vite & Vue**. Perfect for developer documentation.

---

**[ServerlessHorrors](https://serverlesshorrors.com/?ref=tailwindweekly.ongloat.com)**: Cautionary tales from the cloud. Discover **jaw-dropping stories** of serverless gone **wrong**, from sky-high bills to lost databases.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #150: v4 alpha #8 now compiles in microseconds 🤯!
URL: https://tailwindweekly.com/issue-150/
Last updated: 2025-09-02T06:20:21.000Z
Hello folks!

Another week and the alpha updates keep coming 💪. With each alpha version being significantly faster than the last, it'll add a whole new meaning to *instant* 😆*.*

Now, let's dive in!

## **🌟 News**

With the launch of the v4 alpha a few weeks ago, we're not at [alpha version #8](https://x.com/adamwathan/status/1767276471427420391?ref=tailwindweekly.ongloat.com), which brings even more performance improvements. We're talking *microseconds*, folks. This might not be as noticeable on small projects, but on big codebases, it will be a *joy* to use 😍.

And as the Tailwind Labs team keeps working on the alpha, they're also gearing up to expand their team! Tailwind Labs is currently [looking to fill 2 roles](https://tailwindcss.com/blog/hiring-a-design-engineer-and-staff-engineer?ref=tailwindweekly.ongloat.com):

**Staff Software Engineer**

🏕️ Fully remote💰 $275,000 USD🏝️ 30 days vacation💻 $7500 gear budget

**Design Engineer**

🏕️ Fully remote💰 $275,000 USD

Both roles are open to candidates in the Eastern (UTC-5) to Central European (UTC+1) time zones.

I'm looking forward to new faces on the team soon 🤩.

## **📚 Learning**

### **[Explore the Art of Customising Tailwind CSS](https://www.youtube.com/watch?v=mVdV1Z3srBU&list=PLMdXHJK-lGoBx3Nq2jHgrU7DGsJNi1nwi&index=15&ref=tailwindweekly.com)**

Another great video from Shruti! This one guides you through the various ways you could customize Tailwind in your project, from using the @layer directive to creating your own custom plugins, Shruti walks you through it all.

### **[CSS Foundations: What is IACVT?](https://www.bram.us/2024/02/26/css-what-is-iacvt/?ref=tailwindweekly.com)**

This one is a simple but great primer on the complexities of CSS value processing. IACVT stands for "Invalid At Computed Value Time," and if you work with CSS regularly, then you probably have encountered this issue. The author mentions why this happens and what options we have to mitigate it. Overall it's a great technical piece.

### **[Top 5 CSS Mistakes made by Front End Engineers](https://www.greatfrontend.com/blog/top-css-mistakes-made-by-front-end-engineers?ref=tailwindweekly.com)**

This is a great guide about the top 5 pitfalls that even experienced developers might fall into. I particularly liked Mistake #5: "*Using only grid or only flex*" because I have fallen into this trap a lot over the years, but I learned there's a time and place for CSS grid as well 😄.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-137.jpeg)

****[Dub.co](https://dub.co/?ref=tailwindweekly.com)**

This week's showcase really stood out to me with its minimalist design and strikingly clean interface. I love the scrolling gradient effect on the whole landing page and how linear the page looked. For a service as simple as this it really worked wonders on the design.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-138.jpg)

****[Pagedone](https://pagedone.io/?ref=tailwindweekly.com)**

Pagedone is another Tailwind CSS components kit but with an emphasis on the design side. They include over 1000 components, sections, and pages and offer a Figma file and over 300 free SVG icons. Overall, I like their minimal design and the JS interactivity functionality. Looks like a promising UI library to keep an eye on.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

If you love Astro then you'll love **[Astro Weekly](https://astroweekly.dev/?ref=tailwindweekly.ongloat.com)**: a free **5-minute** weekly email roundup packed with **insights, tools and resources** from the Astro universe.

---

**[CodeRadar](https://www.coderadar.co/?ref=tailwindweekly.com)** – **Automated** protection for your code against **unauthorized GitHub shares**. Alerts you instantly, and supports custom alerts as well.

---

**[Zed](https://zed.dev/?ref=tailwindweekly.ongloat.com)** \- The **ultimate** text editor by the creators of Atom and Electron. Ideal for developers seeking a **sophisticated** yet **intuitive** coding environment.

---

**[Neon](https://neon.com/?ref=tailwindweekly.ongloat.com)** \- Revolutionize your database with **serverless, fault-tolerant, branchable Postgres**. Made for seamless scalability and **reliability**.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #149: The first v4 alpha is here 🤩!
URL: https://tailwindweekly.com/issue-149/
Last updated: 2025-09-02T06:30:22.000Z
Hello folks!

This week, we're happy to report we got the first alpha release of v4! The Tailwind Labs team has been working on this for months, and they just decided to open source their progress.

This alpha includes features like the new Oxide engine and what the team calls a "unified toolchain", where Tailwind stops being just a PostCSS plugin and finally becomes an "*all-in-one tool for processing your CSS*". We're living the dreams, folks 🥳.

Now, let's dive in!

## **🌟 News**

This week, we got the first [alpha release](https://tailwindcss.com/blog/tailwindcss-v4-alpha?ref=tailwindweekly.ongloat.com) of Tailwind CSS v4 🤩.

Since it's still an alpha, it doesn't yet have feature parity with v3, but the improvements it brings are undeniable.

We're talking 10x speeds, a smaller footprint, just 1 dependency, and a completely new custom parser.

![](https://tailwindweekly.com/content/images/image-133.jpeg)

In the [words](https://x.com/reinink/status/1765427775198859411?ref=tailwindweekly.ongloat.com) of Jonathan Reinink, a current member of the Tailwind Labs team:

> This next version of Tailwind is faster, lighter, easier to install, nicer to configure, and is just more "CSS-y"

Be sure to check out the [official blog post](https://tailwindcss.com/blog/tailwindcss-v4-alpha?ref=tailwindweekly.ongloat.com) to learn more about it, and remember to report any bugs you find!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-134.jpeg)

****[12 Modern CSS One-Line Upgrades](https://moderncss.dev/12-modern-css-one-line-upgrades/?ref=tailwindweekly.com)**

This is a concise yet comprehensive guide that showcases how a single line of CSS can significantly improve your project. It covers different CSS properties that are categorized into stable upgrades, enhancements, and progressive enhancements and range from achieving perfect aspect ratios with aspect-ratio to customizing form elements with accent-color.

### **[CSS Relative colors](https://techhub.iodigital.com/articles/css-relative-colors?ref=tailwindweekly.com)**

This one shows how the from keyword revolutionizes color adjustments in CSS, making it simpler to create dynamic and state-aware UI elements like buttons and links. By using the power of relative colors, devs can now finally modify the lightness, chroma, and hue of an accent color directly in CSS which can be pretty handy.

### **[An introduction to @scope in CSS](https://ww1.fullystacked.net/scope-in-css/?ref=tailwindweekly.com)**

With @scope, developers can now define styles based on proximity in the DOM. This guide walks you through practical examples, showcasing how @scope can solve common styling issues, such as conflicting styles in nested components and the need for more control over style inheritance.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-135.jpeg)

****[Learnvim](https://www.learnvim.com/?ref=tailwindweekly.com)**

This week's showcase is a mix of Tailwind UI components and template sections mixed with a classy style that appeals to devs wanting to learn the dark arts of Vim. I loved their use of monospace fonts that give a nod to traditional coding environments, and I also liked the animated screenshots. Overall I find the site a great combination of pre-made components with an added personal touch.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-136.jpeg)

****[Pines UI](https://devdojo.com/pines?ref=tailwindweekly.com)**

Pines UI is a component library made with Tailwind CSS and Alpine.js and inspired by Radix UI. They have a varied list of ready-made components like sliders, accordions, and even niche ones like a command palette and a date picker. Overall, I find it very well-designed, and it looks very adaptable.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Iconoir](https://iconoir.com/?ref=tailwindweekly.com)** – A vast, open-source collection of SVG icons for developers and designers, **free and customizable** for any project.

---

**[Refine](https://refine.dev/?ref=tailwindweekly.com)** – An open-source framework for building **powerful web apps quickly**. Streamline your development with ready-to-use hooks & components.

---

**[ToS;DR](https://tosdr.org/en?ref=tailwindweekly.com)** – Simplifying the **"biggest lie on the web"** by reviewing and rating website terms of service and privacy policies, making them accessible and **understandable** for everyone.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #148: theme() is better than @apply 😌!
URL: https://tailwindweekly.com/issue-148/
Last updated: 2025-09-02T06:41:32.000Z
Hello folks!

The Tailwind Labs team is no doubt preparing for the v4 launch and testing it as much as possible. Jonathan Reinink, co-creator of Tailwind, is even [using it](https://x.com/reinink/status/1763370940497367200?ref=tailwindweekly.ongloat.com) on a new project so we can expect the beta launch pretty soon!

Now, let's dive in!

## **🌟 News**

We didn't get any official news this week, but got 2 big highlights from Adam on Twitter/X, lets chat about that.

![](https://tailwindweekly.com/content/images/image-128.jpeg)

Just when you thought Tailwind couldn't get even more powerful, Adam [drops](https://x.com/adamwathan/status/1763606749154541987?ref=tailwindweekly.ongloat.com) this lunacy. This monstrosity of a class can now be possible in v4! I really like that you it doesn't introduce a new syntax, you just write the class almost like you're talking to someone. Surreal!

After that, Adam answered the primordial question of why he [always recommends](https://github.com/tailwindlabs/tailwindcss/discussions/13064?ref=tailwindweekly.ongloat.com) to use theme() instead of @apply . It boils down to *simplicity*. If you're already on a CSS file, then writing CSS is easy and theme() works well for that, but the @apply directives hide an incredible amount of unnecessary complexity and generate more CSS for some use cases than just using plain old CSS rules.

Of course, it is a preference thing, and I don't think @apply will disappear anytime soon, but from a technical and practical perspective, theme() will always be better.

On another note, the Headless UI site redesign is still ongoing, and we got a screenshot to peek at. I'm loving the dark theme vibes!

![](https://tailwindweekly.com/content/images/image-129.jpeg)

****📚 Learning**

![](https://tailwindweekly.com/content/images/image-130.jpeg)

****[6 Tailwind CSS best practices, tips, and tricks for 2024](https://benjamincrozat.com/tailwind-css-best-practices?ref=tailwindweekly.com)**

I really loved this one! The author dives into how to customize Tailwind directly in the config file, avoiding extra CSS, and even talks about some cool Visual Studio Code plugins that make working with Tailwind a breeze. Plus, he shares some smart advice on keeping your code clean and manageable, like breaking up long class lists and when to extract components. It's a great read if you want to up your Tailwind game and make your development process smoother.

### **[Playing with Infinity in CSS](https://codersblock.com/blog/playing-with-infinity-in-css/?ref=tailwindweekly.com)**

If you're curious about the lesser-known features of CSS, you'll love this guide that dives into the concept of infinity in CSS. It explores how this constant can be used for creative solutions, like effortlessly winning the z-index battle or experimenting with element sizes. It also reveals that infinity in CSS isn't limitless but varies across browsers and devices. Definitely an eye-opener piece!

### **[The New CSS Math: pow(), sqrt(), and exponential friends](https://danielcwilson.com/posts/mathematicss-powers/?ref=tailwindweekly.com)**

This great guide breaks down how to use pow(), sqrt(), and a bunch of other cool functions that are now part of CSS. Dan makes it super accessible, showing how these functions can make your life easier, especially with dynamic sizing and animations.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-131.jpeg)

****[Plane](https://plane.so/?ref=tailwindweekly.com)**

Even simple designs can be impactful, and this week's showcase is a testament to that! I love that its typography is crisp and professional and has a layout that's a nod to the principles of good design functional yet visually pleasing.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-132.jpeg)

****[Fluid Space Calculator](https://utopia.fyi/space/calculator/?ref=tailwindweekly.com)**

This calculator helps you calculate and generate fluid space values based on minimum and maximum viewport sizes. Super handy for creating a cohesive space system across different devices. The best part is that it can output the CSS you need so you can just copy and paste it on your project.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Ollama](https://ollama.com/?ref=tailwindweekly.com)** – Jumpstart your projects with local large language models featuring **Llama 2, Code Llama**, and customization options.

---

**[Blot](https://blot.im/?ref=tailwindweekly.com)** – Effortlessly **convert any folder into a sleek website**. Ideal for developers seeking simplicity and efficiency in web publishing.

---

**[FlowMapp](https://www.flowmapp.com/?ref=tailwindweekly.com)** – Streamline UX planning with **visual sitemaps, user flows, and wireframing tools** in one platform.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #147: More v4 sneak peeks 👀!
URL: https://tailwindweekly.com/issue-147/
Last updated: 2025-09-02T06:51:10.000Z
Hello folks!

We have more tidbits of upcoming functionality for v4\. I'm dying to try that new CSS-driven config. While I love JS, CSS was my first taste of programming, so I have a soft spot for it.

Adam also [shared](https://x.com/adamwathan/status/1758675712800632939?ref=tailwindweekly.ongloat.com) a big milestone on Twitter: "*...first time rendering a Tailwind UI example pixel-for-pixel with the totally rewritten Tailwind CSS v4 codebase".* The best part is that there's no tailwind.config.js in sight!

Now, let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-124.jpeg)

Now, you'll be able to both outer and inner shadows/rings at the same time.

![](https://tailwindweekly.com/content/images/image-125.jpg)

With the new CSS-driven configuration coming, creating new utilities will be extremely easy. Imagine creating a font-comic utility by just creating a new CSS variable under our new @​theme directive.

Also, this is not strictly Tailwind-related, but [Adam mentioned](https://x.com/adamwathan/status/1759973610612048323?ref=tailwindweekly.ongloat.com) he's going to Laracon this year 🤘. I'll also be attending, so if you're going, be sure to say hi 😁!

## **📚 Learning**

### **[8 TailwindCSS Classes I Wish I Found Earlier](https://www.youtube.com/watch?v=mjL%5FvrNo1fQ&ref=tailwindweekly.com)**

TailwindCSS is known for its straightforward approach to styling, but this guide takes you beyond the basics, revealing some hidden gems that can take your projects to the next level. From improving accessibility with sr-only to adding flair with advanced gradient techniques, you'll learn 8 classes you wish you knew sooner!

### **[Create custom Dynamic Components in Tailwind CSS using matchComponents Plugin Function](https://www.youtube.com/watch?v=sxxUK0l8jKE&ref=tailwindweekly.com)**

The tutorial walks you through crafting an avatar component that adapts to your theme's custom settings using the matchComponents plugin function. Creating plugins in Tailwind can be a very powerful technique and Shruti, as always, teaches you everything you need to know about this function.

### **[A guide to designing accessible, WCAG-conformant focus indicators](https://www.sarasoueidan.com/blog/focus-indicators/?ref=tailwindweekly.com)**

This guide breaks down the importance of visible focus indicators for keyboard and assistive technology users, ensuring your web projects are inclusive and navigable for everyone. From understanding a focus indicator to implementing it without obscuring the focused element, this guide is packed with practical advice, examples, and compliance tips to elevate your accessibility game.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-126.jpeg)

****[Axiom](https://axiom.co/?ref=tailwindweekly.com)**

This week's showcase is a visual treat for data enthusiasts! The monochromatic palette, with its clever use of blues, gives it a professional yet approachable feel. I love love love that font (Berkeley Mono, for the curious) and the minimalist icons are so cute.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-127.jpeg)

****[tailwindcss-highlights](https://tailwindcss-highlights.hubatsch.dev/?ref=tailwindweekly.com)**

This tailwind plugin can add a flair of style to any project. It's a collection of text highlight effects, each with a unique design and size. The cool part is that you can just import what you need, so the bundle size is tiny. Overall, a cool utility to spice up your next project.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Kamal](https://kamal-deploy.org/?ref=tailwindweekly.com)** is a versatile deployment tool, enabling easy transitions of web apps from **cloud to bare metal with Docker**. It ensures zero downtime, supports all web apps, and offers a straightforward setup for **seamless deployment**.

---

**[Twenty](https://twenty.com/?ref=tailwindweekly.com)** is your **friendly open-source CRM** packed with customizable features and strong community support to make managing customer relationships a breeze. It's all about making your CRM work **smoothly and efficiently** for you.

---

**[Maily](https://maily.to/?ref=tailwindweekly.com)**, your go-to open-source email editor, simplifies **crafting beautiful emails with pre-designed components**, ensuring your messages shine across all clients. Perfect for creating effortless, impeccable email communications.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #146: big v4 updates 😍!
URL: https://tailwindweekly.com/issue-146/
Last updated: 2025-09-02T07:03:30.000Z
Hello folks!

Looks like v4 is just around the corner and it will bring huge improvements! I can't wait for the alpha to play with it; I'm particularly excited about the new 12x speed. Pair that with Vite, and it'll be lightning fast!

Now, let's dive in!

## **🌟 News**

The Tailwind Labs team has been hard at work on v4, and here are some updates:

**15 months, they have [ticked all the boxes](https://x.com/adamwathan/status/1754960262711349604?ref=tailwindweekly.ongloat.com)!**

- Will have a smaller API surface area, leveraging more platform features
- No content configuration, config file optional altogether
- Will only have one dependency
- It's 12x faster than v3 so far

**We'll be getting a new, revamped color palette**

We have had the current palette since v2, and Steve mentioned that, after using it for a few years, they have [identified a few issues](https://x.com/steveschoger/status/1758538613497778183?ref=tailwindweekly.ongloat.com) they want to fix.

He also mentioned adding P3 support. P3, also known as Display P3, is an RGB color space with a wider color gamut compared to the traditional sRGB, covering more of the RGB color space visible to the human eye.

**v4 will offer big improvements in how it handles variants.**

[Quoting Adam](https://x.com/adamwathan/status/1755037215334224356?ref=tailwindweekly.ongloat.com): *Each variant is just a selector that includes the nesting symbol, and we just wrap them around the declarations of the plain utility class*.

![](https://tailwindweekly.com/content/images/image-120.jpeg)

That's it for v4 updates!

Now*,* on the community site:

- Rails UI, the popular component library for Ruby on Rails, removed Bootstrap support [in favor of](https://www.youtube.com/watch?v=Jaa1reWjsqA&ref=tailwindweekly.com) Tailwind CSS.
- Nearly a year after the release of Gimly Tailwind 3.0, the team is thrilled to announce [the launch of version 4](https://x.com/gimli%5Fapp/status/1749322290305667276?ref=tailwindweekly.ongloat.com) and I'm excited to try it out.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-121.jpeg)

****[My take on fading content using transparent gradients in CSS](https://polypane.app/blog/my-take-on-fading-content-using-transparent-gradients-in-css/?ref=tailwindweekly.ongloat.com)**

The guide walks you through the nitty-gritty of using background-clip and mask-image to give your text a cool, fading effect using transparent gradients, no matter the backdrop. It's packed with tips to avoid common pitfalls and perfect for both design aficionados looking to sprinkle some extra magic on their projects.

### **[Better form UX with the CSS property field-sizing](https://blog.stephaniestimac.com/posts/2024/01/css-field-sizing/?ref=tailwindweekly.com)**

Previously, devs wanting to give their user a good writing experience on their forms had to use JS to make their inputs "grow" with the text. But there's now a possible CSS-only solution on the horizon. The upcoming CSS field-sizing property will allow text input fields to accommodate any text length and make them visible to the user. Looking forward to it!

### **[Generate Tailwind Utility Stylesheets on Demand with Curlwind](https://laravel-news.com/curlwind?ref=tailwindweekly.com)**

Imagine grabbing the Tailwind CSS utility classes you need, on-demand, without Node, without installing Tailwind, and without any build configuration. Curlwind lets you call in the styles you want with a simple URL query, making it perfect for those niche projects where you want the power of Tailwind without the build process. Be sure to check the article for more details.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-122.jpeg)

****[NomadKit](https://nomadkit.co/?ref=tailwindweekly.com)**

This week's showcase has a design that is clean and focused, with a straightforward layout that's all about utility and ease of navigation. With a cool blue color scheme and simple landmark graphics it doesn't distract you from its main purpose: giving you the best city guides for digital nomads. From the homepage to the pricing, it's consistency speaks to the thoughtful curation of content, mirroring the organization one would expect from their city guides. Definitely a beautiful site!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-123.jpeg)

****[tints.dev](https://www.tints.dev/palette/v1:cmVkfEVGNDQ0NHw1MDB8cHwwfDB8MHwxMDB8YQ?ref=tailwindweekly.com)**

This web color tool transforms any hex value into a full spectrum of shades, from the lightest tint to the deepest shade, and it's specially made for Tailwind. There's loads of variables to customize like saturation, lightness and even luminance distribution. And for the tech-savvy, there's an API to seamlessly integrate these palettes into your design tools. It's become my favorite color tool so far!

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[MacWhisper](https://goodsnooze.gumroad.com/l/macwhisper?ref=tailwindweekly.com)** simplifies audio transcription on Macs. **Drag files for instant, quality text conversion**. It's offline for your privacy, supports 100 languages, and offers versatile export options. Perfect for confidential audio.

---

**[Medusa](https://medusajs.com/?ref=tailwindweekly.ongloat.com)** redefines ecommerce with its **open-source backend in NodeJS**. As GitHub's most popular e-commerce project, it invites you to join and shape the **future of commerce**.

---

**[Better-commits](https://github.com/Everduin94/better-commits?ref=tailwindweekly.ongloat.com)** is a CLI tool that helps you create **structured commit messages** easily. It's designed to **streamline your Git workflow** with prompts and configurations.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #145: v4 is getting lightning fast and Steve is working on a new icon set 🤩
URL: https://tailwindweekly.com/issue-145/
Last updated: 2025-09-03T07:13:49.000Z
Hello folks!

This week, we talk about the electrifying progress of Tailwind CSS v4, which promises an incredible speed improvement, and we have a fresh icon set on the horizon. We also celebrate Tailwind CSS reaching the 8 million weekly downloads milestone!

Beyond the news, we go through great articles and community showcases, from mastering CSS color-mixing to creative SVG drawing and variable naming. Plus, we showcase a lovely personal site and also feature a cool tailwind tool tailored to Laravel devs.

Let's dive in!

## **🌟 News**

Here's the rundown from the last two weeks!

#### **Work on v4 is still ongoing 🛠️**

- Now it's [11 TIMES faster](https://x.com/adamwathan/status/1752750470387409383?ref=tailwindweekly.ongloat.com) than v3
- They're working on a [Vite plugin ](https://x.com/adamwathan/status/1749886772165706239?ref=tailwindweekly.ongloat.com)that, and I quote, "parses classes from the module graph instead of the filesystem", I'm so excited for this one!

**We're getting a new icon set 👀**

![](https://tailwindweekly.com/content/images/image-116.jpeg)

It seems [Steve is working on a new icon set](https://x.com/steveschoger/status/1750250976169128148?ref=tailwindweekly.ongloat.com) and I love the new duotone design! No ETA yet, but I'll update you on the progress here on the newsletter as soon as I know more.

**Tailwind CSS reached 8 MILLION downloads PER WEEK 🥳**

![](https://tailwindweekly.com/content/images/image-117.jpeg)

Tailwind just reached a new adoption milestone! Now, it's getting [8 million weekly downloads](https://x.com/reinink/status/1750908487750570233?ref=tailwindweekly.ongloat.com) on NPM. I can't believe it launched just a few years ago, and it keeps getting better and better.

## **📚 Learning**

### **[A deep dive into CSS color-mix()](https://www.youtube.com/watch?v=I9zHX-jSKpA&ref=tailwindweekly.com)**

In this video, Kevin explores the new CSS function color-mix(), which allows developers to mix colors directly within CSS without needing preprocessors like Sass. He breaks down the basics of how color-mix() works, including manipulating percentages to achieve desired color blends, the behavior when percentages don't total 100%, and using different color models. If you want to spice up your use of colors on your next project, then you'll lose color-mix().

### **[Naming Variables In CSS](https://jwdallas.com/posts/namingcssvariables/?ref=tailwindweekly.com)**

This piece offers a deep dive into the nuanced practice of naming CSS custom properties. We all know naming things in software is hard, but the author explores casing conventions and recommends a mix of kebab casing and camel casing to keep things clear and consistent. Overall, this is an excellent piece, and it's worth a read. Even if you don't use CSS custom properties, I'm sure you'll like it.

### **[Learn SVG by drawing an arrow](https://blog.shalvah.me/posts/learn-svg-by-drawing-an-arrow?ref=tailwindweekly.com)**

This one is a hands-on guide that breaks down how SVG works... by walking you through the basics of drawing an arrow using simple geometry and JavaScript. I loved the example! The author explains the basics of drawing with SVG, from circles and rectangles to more complex paths, with clear examples and some inline styling. The post is super accessible, explaining things like the Cartesian plane in SVG and how to manipulate SVG elements with JavaScript. Plus, there's a neat section on using the <marker> element to add arrowheads easily, making this a great read for anyone looking to get their hands dirty with some SVG magic.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-118.jpeg)

****[Jahir Fiquitiva](https://jahir.dev/?ref=tailwindweekly.com)**

This week we have another personal site, this time by [@jahirfiquitiva](https://x.com/jahirfiquitiva?ref=tailwindweekly.ongloat.com). I love his design choices, from the cheerful blue that adds a splash of personality to the crisp typography that makes everything readable and engaging. I think it's a friendly, straightforward design that makes you want to click around and see more.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-119.jpeg)

****[tailwind-merge-laravel](https://github.com/gehrisandro/tailwind-merge-laravel?ref=tailwindweekly.com)**

tailwind-merge-laravel is a great tool that automatically sorts out class conflicts in Tailwind CSS within Laravel projects. It's designed to make life easier when you're trying to override Tailwind CSS classes in your Blade components, offering a seamless way to merge multiple classes and handle conflicts efficiently.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Stay](https://cordlessdog.com/stay/?ref=tailwindweekly.com)** is a Mac app that **organizes** your workspace by **remembering window positions**. It's great for multitasking and changing setups.

---

**[Readwise Reader](https://readwise.io/read?ref=tailwindweekly.com)** is a Pocket and Instapaper alternative that simplifies your web reading by **consolidating all your articles, videos, PDFs and more in one place** for a more focused experience. It also has notes highlighting!

---

**[DevDb](https://marketplace.visualstudio.com/items?itemName=damms005.devdb&ref=tailwindweekly.ongloat.com)** is a VSCode extension that loads your local database into a VSCode offering a decent GUI experience. **It's like having TablePlus right there on your editor!**

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #144: v4 will be lightning fast ⚡!
URL: https://tailwindweekly.com/issue-144/
Last updated: 2025-09-03T07:25:23.000Z
Hello folks!

This week, we start with news on the upcoming v4 via benchmarks, a look at new Headless UI designs, and a community workshop for perfecting your Figma to Tailwind skills.

We also feature in-depth articles on CSS techniques, efficient web development configurations, and a showcase of Thinkmill's agency site. Plus, discover handy resources like the Tailwind Color Palette to speed up your development workflow.

Let's dive in!

## **🌟 News**

Adam surprised us again on Twitter this week by sharing some [performance benchmarks](https://x.com/adamwathan/status/1748408633518420130?ref=tailwindweekly.ongloat.com) for the upcoming v4 of Tailwind CSS.

![](https://tailwindweekly.com/content/images/image-111.jpeg)

So far, compiling the Catalyst library for v4 will be 7 times faster than compiling for v3 🤯. I can't wait for the beta to be out to play with it 🤘.

On another note Steve [shared](https://x.com/steveschoger/status/1748429337190109518?ref=tailwindweekly.ongloat.com) more designs for the upcoming Headless UI revamp, I'm totally loving that new dark mode 😍.

![](https://tailwindweekly.com/content/images/image-112.png)

![](https://tailwindweekly.com/content/images/image-113.jpeg)

And now, on the community side, Simon Vrachliotis announced a new online workshop called ["Pixel Perfect Figma to Tailwind"](https://x.com/simonswiss/status/1748291932630225165?ref=tailwindweekly.ongloat.com) for March 7th, 2024\. At the time of this writing, there are a few tickets left, and it even has purchasing power parity, so depending on where you're from, you can get a discount.

## **📚 Learning**

### **[How to Create Stunning Slanted Containers with CSS](https://www.youtube.com/watch?v=emP8tWHtpwk&ref=tailwindweekly.com)**

Zoran, the creator of CSS Weekly, has a knack for creating awesome videos about obscure CSS stuff, and his latest video doesn't disappoint. This one guides you through the intricacies of using CSS clip-path and shape-outside properties to create visually striking slanted containers. While it's a niche technique, I'm sure you can pick up a few tips and tricks if you watch it.

### **[The Complex But Awesome CSS border-image Property](https://www.smashingmagazine.com/2024/01/css-border-image-property/?ref=tailwindweekly.com)**

Temani Afif's article is a great guide about the often overlooked but incredibly versatile CSS border-image property. It showcases the property's potential for creating unique decorative accents and shapes, moving beyond its seemingly complex slicing logic. Afif's approachable style breaks down everything you need to know about the property without technical jargon and focuses on practical and fun applications.

### **[Correctly Configure (Pre) Connections](https://csswizardry.com/2023/12/correctly-configure-preconnections/?ref=tailwindweekly.com)**

Harry Roberts' insightful piece delves into the nuances of correctly configuring preconnect in web development. Harry explains the importance of preemptively opening full connections (DNS, TCP, TLS) to crucial origins and highlights common misconfigurations. Using real-world examples, like the BBC News homepage, he illustrates the impact of preconnect and the subtleties of its use, including the critical decision of when to use the crossorigin attribute.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-114.jpeg)

****[Thinkmill](https://www.thinkmill.com.au/?ref=tailwindweekly.com)**

Thinkmill is an agency that has been on my radar ever since they released the [Keystatic CMS](https://keystatic.com/?ref=tailwindweekly.ongloat.com) which I'm a huge fan of. Since it has such a great design, it seemed obvious that their company site would also be beautiful, and it was so!

The site is a great example of a minimal but beautiful agency site. With lots of white space, subtle colors, and elegant shapes, I can say it's one of my favorite agency site designs I have seen so far.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-115.jpeg)

****[Tailwind Color Palette](https://tailwindcolor.com/?ref=tailwindweekly.com)**

This small site is a fantastic resource for Tailwind CSS users. It showcases the entire Tailwind CSS color palette and allows you to copy a color with just a click, supporting HEX, RGB, HSL, and Tailwind Class formats.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Dynalist](https://dynalist.io/?ref=tailwindweekly.com):** **Capture and flesh out your brilliant ideas in one place.** Organize and focus with thoughtful shortcuts and constant updates. Sign up for free and start organizing your thoughts efficiently.

---

**[Payload CMS:](https://payloadcms.com/?ref=tailwindweekly.com)** An open-source, headless CMS and application framework that **simplifies content management**. Built with TypeScript, Node.js, and React, it offers a code-first, extensible platform for everything from websites to native apps.

---

**[Depot.dev:](https://depot.dev/?ref=tailwindweekly.com)** **Streamline your development workflow with Depot's efficient build tools**. Perfect for developers seeking a simplified, fast, and reliable build process for their projects.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #143: Updated Tailwind UI templates, a possible "force" variant + more!
URL: https://tailwindweekly.com/issue-143/
Last updated: 2025-09-03T07:36:06.000Z
Hello folks!

This week's Tailwind Weekly is packed with updates and insights that'll keep your dev skills sharp. We're talking about the latest from Tailwind Labs, including updated Tailwind UI templates and Adam's working on a potential force variant. There's also a facelift coming for Headless UI, so stay tuned!

In our learning section, we dive into container queries in Tailwind CSS, explore the :has() selector for elegant scroll locks, and tackle a Tailwind Typography challenge with a custom plugin. And don't miss OrbStack in our showcase, a Docker Desktop alternative with a sleek interface. For resources, check out TWC, a lightweight library blending React and Tailwind CSS for efficient component creation.

Let's dive in!

## **🌟 News**

Another week of updates from the Tailwind Labs team:

We start the week with updated templates on Tailwind UI, now [all templates](https://x.com/reinink/status/1745190039401775373?ref=tailwindweekly.ongloat.com) run:

- Tailwind CSS **v3.4**
- TypeScript **v5.3**
- Next.js **v14**

Adam also prototyped a possible force variant to handle scenarios where you want to override values inside a component from the parent. See screenshot:

![](https://tailwindweekly.com/content/images/image-107.jpeg)

While there are third-party solutions to this problem, there's nothing on Tailwind CSS itself that prevents this issue, and I think Adam wants to solve that.

Last but not least, Headless UI is [getting a facelift](https://x.com/steveschoger/status/1745816291351425068?ref=tailwindweekly.ongloat.com)!

![](https://tailwindweekly.com/content/images/image-108.jpeg)

Now that the Tailwind Labs team is prioritizing some Headless UI features, I can understand why they wanted to spice up the landing page a bit. I can't wait to see its final form!

## **📚 Learning**

### **[What are Container Queries and how to use them in Tailwind CSS](https://www.youtube.com/watch?v=5j0WNclnsPk&ref=tailwindweekly.com)**

This video dives into the world of container queries in Tailwind CSS, showcasing how they revolutionize styling components based on their parent container's size. The video walks you through a practical example, demonstrating how to use container queries for an ad component that adapts seamlessly between different container widths. It's a real eye-opener, especially if you've been juggling with traditional methods. Plus, the video includes a GitHub repo link for the example used, making it super handy for hands-on learning.

### **[Locking scroll with :has()](https://robbowen.digital/wrote-about/locking-scroll-with-has/?ref=tailwindweekly.com)**

Robb Owen's latest piece is a gem for anyone looking to streamline their modal or flyout menus, especially on mobile. He delves into the newly available :has() selector in CSS, now supported across all browsers, to create an elegant solution for scroll locks. It cleverly ties the scroll lock to the DOM's state, eliminating the need for complex JavaScript state management. It's a straightforward yet powerful technique, perfect for handling multiple scroll locks or dealing with client-side routing in frameworks.

### **[Targeting only inline code elements with Tailwind Typography](https://aaronfrancis.com/2023/targeting-only-inline-code-elements-with-tailwind-typography-3b5e8d43?ref=tailwindweekly.com)**

Aaron Francis recently published a nifty trick for Tailwind Typography users. He zeroes in on a common issue: the prose-code:{utility} modifier in Tailwind affecting both block and inline code elements. His solution? A custom Tailwind plugin to specifically target inline code elements. This approach allows for distinct styling of inline code without impacting code blocks. The post walks you through the CSS selector magic and the plugin code to add to your tailwind.config.js.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-109.jpeg)

****[OrbStack](https://orbstack.dev/?ref=tailwindweekly.com)**

OrbStack is a developer tool that serves as a Docker Desktop alternative. With its sleek dark theme, the site blends speed and elegance, mimicking modern development environments. The typography is crisp, clean, and absolutely on point, enhancing readability while keeping distractions at bay. The use of color highlights is subtle yet effective, drawing your eye to just the right spots. What really sets it apart, though, is its promise of a clutter-free workspace, giving you the sense that your development is about to become as smooth and efficient as the site itself.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-110.jpeg)

****[TWC](https://react-twc.vercel.app/?ref=tailwindweekly.com)**

TWC is a gem for those who love both React and Tailwind CSS. This lightweight library is all about efficiency, letting you create Tailwind CSS components in a single line. It's packed with features like editor autocompletion, style adaptation based on props, and compatibility with React Server Components. At just 0.49kb, it's a no-brainer for sleek, fast-loading components. Perfect for devs looking to streamline their workflow and keep their projects crisp and clean.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[ShipFast](https://shipfa.st/?via=tailwind-weekly&ref=tailwindweekly.ongloat.com)**: The NextJS boilerplate that transforms your startup idea into reality, fast! Streamline your launch, **focus on building your business, and start earning quickly**. Ideal for developers eager to move from concept to market.

---

**[Polar](https://polar.sh/?ref=tailwindweekly.com)**: Empowering open source developers with a unique platform. Build and **manage your community, fund your projects, and enjoy powerful subscription** benefits. All with zero fixed costs. For developers, by developers.

---

**[Webhook.cool](https://webhook.cool/at/immense-market-02?ref=tailwindweekly.com)**: The ultimate online webhook tester for developers. Easily receive and inspect webhooks from popular services like Shopify, GitHub, and more.

---

Do you want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #142: Project Catalyst, Tailwind v3.4 and the new Heroicons set are finally here 🚀
URL: https://tailwindweekly.com/issue-142/
Last updated: 2025-09-03T07:53:01.000Z
Hello folks!

This is the first issue of the year, and it's packed! We got the launch of Project Catalyst, the latest Tailwind CSS v3.4 release, and a new Heroicons set. Plus, get some cool articles on integrating Tailwind with Shopify and designing better responsive tables.

Also, check out the showcase on HelpKit's elegantly designed landing page, and don't miss the featured resource, Epic Easing, for adding smooth animations to your projects.

Let's dive in!

## **🌟 News**

A lot has changed since the last issue!

![](https://tailwindweekly.com/content/images/image-102.jpeg)

The biggest news is that Project Catalyst finally launched and it's a total game changer. Based on React, it's like building blocks for creating beautiful interfaces for your projects. Quoting Adam, "*It's our first fully-componentized, batteries-included application UI kit for React*". It's only version 0.1, but I can't wait to see what the Tailwind Labs team does with it in 2024.

![](https://tailwindweekly.com/content/images/image-103.jpg)

Next is the release of Tailwind CSS v3.4, and in my opinion, it's one of the most packed releases ever! From the [official announcement](https://tailwindcss.com/blog/tailwindcss-v3-4?ref=tailwindweekly.ongloat.com), here are my favorite top 3 new features:

- **[New :has() variant](https://tailwindcss.com/blog/tailwindcss-v3-4?ref=tailwindweekly.ongloat.com)**[:](https://tailwindcss.com/blog/tailwindcss-v3-4?ref=tailwindweekly.ongloat.com) Style parent elements based on their children.
- **[Style children with the \* variant](https://tailwindcss.com/blog/tailwindcss-v3-4?ref=tailwindweekly.ongloat.com)**[:](https://tailwindcss.com/blog/tailwindcss-v3-4?ref=tailwindweekly.ongloat.com) We’ll probably regret giving you this one.
- **[Balanced headlines with text-wrap utilities](https://tailwindcss.com/blog/tailwindcss-v3-4?ref=tailwindweekly.ongloat.com#balanced-headlines-with-text-wrap-utilities)**[:](https://tailwindcss.com/blog/tailwindcss-v3-4?ref=tailwindweekly.ongloat.com#balanced-headlines-with-text-wrap-utilities) No more max-width tweaking or responsive line breaks.

But there are a LOT more features than that! Check out the [blog post ](https://tailwindcss.com/blog/tailwindcss-v3-4?ref=tailwindweekly.ongloat.com)for more.

![](https://tailwindweekly.com/content/images/image-104.jpg)

Last but not least, we got a new Heroicons set! It's called [Micro](https://tailwindcss.com/blog/heroicons-micro?ref=tailwindweekly.ongloat.com) and every single icon was redesigned to better accommodate more dense interfaces and smaller UI spaces. Steve really let his design side shine on this one; the icons look lovely!

On the community side, the Formkit team released their themes feature with **[full support for Tailwind CSS](https://www.youtube.com/watch?v=JBH93HS%5F0qE&ref=tailwindweekly.com).** Now, you can design any theme for your forms, and when you export it, it'll all be Tailwind CSS classes. Pretty neat!

## **📚 Learning**

### **[Tailwind CSS: Displaying Table Content At Smaller Screen Sizes](https://www.youtube.com/watch?v=qWY25e02BZs&ref=tailwindweekly.com)**

This is an excellent guide for designing responsive tables with Tailwind CS. The video guides you through enhancing table displays for smaller screens, from implementing horizontal scrolling to collapsing and stacking columns and, finally, transitioning to a card layout for compact devices.

### **[How to use Tailwind CSS with Shopify](https://www.youtube.com/watch?v=OJqk5-FC5sg&ref=tailwindweekly.com)**

This video is a comprehensive guide for integrating Tailwind CSS with Shopify. It covers everything from installing the Shopify CLI to setting up Tailwind CSS, providing clear, step-by-step instructions. This tutorial is perfect for anyone looking to leverage the power of Tailwind CSS within their Shopify projects.

### **[Disable hover styles on mobile with Tailwind CSS](https://benjamincrozat.com/disable-hover-styles-mobile-tailwind-css?ref=tailwindweekly.com)**

This piece dives into the common problem where hover styles persist on mobile after a tap, disrupting the user experience. It offers a straightforward fix by enabling the hoverOnlyWhenSupported flag in your Tailwind's config.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-105.jpeg)

****[HelpKit](https://www.helpkit.so/?ref=tailwindweekly.com)**

HelpKit's landing page is a breath of fresh digital air. The layout? Clean and uncluttered, with a royal purple that gives it an edge of sophistication. It's a no-nonsense approach that's all about delivering content with style. The typography? On point. It's the kind of simplicity that's hard to nail but easy to appreciate.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-106.jpeg)

****[Epic Easing](https://epiceasing.com/?ref=tailwindweekly.com)**

Just found this gem recently – it's a total no-brainer for devs and designers. Super simple interface, pick your easing style, see it live, and boom – export the code in CSS, SCSS, Swift, you name it. Perfect for adding slick animations without the headache.

## **👌 Cool Stuff**

Some of these are affiliate links so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills,** this book is for you!

---

**[Thanks.dev](https://www.thanks.dev/home?ref=tailwindweekly.com)** **is a game-changer for open source funding!** It's the perfect bridge between devs and sponsors, making it super easy to support the projects you rely on. This a must-check for anyone in the open-source community **looking to make a real impact**.

---

**[GetChangelog.app](https://getchangelog.app/?ref=tailwindweekly.com)** is a slick solution for quickly adding a changelog to your project. Super customizable and easy to integrate, it's **perfect for keeping your users in the loop with updates**. This is a must-try for any fast-paced project looking to streamline its update communication.

---

**[Pexels](https://www.pexels.com/?ref=tailwindweekly.com)** **is your go-to for stunning free stock photos and videos**, all royalty-free and shared by talented creators. It's a treasure trove for designers and content creators looking for **high-quality visuals without the hassle**. It is a must-visit for anyone needing eye-catching images for their projects.

---

Want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #141: are we getting a Tailwind CSS marketplace? 👀
URL: https://tailwindweekly.com/issue-141/
Last updated: 2025-09-03T08:02:46.000Z
Hello folks!

In this week's Tailwind Weekly, we're excited about the potential of a Tailwind marketplace, as hinted by Adam Wathan in his latest podcast appearance. We're also showing an upcoming new Table component for Catalyst, which promises a flexible approach.

Beyond the news, we've got a deep dive into CSS style recalculation, an introduction to HTMX for dynamic UIs, and a handy Laravel Tailwind Merge package for resolving class conflicts. Plus, don't miss our showcase on a beautifully designed DNS course for developers and the Nightwind CSS plugin for an easy dark mode integration.

Let's dive in!

*P.S. This will be the last issue of the year; we'll take a 2-week break to rest and come back strong in January. Happy holidays ❤️!*

## **🌟 News**

Adam's had yet another podcast appearance where he and the hosts delve into a range of topics, including the much-anticipated Tailwind Catalyst UI kit and the idea of a Tailwind marketplace. I'm really looking forward to the latter 😍.

![](https://tailwindweekly.com/content/images/image-99.jpeg)

On another note, Jonathan Reinink from the Tailwind Labs team [tweeted](https://x.com/reinink/status/1735302496967422271?ref=tailwindweekly.ongloat.com) about the new Table component they're building for Catalyst and how flexible they're planning it to be. Personally, I think it'll be great to have a "tailwind-first" table component example 😁.

## **📚 Learning**

### **[Style Recalculation Secrets They Don't Want You To Know](https://www.youtube.com/watch?v=WRiOWJZoKlw&ref=tailwindweekly.com)**

In this video, Patrick Brosset offers an in-depth look at how browsers handle CSS changes and style recalculations. It's a must-watch for developers interested in optimizing CSS performance and understanding browser rendering.

### **[Introduction to HTMX](https://refine.dev/blog/what-is-htmx/?ref=tailwindweekly.com)**

This guide offers a concise look at HTMX, a JavaScript library enabling dynamic UIs directly through HTML attributes. It's a must-check for developers interested in efficient, markup-driven interactivity.

### **[Laravel Tailwind Merge](https://laravel-news.com/laravel-tailwind-merge?ref=tailwindweekly.com)**

Laravel Tailwind Merge is a new package that simplifies handling Tailwind CSS class conflicts in Laravel Blade files. It allows developers to merge multiple Tailwind classes easily and resolve any conflicts that arise. This tool is particularly useful for those who frequently work with Tailwind in Laravel projects, making it a must-check for a smoother development experience.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-100.jpeg)

****[DNS course for developers](https://www.nslookup.io/dns-course?ref=tailwindweekly.com)**

This week's showcase offers a clean design and a nice cohesive color palette, making it very aesthetically pleasing for a course site. It also seems to blend elements from the [Primer](https://tailwindcss.com/plus/templates/primer?ref=tailwindweekly.com) Tailwind UI template, making it one of the best uses I have seen on the web.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-101.jpeg)

****[Nightwind](https://nightwindcss.com/?ref=tailwindweekly.com)**

Nightwind CSS is a Tailwind plugin that offers an automatic and customizable dark mode. It's designed to be easy to override and adapt to your specific needs, featuring smart color mappings and automatic dark gradients. This plugin is perfect for developers who use Tailwind and want to integrate a seamless dark mode into their projects.

## **👌 Cool Stuff**

Some of these are affiliate links so I get compensated in some way if you buy through them at no cost to you.

**[InspectFlow](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com) is a Tailwind CSS browser extension** for developers that helps you **inspect, edit, and copy components easily**. Features real-time editing, CodePen integration, and class autocomplete.

---

**[Porkbun](https://porkbun.com/?ref=tailwindweekly.com)** offers developers **affordable domain registration and email services**, with **free WHOIS privacy and SSL** for streamlined management.

---

**[Free for Developers](https://free-for.dev/?ref=tailwindweekly.ongloat.com)** offers a curated list of **free services for devs**: cloud, APIs, data tools, etc. Ideal for **efficient, cost-effective** development.

---

**[AuthKit](https://www.authkit.com/?ref=tailwindweekly.com)** provides a full-featured UI for **easy app authentication**. Great for developers seeking **customizable, multi-method login solutions**.

---

Want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #140: We're getting a variant for targeting direct children, baby 🤩!
URL: https://tailwindweekly.com/issue-140/
Last updated: 2025-09-03T08:16:17.000Z
Hello folks!

This week's issue is brimming with exciting updates and insightful resources. We're kicking off with a game-changer for Tailwind CSS: a new variant for targeting direct children, making our styling even more precise and intuitive. Plus, we've got sneak peeks of the upcoming Catalyst launch and insights into Tailwind Labs' business model.

For the learners, we've curated articles and videos covering CSS positioning, new CSS selectors, and the aesthetics of text alignment with the "hanging-punctuation property". And don't miss the showcase of Laravel Pulse's sleek dashboard design.

Let's dive in!

## **🌟 News**

This past week has been packed with news on the Tailwind CSS front. Let's start:

- We're *finally* [getting](https://x.com/adamwathan/status/1733212038476775674?ref=tailwindweekly.ongloat.com) a variant for targeting [direct children](https://github.com/tailwindlabs/tailwindcss/pull/12551?ref=tailwindweekly.ongloat.com)! Think:

How cool is that 😍!

- The Catalyst launch seems so close 🤩; here's some more [sneak](https://x.com/steveschoger/status/1732143245696639167?ref=tailwindweekly.ongloat.com) peeks:

![](https://tailwindweekly.com/content/images/image-95.jpeg)

The Tailwind Labs team is now committed to Headless UI and Adam, the addition of "light" form control abstraction coming:

![](https://tailwindweekly.com/content/images/image-96.jpeg)

Ever wanted to know more about the Tailwind Labs business model, especially with Tailwind UI? Adam dropped a [new podcast episode](https://x.com/adamwathan/status/1731787106446372933?ref=tailwindweekly.ongloat.com) right on this!

Lastly, Adam is hiring great educators/writers to write the documentation for the upcoming products. Check out the [tweet](https://x.com/adamwathan/status/1731024791891530195?ref=tailwindweekly.ongloat.com) for more details.

## **📚 Learning**

### **[Practical Guide to CSS Positioning](https://www.youtube.com/watch?v=7CACVgIZQ1k&ref=tailwindweekly.com)**

This video offers a clear and detailed explanation of the CSS position property, covering all values, including static, relative, absolute, fixed, and sticky,. It's an excellent resource for both beginners and experienced developers looking to refine their understanding of CSS positioning, complete with practical examples to illustrate each concept.

### **[Surprising Facts About New CSS Selectors](https://cloudfour.com/thinks/surprising-facts-about-new-css-selectors/?ref=tailwindweekly.ongloat.com)**

The article delves into the nuances of CSS besting and the new & selector, exploring its similarities to the :is() selector. It provides an insightful look into functional pseudo-classes like :is(), :not(), :has(), and :where(), explaining their unique characteristics and how they interact with specificity.

### **[The "hanging-punctuation property" in CSS](https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/?ref=tailwindweekly.com)**

The article discusses how this property can enhance the aesthetics of text alignment, especially in blockquotes with curly quotes. The author provides practical examples and solutions, including a fallback used text-indent for broader browser support. He also touches on the potential risks, like triggering horizontal scroll bars if there's no space for the hanging punctuation. The article is a great read for those looking to add a refined touch to their text styling in web design.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-97.jpeg)

****[Laravel Pulse](https://pulse.laravel.com/?ref=tailwindweekly.com)**

The recently released Laravel Pulse dashboard presents a sleek and modern aesthetic that's both visually appealing and functionally smart. Its dark theme with vibrant accent colors makes the important metrics stand out and reduces eye strain, a thoughtful touch for users monitoring data for extended periods.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-98.jpeg)

****[Tailwind Fold](https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold&ref=tailwindweekly.ongloat.com)**

In this week's pick, we're highlighting the Tailwind Fold extension for Visual Studio Code. Tailwind Fold is a nifty tool that enhances code readability by neatly folding class attributes in your HTML. It's a great way to keep your code clean and organized, especially when dealing with long class lists.

## **👌 Cool Stuff**

Some of these are affiliate links so I get compensated in some way if you buy through them at no cost to you.

**[InspectFlow](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com) is a Tailwind CSS browser extension** for developers that helps you **inspect, edit, and copy components easily**. Features real-time editing, CodePen integration, and class autocomplete.

---

**[Browser-Window](https://github.com/zachleat/browser-window?ref=tailwindweekly.ongloat.com)**: A lightweight, zero-dependency web component for creating **Safari-like browser windows in demo**s. Ideal for developers looking to enhance presentations with a realistic browser interface.

---

**["How To Make Videos Like a PRO"](https://www.youtube.com/watch?v=yLiBehpMhbw&ref=tailwindweekly.com)** is a comprehensive professional video-making guide covering filming techniques, editing tips, and artistic insights. **It is one of the best videos I have watched this year and a must-watch.**

---

**[Volta.sh](https://volta.sh/?ref=tailwindweekly.ongloat.com)**: A hassle-free JavaScript tool manager offering fast, reliable, and **universal management of JS tools**. **Built in Rust**, it ensures consistent tool usage across projects, streamlining the workflow for developers.

---

Want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #139: 4 big releases coming next month 🤩!
URL: https://tailwindweekly.com/issue-139/
Last updated: 2025-09-04T06:13:51.000Z
Hello folks!

This week's issue is buzzing with anticipation for the 4 big releases coming from Tailwind Labs next month.

Get into articles that explore new CSS functions, the creative use of radial gradients and CSS trigonometric functions, and a realistic view of the software engineering job market.

Plus, check out the innovative use of the Tailwind UI changelog template by Cursor.sh and a handy Tailwind Blog Template for tech writers.

Let's dive in!

## **🌟 News**

Adam announced [this week](https://x.com/adamwathan/status/1727456129624490160?ref=tailwindweekly.ongloat.com) that we'll be getting 4 big releases this coming December. Our bet is he's referencing Heroicons v3, a new Tailwind CSS update, the long-awaited Project Catalyst React UIKit, and maybe another new thing. Can't wait for the releases 🤩!

![](https://tailwindweekly.com/content/images/image-91.jpeg)

Steve has also been hard at work creating more icons for the new Heroicons release. He mentioned they're adding a new set called ["micro"](https://x.com/steveschoger/status/1726723363643765176?ref=tailwindweekly.ongloat.com), I would say they're gonna be perfect for buttons and the like.

Last but not least, we did a special **[Black Friday/Cyber Week issue](https://tailwindweekly.ongloat.com/black-friday-cyber-week-2023/?ref=tailwindweekly.com)** earlier this week, be sure to check it out to find great deals on cool tech stuff.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-92.jpeg)

****[10 hard-to-swallow truths they won't tell you about software engineer job](https://www.mensurdurakovic.com/hard-to-swallow-truths-they-wont-tell-you-about-software-engineer-job/?ref=tailwindweekly.com)**

Mensur Durakovic's article offers a realistic view of the software engineering field. It highlights the gap between academic learning and practical job demands, the challenges of working on complex, pre-existing projects, and the underrated importance of soft skills in the industry. A great read for new and aspiring software engineers.

### **[A Couple of New CSS Functions I’d Never Heard Of](https://chriscoyier.net/2023/10/17/a-couple-of-new-css-functions-id-never-heard-of/?ref=tailwindweekly.com)**

Chris Coyier's piece explores new CSS functions like light-dark() for easier theme-based styling, xywh() for defining shapes, and round() for interval-based rounding. While still gaining browser support, these functions offer exciting new ways to approach CSS styling.

### **[Radial Gradients and CSS Trigonometric Functions](https://css-irl.info/radial-gradients-and-css-trigonometric-functions/?ref=tailwindweekly.com)**

The author delves into the creative use of radial gradients and CSS trigonometric functions to craft intricate flower shapes. The guide offers a clear explanation of how to position circles using trigonometry, enhancing the visual appeal of web elements. It's a great read for those looking to add a unique flair to their designs using advanced CSS techniques.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-93.jpeg)

****[Cursor.sh Changelog](https://cursor.com/changelog?ref=tailwindweekly.com)**

This is the first website I have found that uses the Tailwind UI changelog template to the fullest! Love how the Cursor.sh team personalized it, and I must say, I love the deep, dark theme.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-94.jpeg)

****[Tailwind Blog Template](https://github.com/timlrx/tailwind-nextjs-starter-blog?ref=tailwindweekly.com)**

Tailwind Next.js Starter Blog is a template that simplifies technical writing with its integration of Next.js and Tailwind CSS. It's designed to be easily configurable and customizable, making it a great choice for replacing traditional Jekyll, Hugo, and Eleventy blogs.

## **👌 Cool Stuff**

Some of these are affiliate links so I get compensated in some way if you buy through them at no cost to you.

**[InspectFlow](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com) is a Tailwind CSS browser extension** for developers that helps you **inspect, edit, and copy components easily**. Features real-time editing, CodePen integration, and class autocomplete.

---

Explore Ruby on Rails' evolution in **[its documentary](https://www.youtube.com/watch?v=HDKUEXBF3B4&ref=tailwindweekly.com)**. Discover insights from its creator and key developers about the framework's journey **from a bold idea to a major full-stack solution**, highlighting its challenges and triumphs.

---

**[Pravatar](https://pravatar.cc/?ref=tailwindweekly.com)** provides CC0 avatar placeholders for your development needs. Easily generate **random or consistent avatars with customizable sizes**. Ideal for developers and designers seeking quick, reliable image placeholders.

---

**[Bigjpg](https://bigjpg.com/?ref=tailwindweekly.com)** uses AI and Neural Networks **to intelligently enlarge any image and make it high-quality**. Specializing in anime and photos, it enhances details without losing quality, outperforming traditional upscaling tools.

---

Want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Black Friday/Cyber Week 2023 Deals for the Tailwind CSS Community
URL: https://tailwindweekly.com/black-fridaycyber-week-2023/
Last updated: 2025-09-04T06:28:19.000Z
Hello folks!

This week is packed with sales for Black Friday so I decided to compile a list of deals that I think could be useful to Tailwind CSS developers.

The regular newsletter will be coming this Saturday as usual.

Let's dive in!

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

As always, let's start with the [Tailwind Labs bundle](https://tailwindcss.com/plus?ref=tailwindweekly.com)!

![](https://tailwindweekly.com/content/images/image-90.jpeg)

You'll get access to

- Over [500 Tailwind CSS component examples](https://tailwindcss.com/plus/ui-blocks?ref=tailwindweekly.com) in HTML, React, and Vue
- All of our [website templates](https://tailwindcss.com/plus/templates?ref=tailwindweekly.com), built with Tailwind CSS + Next.js
- The [218-page Refactoring UI ebook](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#the-book)
- All three in-depth Refactoring UI [video tutorials](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#video-tutorials)
- All of the Refactoring UI bonus content, including [color palettes](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#color-palettes), [font recommendations](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#font-suggestions), and an exclusive [icon library](https://www.refactoringui.com/?ref=tailwindweekly.ongloat.com#custom-illustrated-icons)

[Lexington Themes](https://lexingtonthemes.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com) has a 30% off sale on all their **Tailwind CSS themes** and templates. They're all **made with Astro** and feature beautiful designs and a wide variety of templates.

The "**CSS for Javascript Developers**" course made by Josh Comeau, which I think is the best CSS course in the market right now, is having a [Black Friday sale](https://css-for-js.dev/?ref=tailwindweekly.ongloat.com) offering 50% off.

**Polypane**, a browser for developers who want to build responsive, accessible, and performant websites,[is offering 30% off their yearly plans](https://polypane.app/black-friday/?ref=tailwindweekly). I**f you build responsive websites, this is a must-have tool.**

**Tower, the excellent git client and the one I personally use** is offering [50% off any plan](https://www.git-tower.com/windows?via=vivian&ref=tailwindweekly.ongloat.com) this week.

**Beyond Code, the makers of Windy and Devtools for Tailwind CSS,** is having [a sale on all their products with up to 50% off](https://beyondco.de/?ref=tailwindweekly.com) on some of them. They're also famous for their Laravel-specific dev tools apps and all their products are super high quality!

**Laracasts,** the Netflix for Laravel developers, is having a [50% off sale on all plans% off sale on all plans](https://laracasts.com/?ref=tailwindweekly.com) including the lifetime deal!

**Inspect Flow, the complete developer tool for Tailwind CSS**, is offering 50% off and it's a one-time fee. You can check it out [here](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com).

**Caleb Porzio's ​Make VS Code Awesome** course is [50% Off for Black Friday](https://calebporzio.gumroad.com/l/SFYKpD/BFRI21?a=623146483&ref=tailwindweekly.ongloat.com)! This is an excellent course on how to customize and improve your VS Code experience.

Caleb Porzio is also offering 50% off on his [Alpine Components product](https://alpinejs.dev/components?ref=tailwindweekly.ongloat.com). They're basically **headless components made with Alpine.js and Tailwind CSS** and it also has examples for integrations with various other libraries.

Tailscan, the **ultimate tool for Tailwind CSS** that lets you build, design, and **debug any Tailwind website** visually right within your browser, is [offering a $50 discount on the lifetime license](https://tailscan.com/?ref=tailwindweekly.ongloat.com) until Cyber Monday!

[Screencasting.com](https://screencasting.com/?ref=tailwindweekly.ongloat.com), a course that educates developers and aspiring teachers to **create high-quality screencasts faster** than ever is offering $100 off for this week only.

Shruti Balasa, the author of **[Complete Guide to CSS Flex and Grid](https://shrutibalasa.gumroad.com/l/css-flex-and-grid?ref=tailwindweekly.ongloat.com)** and **[Level up with Tailwind CSS](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**, is offering 50% off on both books using the code “BLACKFRIDAY23” valid until Cyber Monday.

"**[Don't Say That at Work](https://walkingriver.gumroad.com/l/dont-say-that?a=623146483&ref=tailwindweekly.ongloat.com)**" a book about **essential communications skills** for software professionals is on sale at 50% off.

"**[A Practical Guide to Writing a Software Technical Design Document](https://gracehuang.gumroad.com/l/mqmUt?a=623146483&ref=tailwindweekly.ongloat.com)**" is offering 50% off. This tiny book will guide you through the **writing process of a Technical Design Doc**. It also comes with a real-life example of a Technical Design Document.

The **[Small Bets Community](https://dvassallo.gumroad.com/l/small-bets/BLACK%5FFRIDAY%5F2023?a=623146483&ref=tailwindweekly.ongloat.com)**, an online community for **solopreneurs**, is offering 50% off its lifetime membership.

These were the deals that stood out to me the most, if you want to check out more then I highly recommend [this list](https://github.com/trungdq88/Awesome-Black-Friday-Cyber-Monday?ref=tailwindweekly.ongloat.com) and [this one](https://creatorblackfriday.com/?ref=tailwindweekly.ongloat.com) too.
### Tailwind Weekly #138: new icons, delayed Catalyst launch & more ⭐!
URL: https://tailwindweekly.com/issue-138/
Last updated: 2025-09-04T06:39:14.000Z
Hello folks!

In this week's issue, we're keeping things low-key but insightful. While the much-anticipated Catalyst launch is on hold, we're not short on updates!

Dive into the latest on Heroicons' new additions, and explore our handpicked articles: from best practices in Tailwind CSS to leveraging the OKLCH color model for dynamic themes. Plus, get the scoop on Chrome 119's CSS relative color syntax.

We've also got a sleek showcase and a nifty TailwindMate tool to enhance your workflow.

Let's dive in!

## **🌟 News**

It's been a quiet week on the news front. We were preparing for the Catalyst launch but Adam [said](https://x.com/adamwathan/status/1721584037939081572?ref=tailwindweekly.ongloat.com) that it won't be coming this week in the end. 🤞🏻 it'll be launching this year.

![](https://tailwindweekly.com/content/images/image-86.jpeg)

**Lovely new icons!*

Besides that, Steve [shared](https://x.com/steveschoger/status/1722293569493348464?ref=tailwindweekly.ongloat.com) a few new icons for Heroicons. I must say the library has matured nicely over the years and it's always so much fun to use it.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-87.jpg)

****[5 best practices for preventing chaos in Tailwind CSS](https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css?ref=tailwindweekly.com)**

Get some friendly advice on keeping your Tailwind projects neat and tidy. This easy-to-follow guide will walk you through the essentials of using design systems, component-based structures, and smart utility class strategies to make your Tailwind experience smooth and enjoyable.

### **[Better dynamic themes in Tailwind with OKLCH color magic](https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic?ref=tailwindweekly.com)**

Dive into the colorful world of Tailwind CSS with this engaging article! It guides you through the exciting process of creating dynamic themes using the OKLCH color model. Perfect for those looking to spice up their Tailwind projects with real-time, visually consistent color changes.

### **[CSS relative color syntax](https://developer.chrome.com/blog/css-relative-color-syntax/?ref=tailwindweekly.com)**

Chrome 119 introduces CSS Color Level 5's relative color syntax, making color manipulation in CSS more straightforward. This feature allows for easy adjustments in color properties like lightness, saturation, and opacity. The article offers a detailed guide on using this syntax, showcasing its practical applications in enhancing CSS color styling.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-88.jpeg)

****[Darkmatter](https://getdarkmatter.dev/?ref=tailwindweekly.com)**

This week's showcase has a sleek, dark theme that pairs nicely with bright text for comfortable reading. Its straightforward layout and tidy structure contribute to a seamless navigation experience, and the rounded design elements add a subtle charm. This design definitely balances professionalism with a touch of warmth, making it appealing for developers who value clarity and a user-friendly interface.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-89.jpeg)

****[Tailwindmate](https://tailwindmate.jaleelbennett.com/?ref=tailwindweekly.com)**

TailwindMate is a handy tool for Tailwind CSS developers looking to streamline their workflow. This tool simplifies the process of converting standard color codes into their Tailwind equivalents. Whether you're dealing with HEX, RGB, or HSL color values, it translates them into the closest matching Tailwind color classes, saving you time and enhancing your development process.

## **👌 Cool Stuff**

Some of these are affiliate links so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

Discover [Tinkerwell](https://tinkerwell.app/?ref=tailwindweekly.ongloat.com): the must-have tool for Laravel developers. It allows quick iterations and debugging within your application's context. Perfect for quick debugging and prototyping. A time-saver for every Laravel project.

---

[Keystatic](https://keystatic.com/?ref=tailwindweekly.com): Streamline your codebase with a CMS that simplifies editing Markdown, JSON, and YAML. Integrates with GitHub/local systems, offering a seamless TypeScript API experience without a database.

---

Enhance your VSCode with top [Product Icon themes](https://www.youtube.com/watch?v=aLCzInfPqo8&ref=tailwindweekly.com). Hand-picked for aesthetics and productivity, these themes can transform your coding environment.

---

Want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #137: Upcoming v3.4 release & Project Catalyst still in development 👀
URL: https://tailwindweekly.com/issue-137/
Last updated: 2025-09-04T06:55:09.000Z
Hello folks!

This week's issue is brimming with insights and updates. The Tailwind v3.4 release is supposedly coming soon, which promises a full spacing scale for more properties. Plus, level up with a free mini-course on advanced Tailwind techniques by none other than [Simon](https://x.com/simonswiss/status/1719506071814074471?ref=tailwindweekly.ongloat.com).

Then, don't miss out on a deep dive into web accessibility challenges and solutions, alongside a breakdown of CSS margin collapsing rules that'll save you from layout headaches and a short but sweet piece on how to style element descendants using arbitrary variants.

Let's dive in!

## **🌟 News**

The work on Project Catalyst continues! Adam just shared a very nice [dropdown design](https://x.com/adamwathan/status/1720135656578441436?ref=tailwindweekly.ongloat.com) he's working on and Steve shared a [couple](https://x.com/steveschoger/status/1717985627352748143?ref=tailwindweekly.ongloat.com) of sneak [peeks](https://x.com/steveschoger/status/1719795256189706264?ref=tailwindweekly.ongloat.com) on Twitter this week. We also have more [icons](https://x.com/steveschoger/status/1717903753343295910?ref=tailwindweekly.ongloat.com) coming!

![](https://tailwindweekly.com/content/images/image-83.jpeg)

Also, it seems Tailwind v3.4 is right around the corner and we'll be getting a much-requested feature: the [full spacing scale](https://x.com/adamwathan/status/1718637506411807212?ref=tailwindweekly.ongloat.com) will now included for min-width, max-width, and min-height utilities 👏🏻.

On the community side, Simon [shared](https://www.protailwind.com/tutorials/animated-background-stripes?ref=tailwindweekly.ongloat.com) an awesome and very comprehensive mini-course for Tailwind CSS. You'll learn the ins and outs of CSS variables, keyframes, and the Tailwind Plugin API to craft a seamless, infinitely looping stripe pattern. Best of all the [course](https://www.protailwind.com/tutorials/animated-background-stripes?ref=tailwindweekly.ongloat.com) is free!

> Want to do a deep dive into Tailwind CSS plugins, CSS variables, and animated gradients?

> I have a free course for you! [pic.twitter.com/KirXz0JtHi](https://x.com/simonswiss/status/1719506071814074471?ref=tailwindweekly.com)— Simon Vrachliotis 🇨🇭🇦🇺🏀🏄‍♂️🏂💻 (@simonswiss) [November 1, 2023](https://x.com/simonswiss/status/1719506071814074471?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

## **📚 Learning**

### **[Accessibility Is Easy: Except for When It Isn’t](https://www.youtube.com/watch?v=bEqRp9GMC0g&ref=tailwindweekly.com)**

Dive into the nuanced world of web accessibility with Ian Lloyd's talk where he shares insights from the frontlines of auditing, tackling complex UI challenges beyond basic HTML solutions. He discusses how to overcome accessibility barriers, meet WCAG criteria, and apply creative thinking to make even the most intricate interfaces user-friendly. Perfect for developers looking to deepen their understanding of accessible design.

### **[The 6 Must-Know Rules of Margin Collapsing in CSS](https://medium.com/@RitikaAgrawal08/the-6-must-know-rules-of-margin-collapsing-in-css-56968836827d?ref=tailwindweekly.com)**

This article breaks down the six fundamental rules of margin collapsing in a way that's easy to grasp, ensuring you can apply these principles to avoid unexpected layout issues.

### **[How to style element descendants with Tailwind CSS](https://www.stefanjudis.com/today-i-learned/how-to-style-element-descendants-with-tailwind-css/?ref=tailwindweekly.com)**

Stefan Judis walks you through the challenge of rotating an SVG icon based on a parent element's state, exploring options like using vanilla CSS, leveraging the group selector, and employing arbitrary variants.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-84.jpeg)

****[Felix Vemmer](https://www.felixvemmer.com/en?ref=tailwindweekly.com)**

Felix's personal website instantly catches the eye with its clean and minimalistic design. The balanced use of whitespace accentuates the well-organized sections, while the soft color palette creates an elegant and inviting feel.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-85.jpg)

****[Tailwind Elements](https://tw-elements.com/?ref=tailwindweekly.com)**

TW Elements is a treasure trove of over 500 free, open-source UI components and templates. It's user-friendly, offers extensive customization options, and is compatible with the most popular frameworks and tools, making it a versatile choice for your next project.

## **👌 Cool Stuff**

Some of these are affiliate links so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** by Shruti dives into real-world Tailwind examples and **offers tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

[Plain](https://www.plain.com/?ref=tailwindweekly.com) is **a support platform tailored for developers**. It's swift, integrates with Linear and Slack, and boasts a robust API. Perfect for modern support needs, it simplifies bug fixes and customer interactions.

---

[Durves](https://www.durves.com/?ref=tailwindweekly.com) is a sleek tool perfect for graphic designers and UI/UX pros looking to add a **unique flair to their projects with custom dot patterns**. Exportable in .PNG and .SVG, it's a breeze to integrate into your design workflow for that extra touch of creativity and precision.

---

[ImprovMX](https://improvmx.com/?ref=tailwindweekly.com) offers a slick way to **create free email aliases for your domain**. Quick setup, zero cost, and reliable support make managing your domain's email forwarding a breeze. Ideal for developers who value efficiency and simplicity.

---

Want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #136: Adam's Rails World talk is out + Catalyst launch is getting closer 👀
URL: https://tailwindweekly.com/issue-136/
Last updated: 2025-09-04T07:04:33.000Z
Hello folks!

This week's issue is packed with some exciting updates 🌟. We've got news on Adam's Rails world talk 🎤 and the upcoming Catalyst launch by the Tailwind Labs team 🚀. We also feature some must-read guides on console log styling 💅 and integrating Tailwind with Laravel 🛠️.

On our showcase, we highlight a killer landing page 🌈 and a game-changing resource for transitioning from styled-components to Tailwind 🔄.

Let's dive in!

## **🌟 News**

Adam's Rails World talk is out! I haven't watched it but next week I'll give you a summary 🙂.

Also, the Tailwind Labs team is hard at work on the Catalyst docs to meet the [first week of November](https://x.com/adamwathan/status/1713223770528243735?ref=tailwindweekly.ongloat.com) deadline.

![](https://tailwindweekly.com/content/images/image-80.jpeg)

**Even the docs look good!*

## **📚 Learning**

### **[Start Styling Your console.log() Messages in DevTools](https://www.youtube.com/watch?v=sXT5DkeZnrA&ref=tailwindweekly.com)**

Learn how to make your console.log messages pop with some simple CSS tricks. It's a quick and easy way to keep your console organized and your messages easily distinguishable.

### **[Add Tailwind CSS to any Laravel project](https://benjamincrozat.com/tailwind-css-laravel?ref=tailwindweekly.com)**

Adding Tailwind CSS to your Laravel project just got much easier, thanks to Benjamin Crozat's step-by-step guide. Whether you're starting a new Laravel project or integrating Tailwind into an existing one, this article has got you covered from npm installs to Blade directives.

### **[The Path To Awesome CSS Easing With The linear() Function](https://www.smashingmagazine.com/2023/09/path-css-easing-linear-function/?ref=tailwindweekly.com)**

Ready to up your animation game? This guide dives into the new CSS linear() easing function. It's a game-changer for creating natural-feeling animations and even comes with handy tools to get you started. Your UI is about to get a whole lot smoother.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-81.jpeg)

****[Dolpin](https://dolpin.io/?ref=tailwindweekly.com)**

This week's showcase is quite the technical product but its landing page is marvelous! It features a harmonious blend of pastel colors and playful illustrations and the clean layout, paired with beautiful typography, makes the information easier to read and more appealing.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-82.jpeg)

****[styled2tailwind](https://github.com/Blazity/styled2tailwind?ref=tailwindweekly.com)**

This is a great tool that helps you transition from styled-components to Tailwind CSS with ease. It's perfect for Next.js projects and aims to make your dev life easier by leveraging Tailwind's performance benefits. Whether you're a Tailwind veteran or just getting started, this could be a game-changer for you.

## **👌 Cool Stuff**

Some of these are affiliate links so I get compensated in some way if you buy through them at no cost to you.

Check out Shruti's new book, **["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**! Dive into real-world Tailwind examples and **discover tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

Introducing the [Scroll-Driven Animations Debugger](https://www.bram.us/2023/09/12/scroll-driven-animations-debugger/?ref=tailwindweekly.ongloat.com), a Chrome DevTools extension that makes debugging scroll animations a breeze! Get real-time visualizations and easily tweak animation ranges right within your DevTools.

---

Dive into open-source effortlessly with [First Issue](https://www.firstissue.dev/?ref=tailwindweekly.com)! It handpicks beginner-friendly issues from popular projects, making your next contribution a breeze.

---

Boost your MacBook Pro's brightness like never before with [Vivid](https://goodsnooze.gumroad.com/l/vivid?ref=tailwindweekly.com)! It's a one-time purchase for a lifetime of eye-popping clarity, and you even get a free iOS browser version with your order.

---

Want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #135: Learn all about responsive typography, scoped CSS limitations, and the beginnings of Tailwind 🧐
URL: https://tailwindweekly.com/issue-135/
Last updated: 2025-09-04T07:14:30.000Z
Hello folks!

This week, Adam shared on Twitter the first ever [Tailwind CSS commit](https://x.com/adamwathan/status/1712547594491277592?ref=tailwindweekly.ongloat.com) from 2017; who would have thought it would become such a game-changer for the CSS community ❤️.

No major news to report, but Adam did share a nice [visual tutorial](https://x.com/adamwathan/status/1710978528684957697?ref=tailwindweekly.ongloat.com) for working with concentric border radii in Tailwind CSS.

Also, I'm experimenting with the newsletter again and decided to scrap the promoted links section and replace it with cool links I find around the web that will be interesting for front-end developers. Every week, you'll see 3 cool links!

Let's dive in!

## **📚 Learning**

### **[Improving Tailwind by doing these 3 things](https://www.youtube.com/watch?v=hPm%5FHdpo0lc&ref=tailwindweekly.com)**

In this video, Andrew dives into Tailwind CSS, discussing its pros and cons, and offers some best practices to make your life easier. Whether you're a Tailwind skeptic or a fan, this video is worth a watch to get some fresh perspectives and

### **[Responsive type scales with composable CSS utilities](https://tobiasahlin.com/blog/responsive-fluid-css-type-scales/?ref=tailwindweekly.com)**

The piece dives into how you can use calc, clamp, and CSS variables to make your text adapt seamlessly to different viewport or container sizes—no JavaScript needed! If you've been wrestling with responsive typography, this one's a game-changer.

### **[Limitations of Scoped CSS](https://zellwk.com/blog/limitations-of-scoped-css/?ref=tailwindweekly.com)**

In this article, Zell dives into how scoped CSS is great for isolating styles but falls short when you try to style child components or slot content. If you've ever been frustrated with scoped CSS not behaving the way you expected, this article is a must-read to understand its limitations and workarounds.

Last but not least, full :has() support is almost here, folks 🤘🏻

> Firefox 119 will ship with CSS :has() 🥲 👌

> And Firefox 119 is now in beta!

> In a month, all browsers will support CSS :has() 🎉 [pic.twitter.com/jUDTeRbR7v](https://x.com/sebastienlorber/status/1706976759269224724?ref=tailwindweekly.com)— Seb ⚛️ ThisWeekInReact.com (@sebastienlorber) [September 27, 2023](https://x.com/sebastienlorber/status/1706976759269224724?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-78.jpeg)

****[ShipFast AI](https://www.shipfast.ai/?ref=tailwindweekly.com)**

ShipFast Ai is an MVP-building service with a very sleek landing page. Their use of vibrant gradients, clean typography, and well-organized sections make for an uber-pleasing aesthetic.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-79.jpeg)

****[Supertweak](https://supertweak.dev/?ref=tailwindweekly.com)**

SuperTweak is a Chrome extension that makes your life easier with Tailwind CSS. It lets you inspect, tweak, and copy Tailwind styles directly in your browser, without jumping back and forth between your code editor and dev tools. Plus, it's got some cool features like custom config support, one-click copy, and even a screenshot capture for quick feedback.

## **👌 Cool Stuff**

Some of these are affiliate links, so I get compensated in some way if you buy through them at no cost to you.

**["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com) is the book I wish I had when I started learning Tailwind.** It goes beyond the basics with hands-on examples and advanced techniques thateven seasoned users will find useful. If you're serious about improving your Tailwind CSS skills**,** this book is for you 🚀.

---

Elevate your coding experience with "[10 Fantastic VS Code Icon Themes](https://www.youtube.com/watch?v=%5FROI6t7cHQE&ref=tailwindweekly.com)" by CSS Weekly! Discover eye-catching icon sets that beautify your sidebar and boost your productivity. 🌟

---

Discover the untold story of TypeScript in "[TypeScript Origins: The Documentary.](https://www.youtube.com/watch?v=U6s2pdxebSo&ref=tailwindweekly.com)" Hear from the creators and community members who shaped it, and get insights from industry giants like JetBrains and Visual Studio Code. 📜

---

Meet [ColourGPT](https://colourgpt.app/?ref=tailwindweekly.ongloat.com), your go-to app for crafting stunning color palettes effortlessly with AI. Just chat to describe your vision, and let the magic happen. 🎨

---

Want to share something with the Tailwind CSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #134: the State of HTML 2023 is here 🚀!
URL: https://tailwindweekly.com/issue-134/
Last updated: 2025-09-05T04:37:17.000Z
Hello folks!

This week's issue is a goldmine 🍬. We're spotlighting the "State of HTML 2023" survey that could shape the future of HTML, a deep dive into CSS lingo, and a guide on optimizing image loading. Plus, we've got a roundup of top Tailwind plugins, a mini video game landing page, and a time-saving open-source UI library.

Let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-75.jpeg)

This picture is from this week's Tailwind CSS meetup in Amsterdam, where Adam practiced his talk for the Rails World conference to a Tailwind-loving audience ❤️.

On another note, the **["State of HTML 2023" survey](https://survey.devographics.com/en-US/survey/state-of-html/2023?ref=tailwindweekly.ongloat.com)** is here and is a **big deal**. Led by [Lea Verou](https://x.com/LeaVerou?ref=tailwindweekly.ongloat.com), this survey aims to complete the trilogy alongside State of JS and State of CSS, giving us a complete picture of the web dev landscape. It covers everything from new HTML elements like <selectlist> to cool features like popovers and related browser APIs.

Why should you fill it out? Your input directly influences browser and standards groups, helping prioritize features and fix browser incompatibilities. Plus, you get to learn about new and upcoming features, and even get a personalized knowledge score to see how you stack up. So, don't miss out; your voice matters in shaping the future of the web!

## **📚 Learning**

### **[CSS Terminology Demystified](https://www.youtube.com/watch?v=HKfclpLSjME&ref=tailwindweekly.com)**

Another great video from CSS Weekly! This one dives deep into the nitty-gritty of CSS terms like rulesets, declarations, and properties. It's a must-watch if you want to speak the CSS lingo fluently and ace that next job interview.

### **[The Ultimate Low-Quality Image Placeholder Technique](https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/?ref=tailwindweekly.com)**

This guide dives deep into optimizing image loading with Low-Quality Image Placeholders (LQIP) and Largest Contentful Paint (LCP). The article breaks down how to make LQIP and LCP play nice together, ensuring a smooth user experience without sacrificing performance metrics. It's packed with tips, from avoiding upscaling your LQIP to calculating the perfect image size so that you can have the best of both worlds: fast load times and high-quality images.

### **[The 7 best plugins to use in your Tailwind project](https://blog.logrocket.com/7-best-tailwind-plugins/?ref=tailwindweekly.com)**

This piece lists the top 7 plugins to level up your Tailwind game. It covers everything from smart container queries using tailwindcss-container-queries for smarter responsiveness, Nightwind for easy dark modes, and even Typography for beautifying long text blocks. Definitely a great read!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-76.jpeg)

****[Readme Micro](https://micro.readme.com/?ref=tailwindweekly.com)**

This is a promotional landing page for Readme but it's also a mini video game inside your browser! You use the arrows to move the little bird and can even make it jump. I love the pixel art and the pixel font, definitely an original landing page for a dev-focused product.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-77.jpg)

****[Uiverse](https://uiverse.io/?ref=tailwindweekly.com)**

UIverse is a goldmine of open-source UI elements crafted in CSS and Tailwind. Whether you're a newbie or a seasoned dev, this library is a great time-saver, offering a wide range of elements for personal and commercial projects. Definitely check it out for your next project!

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Check out Shruti's new book, **["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**! Dive into real-world Tailwind examples and **discover tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

Dive into the world of web security with "**[The Beginner's Guide To Web Security](https://gokulkrishh.gumroad.com/l/web-security?a=623146483&ref=tailwindweekly.ongloat.com)**", a **comprehensive 100+ page book** by Gokul, a Google Developer Expert based in Bangalore. This guide covers everything from the basics of how the web works, HTTP, HTTPS, TCP/IP, SSL certificates, **to various web security vulnerabilities and how to counter them**. It's a must-read for both junior and senior web developers, offering a wealth of information in a concise format.

---

**[Mailbites](https://www.mailbites.io/?aff=lVeE1&ref=tailwindweekly.ongloat.com) is your friendly tool for crafting email templates with ease!** Dive into a world of ready-to-use components and layouts, all designed with [MJML](https://mjml.io/?ref=tailwindweekly.ongloat.com). Whether you're customizing your own or using our complete templates, building emails has never been faster. Give it a try for free!

---

Discover **[LaunchStack](https://launchstack.app/?aff=lVeE1&ref=tailwindweekly.ongloat.com), your go-to platform to kickstart your SaaS application** in just 5 minutes! Packed with essential features like user management, team collaboration, and a pre-built billing system, **it's built on the trusted foundations of Laravel, TailwindCSS, and Vue 3**. Say goodbye to repetitive tasks and hello to a smoother, faster SaaS development experience!

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[Frontend Focus](https://frontendfoc.us/?ref=tailwindweekly.com)**: A once–weekly roundup of the best front-end news, articles, and tutorials.

---

**[CSS Weekly](https://css-weekly.com/?ref=tailwindweekly.com)**: Weekly e-mail roundup of CSS articles, tutorials, experiments, and tools curated by Zoran Jambor

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #133: Amsterdam meetup next week and more Catalyst sneak peeks!
URL: https://tailwindweekly.com/issue-133/
Last updated: 2025-09-05T04:50:20.000Z
Hello folks!

This week's Tailwind Weekly is packed! Not only is there an upcoming Tailwind Labs meetup in Amsterdam 🇳🇱, but we've also got some fresh Catalyst sneak peeks 👀.

On the learning side, you'll find cool articles on creative uses of CSS shadows and the math behind nesting rounded corners 📏. And if you're looking for resources, there's a cool toolkit called Lunar UI that'll make your landing pages look amazing 🎨.

Let's dive in!

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-70.jpeg)

Remember we mentioned a possible meeting soon? Well, now it's [official](https://x.com/adamwathan/status/1707412852867297404?ref=tailwindweekly.ongloat.com)! Join the Tailwind Labs team in Amsterdam next week. According to [Peter](https://x.com/petersuhm/status/1707772684946280727?ref=tailwindweekly.ongloat.com) the attendee's list just reached 100 so it'll be a packed event. Can't wait for the recordings!

Here's the agenda so far:

![](https://tailwindweekly.com/content/images/image-71.jpeg)

On another note, the Tailwind team has been busy working on Catalyst, here's Adam's latest sneak peek:

> Every single component is full of unexpected paralyzing decisions but it's coming together...

> Can't wait to get this kit out the door 🥳 [pic.twitter.com/2KeL2YfMY3](https://x.com/adamwathan/status/1705371548511609279?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [September 23, 2023](https://x.com/adamwathan/status/1705371548511609279?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

And in case you missed it, a few months ago the Tailwind team had their first-ever meetup which included a short session with Sam Selikoff showing off some nifty Tailwind CSS features.

The original video was 1h long so I know many didn't watch it but Sam was kind enough to create [a highlights video](https://www.youtube.com/watch?v=5hF0IVQIBN8&ref=tailwindweekly.com) of the tips he shared and it looks great!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-72.jpg)

****[A Few Interesting Ways To Use CSS Shadows For More Than Depth](https://www.smashingmagazine.com/2023/08/interesting-ways-use-css-shadows/?ref=tailwindweekly.com)**

This piece explores creative ways to use CSS shadows like using them to create hover effects, text styles, and even shadows casting other shadows! Definitely a great read if you're looking to spice up your designs with some shadow magic.

### **[The Math Behind Nesting Rounded Corners](https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/?ref=tailwindweekly.com)**

Ever struggled with awkward gaps when nesting rounded corners in your UI? This article dives into the math behind it. The author explains how to calculate the perfect border radius for nested elements, so everything looks smooth and polished. If you're a fan of rounded corners, this one's a must-read!

### **[CSS Halftone Patterns](https://css-irl.info/css-halftone-patterns/?ref=tailwindweekly.com)**

This guide breaks down how to use radial gradients, masks, and contrast filters to create dynamic, retro-style patterns. If you're looking to add a unique visual flair to your projects, this is a must-read.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-73.jpg)

****[Screen Casting Course](https://screencasting.com/?ref=tailwindweekly.com)**

This week's showcase has been going on a lot on Twitter these past few weeks and I was delightfully surprised when I found it was done with Tailwind! The design is very modern, with beautiful typography and lovely gradient patterns, it honestly doesn't look like your typical course website, it's even better!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-74.jpeg)

****[Lunar UI](https://lunarui.dev/?ref=tailwindweekly.com)**

Lunar UI is a super cool toolkit for creating stunning landing pages. It offers customizable copy-and-paste components, making it a breeze to design something aesthetically pleasing. If you want to give your landing pages a fresh look, Lunar UI might be just what you need.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Check out Shruti's new book, **["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**! Dive into real-world Tailwind examples and **discover tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

Dive into **[Setapp](https://setapp.com/?irgwc=1&clickid=0XUQcmzqqxyKT0c2qm2gazpNUkpwx8zoZ2nEzM0&iradid=343321&irpid=2662107&sharedid=&mpaid=3&campaign=impactradius&type=home&ref=tailwindweekly.com), your one-stop subscription for 240+ Mac apps**. Whether you're coding, planning projects, or just keeping your Mac tidy, Setapp's got your back. For just $9.99 a month, **discover tools that simplify your workflow and boost your productivity**. Give it a try for 7 days, free!

---

**Caleb Porzio's ​[Make VS Code Awesome](https://calebporzio.gumroad.com/l/SFYKpD/?a=623146483&ref=tailwindweekly.ongloat.com)** course is an excellent course on customizing and improving your VS Code experience. I bought it recently and it completely changed how I set up and use VS Code, for the better!

---

Meet **[Origin](https://archiethedev.gumroad.com/l/origin-theme?a=623146483&ref=tailwindweekly.ongloat.com), a sleek personal blog theme for Ghost**, crafted with TailwindCSS. It's all about simplicity and a superior writing experience. With features like customizable color schemes, rich media embedding, and a newsletter subscription box, Origin is your perfect platform for sharing thoughts.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[Frontend Focus](https://frontendfoc.us/?ref=tailwindweekly.com)**: A once–weekly roundup of the best front-end news, articles, and tutorials.

---

**[CSS Weekly](https://css-weekly.com/?ref=tailwindweekly.com)**: Weekly e-mail roundup of CSS articles, tutorials, experiments, and tools curated by Zoran Jambor

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #132: Zed support & upcoming meetup in Amsterdam 🍻!
URL: https://tailwindweekly.com/issue-132/
Last updated: 2025-09-05T08:34:07.000Z
Hello folks!

This week I have some exciting updates for you. Dive into the news about Zed's new support for Tailwind CSS autocomplete, get the scoop on an upcoming Tailwind CSS meetup in Amsterdam, and explore some insightful articles on JavaScript, CSS, and web accessibility.

Let's dive in!

## **🌟 News**

We got some cool tidbits to share with you this week!

![](https://tailwindweekly.com/content/images/image-66.jpeg)

****Zed's now supports Tailwind CSS**

Remember [Zed](https://zed.dev/?ref=tailwindweekly.ongloat.com)? The high-performance, multiplayer code editor? Well, they've just rolled out a new version and it now supports basic Tailwind CSS autocomplete. If you love Tailwind, this might be a game-changer feature for you. Check out the [tweet](https://x.com/zeddotdev/status/1702033091684937890?ref=tailwindweekly.ongloat.com) for a sneak peek.

### **Tailwind CSS Meetup in Amsterdam? 🌷**

[Adam](https://x.com/adamwathan/status/1705197391542894635?ref=tailwindweekly.ongloat.com) is heading to Amsterdam and is looking to host a Tailwind CSS meetup on October 4th. He wants to do a practice run of his Rails World talk and, of course, meet some awesome folks from the community. If you're in the area and can help out or just want to join in for some good conversation (and maybe a beer or two 🍻), give him a shout!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-67.jpg)

****[Understanding the JavaScript Modulo Operator](https://www.joshwcomeau.com/javascript/modulo-operator/?ref=tailwindweekly.com)**

This post by Josh is all about making sense of a tricky JavaScript thing called the modulo operator. Josh illustrates its practical application in web development, particularly in managing circular arrays, such as cycling through a list of colors. Overall a great read!

### **[How to make charts and graphs more accessible](https://blog.pope.tech/2023/08/31/how-to-make-charts-and-graphs-more-accessible/?ref=tailwindweekly.com)**

Ever wondered how to make cool charts and graphs easy for everyone to understand? This piece shares some neat tips, like using helpful descriptions for pictures and making sure colorful charts are easy to see and interact with. Great read if you're building charts on your next project.

### **[CSS lobotomized owl selector: A modern guide](https://blog.logrocket.com/css-lobotomized-owl-selector-modern-guide/?ref=tailwindweekly.com)**

This article talks about a special trick in CSS called the "Lobotomized Owl Selector." Its most common use case is to help with spacing on websites. The article looks at how it started, why it's useful, and how it fits with today's web tools.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-68.jpg)

****[Vrite](https://vrite.io/?ref=tailwindweekly.com)**

Another developer tool for you, this time about content! Vrite's landing page features very contrasting colors, a simple layout, and a beautiful dark mode. Also love that the screenshots' colors change when you switch from light to dark mode. Pretty nifty!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-69.jpg)

****[Control](https://control.rocks/?ref=tailwindweekly.com)**

Control is a set of customizable illustrations. They've crafted a fantastic library of 108 illustrations perfect for web projects. Whether you're looking to create a unique scene or just want some fresh visuals, their constructor tool has got you covered.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Check out Shruti's new book, **["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**! Dive into real-world Tailwind examples and **discover tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

Dive into **[Setapp](https://setapp.com/?ref=tailwindweekly.com), your one-stop subscription for 240+ Mac apps**. Whether you're coding, planning projects, or just keeping your Mac tidy, Setapp's got your back. For just $9.99 a month, **discover tools that simplify your workflow and boost your productivity**. Give it a try for 7 days, free!

---

Meet **[Vivid](https://goodsnooze.gumroad.com/l/vivid?a=623146483&ref=tailwindweekly.ongloat.com)—a game-changer for your MacBook Pro**! This nifty app **doubles your screen brightness across all apps**, not just videos. No more squinting when you're coding outdoors or in bright environments. It's a one-time purchase with **no subscription**, and guess what? You also get a free iOS version. Give it a try and see the difference it makes!

---

Introducing **[DisplayBuddy](https://sids.gumroad.com/l/displaybuddy?a=623146483&ref=tailwindweekly.ongloat.com)**, your new best friend for **managing external displays directly from your Mac's menu bar**. Adjust brightness, contrast, and even volume with ease. Working with multiple displays? **Sync controls** across them effortlessly. Plus, save your preferred settings and switch between them with a click.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.com)**: the best TypeScript links every week, right in your inbox.

---

**[CSS Weekly](https://css-weekly.com/?ref=tailwindweekly.com)**: Weekly e-mail roundup of CSS articles, tutorials, experiments, and tools curated by Zoran Jambor

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #131: create Tailwind CSS code with AI 🤯
URL: https://tailwindweekly.com/issue-131/
Last updated: 2025-09-05T08:50:48.000Z
Hello folks!

No official news this week folks but we got a pretty big community announcement: Vercel's new tool v0 lets you craft React UI components with Tailwind CSS, all powered by AI 🤖! Check the news section for more info.

Now onto our usual content 😉.

## **🌟 News**

> Introducing v0 by [@vercel](https://x.com/vercel?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) \- v0 generates custom components on the fly that you can copy and paste into your existing codebase.

> Need a component? Just Ask - [https://t.co/QrW2UyK7rQ ](https://v0.app/?ref=tailwindweekly.com)[@jaredpalmer](https://x.com/jaredpalmer?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) [@shuding\_](https://x.com/shuding%5F?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) [@max\_leiter](https://x.com/max%5Fleiter?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) [@mrncst](https://x.com/mrncst?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) [@rauchg](https://x.com/rauchg?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) [@cramforce](https://x.com/cramforce?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) [@almonk](https://x.com/almonk?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) and the team at Vercel [pic.twitter.com/192k6Lm72R](https://x.com/shadcn/status/1702390674216329469?ref=tailwindweekly.com)— shadcn (@shadcn) [September 14, 2023](https://x.com/shadcn/status/1702390674216329469?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

Vercel recently introduced a new tool called v0 that allows you to generate custom React UI components by using Tailwind CSS and [shadcn UI](https://ui.shadcn.com/?ref=tailwindweekly.ongloat.com). The demo is just mind-blowing 🤯. You just give it a prompt and the trained AI goes to work!

Of course, it won't be replacing devs anytime soon but this can definitely help increase development speed by using it as a base or even for inspiration 🧑🏻‍🎨.

The future of Tailwind CSS sure looks bright 🤩.

## **📚 Learning**

### **[CSS "display" is a multi-keyword property?!?](https://www.youtube.com/watch?v=AvI2UNZmk-Q&ref=tailwindweekly.com)**

Did you know that the display property has evolved into a multi-keyword property? The video provides a clear breakdown of how this works, the significance of the Block Formatting Context (BFC), and introduces the newer "Flow" and "Flow-Root" display values.

### **[All about accessible headings](https://luhr.co/blog/2023/09/12/all-about-accessible-headings/?ref=tailwindweekly.com)**

This short piece emphasizes the importance of using headings correctly, not just for visual styling but for true content hierarchy, and offers insights on best practices like having a single unique <h1> per page, etc.

### **[Four new CSS features for smooth entry and exit animations](https://developer.chrome.com/blog/entry-exit-animations/?ref=tailwindweekly.com)**

Chrome recently introduced 4 new CSS features that allow for improved entry and exit animations, especially for elements like dialogs and popovers. These features include animating display and content-visibility on keyframes, a new transitionbehavior property, the startingstyle rule for entry animations, and the overlay property for top-layer behavior during animations. Read the article for more info!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-64.jpeg)

****[The Verve](https://www.theverge.com/?ref=tailwindweekly.com)**

The Verge recently redesigned their site and decided to use Tailwind CSS for their styling and let me tell you, it looks awesome! It's so different from your usual Tailwind site since they use their own unique color palette and custom fonts. It serves to show that you can make *any* kind of site with Tailwind.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-65.jpeg)

****[Tailwind Animations Examples](https://github.com/canopas/tailwind-animations-examples?ref=tailwindweekly.com)**

This week, I stumbled upon a fantastic resource: a GitHub repository that showcases various animations implemented using Tailwind CSS. The best part? It's not just a component library, you can directly copy and paste the animation code and use it right away.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Check out Shruti's new book, **["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**! Dive into real-world Tailwind examples and **discover tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

**[Mailbites](https://www.mailbites.io/?aff=lVeE1&ref=tailwindweekly.ongloat.com) is your friendly tool for crafting email templates with ease!** Dive into a world of ready-to-use components and layouts, all designed with [MJML](https://mjml.io/?ref=tailwindweekly.ongloat.com). Whether you're customizing your own or using our complete templates, building emails has never been faster. Give it a try for free!

---

Dive into **"[The Ultimate Guide to Web Design](https://uiadrian.gumroad.com/l/web-design-guide?a=623146483&ref=tailwindweekly.ongloat.com)"** and **master the art of creating stunning websites**. This 340-page e-book breaks down the essentials of UI design, typography, and responsive design, ensuring you don't have to rely solely on designers. With bonus templates, a Landing Page UI Kit, and insights into no-code tools, you'll be equipped to **bridge the gap between design and development**.

---

Discover **[LaunchStack](https://launchstack.app/?aff=lVeE1&ref=tailwindweekly.ongloat.com), your go-to platform to kickstart your SaaS application** in just 5 minutes! Packed with essential features like user management, team collaboration, and a pre-built billing system, **it's built on the trusted foundations of Laravel, TailwindCSS, and Vue 3**. Say goodbye to repetitive tasks and hello to a smoother, faster SaaS development experience!

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.com)**: the best TypeScript links every week, right in your inbox.

---

**[CSS Weekly](https://css-weekly.com/?ref=tailwindweekly.com)**: Weekly e-mail roundup of CSS articles, tutorials, experiments, and tools curated by Zoran Jambor

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #130: more Catalyst sneak peeks and new icons coming 🎨
URL: https://tailwindweekly.com/issue-130/
Last updated: 2025-09-05T09:04:02.000Z
Hello folks!

Gore more screenshots from Steve this week, Project Catalyst is looking better and better each passing week. I think it's gonna be awesome 💪🏻.

Also, the [results of the State of CSS 2023](https://2023.stateofcss.com/en-US?ref=tailwindweekly.com) are out now. It's no surprise that Tailwind CSS is leading the pack in interest and retention 🤩. Be sure to check the site for more metrics!

P.S. I'm currently looking for my next role. If you're looking for a seasoned frontend dev who loves Tailwind CSS, has 7+ years of experience with Vue & React, and wants to learn backend, email[ me](mailto:vivian@redpixel.io) 😁.

Now onto our usual content 😉.

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-60.jpg)

[](https://x.com/steveschoger/status/1700185291317784929?ref=tailwindweekly.ongloat.com)[Steve](https://x.com/steveschoger/status/1700185291317784929?ref=tailwindweekly.ongloat.com) has been hard at work on Project Catalyst and has been steadily releasing [sneak](https://x.com/steveschoger/status/1699498833426706471?ref=tailwindweekly.ongloat.com) peeks. So far the project looks stunning! Can't wait for it to come out soon.

![](https://tailwindweekly.com/content/images/image-61.jpg)

He'll also be releasing these new icons for Heroicons [soon](https://x.com/steveschoger/status/1700193139225502067?ref=tailwindweekly.ongloat.com), so Heroicons will soon have 300+ icons 🚀!

## **📚 Learning**

### **[Stop Rewriting Your CSS! Use :not() Instead](https://www.youtube.com/watch?v=WnUNMcy-YTs&ref=tailwindweekly.com)**

This week, I stumbled upon a great video by CSS Weekly that's all about simplifying your CSS with the :not() pseudo-class. From excluding the first and last items in a list to styling CMS-generated content, this video is packed with practical examples that'll make your life easier.

### **[Position-Driven Styles](https://kizu.dev/position-driven-styles/?ref=tailwindweekly.com)**

Roman Komarov explores the potential of scroll-driven animations in CSS to solve various challenges like styling flex and grid rows, staggered animations, and more. The article delves into experimental web features and offers examples that currently work in Chrome Canary.

### **[Styling React Select with Tailwind](https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind?ref=tailwindweekly.com)**

In his piece, Jussi walks us through the process of integrating Tailwind CSS and the React Select package, starting with a basic example and then diving deep into custom styling and adding icons. If you've ever struggled with making react-select play nicely with Tailwind, this guide is a must-read.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-62.jpeg)

****[Crater](https://crater.financial/?ref=tailwindweekly.com)**

Crater's homepage is a prime example on how you can create a nice landing page with just a handful of colors. Love the comfortable spacing and, believe it or not, the font is just good old browser default. Also, the illustrations give it a very nice touch!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-63.jpeg)

****[Tailwind CSS Color Generator](https://www.figma.com/community/plugin/1242548152689430610/tailwind-css-color-generator?ref=tailwindweekly.com)**

If you use Figma and design with Tailwind CSS in mind then you're gonna love this little plugin. It basically helps you generate a full Tailwind CSS color scale based on a hex code, HSL color, or even a random color. Perfect for when you want to experiment with different color palettes!

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Check out Shruti's new book, **["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**! Dive into real-world Tailwind examples and **discover tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**Ankur Tyagi's [The Prime Guide For Next Gen Developer](https://theankurtyagi.gumroad.com/l/nextgendev?a=623146483&ref=tailwindweekly.ongloat.com)** contains everything you need in a typical career path of a **software engineer or developer.** From starting at a company as a fresher or new grad to a senior software engineer.

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[Weekly Web Development](https://wweb.dev/weekly?ref=tailwindweekly.com)**: A weekly newsletter that helps you to stay up-to-date on the latest and greatest tools in web development!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #129: Project Catalyst seems right down the corner 🤩
URL: https://tailwindweekly.com/issue-129/
Last updated: 2025-09-05T09:17:27.000Z
Hello folks!

The Tailwind Labs team continues being hard at work on project Catalyst and Steve is showing the love by sharing more UI sneak peeks. Do check the news section for more info.

Adam mentioned on the announcement that they would be releasing it this summer so it'll probably be a few weeks more 🤞🏻.

P.S. I'm currently looking for my next role. If you're looking for a seasoned frontend dev who loves Tailwind CSS, has 7+ years of experience with Vue & React, and wants to learn backend, email[ me](mailto:vivian@redpixel.io) 😁.

Now onto our usual content 😉.

## **🌟 News**

> ✨ Put this 'lil graphic together in Figma for the Catalyst documentation.

> Obviously it's way easier to do this sort of thing with a screenshot but having more control and the ability to modify/exaggerate parts of the design makes it all worth it. The tiny details matter. [pic.twitter.com/S3C6Lphucl](https://x.com/steveschoger/status/1697352379694240029/photo/1?ref=tailwindweekly.com)— Steve Schoger (@steveschoger) [August 31, 2023](https://x.com/steveschoger/status/1697352379694240029?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

We got another great sneak peek from Steve about project Catalyst and it seems the project is partly on the documentation stage.

![](https://tailwindweekly.com/content/images/image-56.jpeg)

Steve also shared another set of components for project Catalyst, this one is all about checkboxes, radios, and toggle switches. I'm honestly loving the color combinations and the simplicity. Definitely looking forward to tinkering with them soon!

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-57.jpeg)

****[Offset parent and stacking context: positioning elements in all three dimensions](https://polypane.app/blog/offset-parent-and-stacking-context-positioning-elements-in-all-three-dimensions/?ref=tailwindweekly.com)**

Another great piece from the Polypane blog. This one is a fun guide to understanding two complex and powerful CSS concepts, offset parent and the stacking context.

Think of the offset parent as the "where" we place things on a webpage, and the stacking context as the "which goes on top" rule. By getting these, you'll be able to create beautiful elements and position them anywhere you want on a 3-dimensional plane.

### **[A Deep Dive Into SVG Path Commands](https://www.nan.fyi/svg-paths?ref=tailwindweekly.com)**

If you've ever been curious about those cryptic d attributes in SVG paths, this interactive guide demystifies them, explaining how they're more than just outputs from vector graphics editors. Dive in to learn about the different types of path commands and how they shape those beautiful icons we all love.

### **[Write Better CSS By Borrowing Ideas From JavaScript Functions](https://www.smashingmagazine.com/2023/04/write-better-css-borrow-ideas-javascript-functions/?ref=tailwindweekly.com)**

The article talks about the idea that many layout issues ocurr when we don't approach CSS with the same meticulousness as we do with JavaScript functions. By borrowing best practices from JS, we can code CSS that is more resilient, free from side effects, and flexible to change.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-58.jpeg)

****[Ligalio - Privacy Policy Generator For Websites and Apps](https://ligalio.com/?ref=tailwindweekly.com)**

This site is another great example of taking a beautiful template and personalizing it to the fullest. Ligalio uses the [Salient template](https://tailwindcss.com/plus/templates/salient?ref=tailwindweekly.com) from Tailwind UI but has different colors and fonts, and it even features different elements from the Tailwind UI library! Overall I think it looks elegantly simple.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-59.jpeg)

****[spacing.js](https://gist.github.com/patrickbjohnson/2ba62210bd3142f5c2a9609f33d086ec?ref=tailwindweekly.com)**

I became more active on Twitter/X recently and [posted](https://x.com/vivgui/status/1696270495535218706?ref=tailwindweekly.ongloat.com) about expanding the Tailwind spacing scale. Well, [Patrick](https://x.com/patrickbjohnson/status/1696296647976722669?ref=tailwindweekly.ongloat.com), a friend, replied with an even better idea! He shared this Github Gist with a function that autogenerates the Tailwind config values in whatever increment you want. I really like the default which is increments of 5 and I'll be adding that snippet to my starter projects.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Check out Shruti's new book, **["Level up with Tailwind CSS"](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)**! Dive into real-world Tailwind examples and **discover tips even seasoned users will find valuable**. Plus, there's an accompanying video course with fresh content every week. If you're serious about **improving your Tailwind CSS skills** then this book is for you!

---

Dive into the world of web security with "**[The Beginner's Guide To Web Security](https://gokulkrishh.gumroad.com/l/web-security?a=623146483&ref=tailwindweekly.ongloat.com)**", a **comprehensive 100+ page book** by Gokul, a Google Developer Expert based in Bangalore. This guide covers everything from the basics of how the web works, HTTP, HTTPS, TCP/IP, SSL certificates, **to various web security vulnerabilities and how to counter them**. It's a must-read for both junior and senior web developers, offering a wealth of information in a concise format.

---

**Designing on your own and want fancy icons? [Check out Iconfinder](https://tailwindweekly.link/iconfinder?ref=tailwindweekly.ongloat.com)**, they have the biggest and best selection of icons I have ever seen and at very affordable prices.

---

**[PixelSnap 2](https://tailwindweekly.link/pixelsnap-2?ref=tailwindweekly.ongloat.com) is the fastest tool for measuring anything on your screen**. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[Weekly Web Development](https://wweb.dev/weekly?ref=tailwindweekly.com)**: A weekly newsletter that helps you to stay up-to-date on the latest and greatest tools in web development!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #128: we got a new Tailwind CSS book 🚀!
URL: https://tailwindweekly.com/issue-128/
Last updated: 2025-09-08T07:03:41.000Z
Hello folks!

No official news this week but we got [lots](https://x.com/steveschoger/status/1695139153753604384?s=20&ref=tailwindweekly.ongloat.com) of [sneak](https://x.com/steveschoger/status/1694741661551677700?s=20&ref=tailwindweekly.ongloat.com) [peeks](https://x.com/steveschoger/status/1694384624305086866?s=20&ref=tailwindweekly.ongloat.com) from Steve! The Tailwind Labs team is hard at work on Catalyst, the next iteration of Tailwind UI and from what we can see on Twitter its gonna *look great*!

Now onto our usual content 😉.

## **🌟 News**

Like I said on the intro, there's no official news from the Tailwind Labs team but I wanted to share something that I think its newsworthy!

Last week my friend Shruti released her long-awaited Tailwind CSS book! It's called **[Level up with Tailwind CSS](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com)** and its all about improving your knowledge of Tailwind CSS with real world examples.

![](https://tailwindweekly.com/content/images/image-53.jpeg)

I read the entire book already and even after using Tailwind CSS daily for the last 5 years I learned quite a few new things. The book is full of examples on how to apply the various tips and concepts Shruti introduces and they're all reusable since they're hosted on Tailwind Play and Codepen.

There's even a section where she mentions an undocumented API for working with colors when developing plugins and she explains how to use it in detail. She must have spent a lot of time on the library's source code to figure that out, talk about commitment 🤯!

I know I'm geeking out a lot about this book 😂 but it's just so good and the best part is that there's also a video course! She'll be releasing 2 videos every week which will expand on the book's material.

Now, Shruti was kind of enough to prepare a discount code only for Tailwind Weekly readers. You can get 25% off if you use the code TWEEKLY25 at checkout. This code is only valid until the 29th so be quick!

That's it, that's my pitch! I do wanted to mention that I'm earning a comission if you buy the book through the links above, at no extra cost for you. Offers like this are what makes possible for me to keep writing this newsletter for free so see it as you supporting my work and other Tailwind CSS content creators 🙂.

## **📚 Learning**

### **[Responsive Framer Motion with Tailwind CSS](https://www.youtube.com/watch?v=xSuxsfn13xg&ref=tailwindweekly.com)**

Sam is at it with another great video series about using Framer Motion with Tailwind CSS. I love the approach he uses, basically using Tailwind arbitrary properties with CSS variables inside, it looks so flexible!

### **[CSS Quick-Tip: Custom Properties Fallback Values](https://www.youtube.com/watch?v=Jl307P2O8Bs&ref=tailwindweekly.com)**

Now that CSS variables are more ubiquitous, it's good to know as much as we can about it. Like how to set fallback values, which is what this video explains. It's very short, just 2m, but the examples it uses are quite powerful.

### **[Scroll progress animations in CSS](https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css/?ref=tailwindweekly.com)**

I couldn't believe when I first read it but now its possible to do scroll animation with pure CSS! The article outlines the process and it seems very straightforward. The magic of it is using the [scroll()](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll?ref=tailwindweekly.ongloat.com) function. Pretty neat!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-54.jpeg)

****[Phil Wolstenholme](https://wolstenhol.me/?ref=tailwindweekly.com)**

To give you a break from so many dev product landing pages, this week I'm showcasing a personal site from Phil Wolstenholme, a lead frontend engineer at a startup. I really like the simple layout and the Post-it-like "Reading" section items, plus the color choices make for a nice combination. Also, those handwritten arrow icons rock!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-55.jpeg)

****[WhoCanUse](https://www.whocanuse.com/?ref=tailwindweekly.com)**

If you value accessibility for your web work then you'll love this tool. With it, you can add any color combination and it'll simulate how it would look for people with different visual limitations like Cataracts, Glaucoma, and even low vision. Definitely a tool to have in your arsenal when you're doing accessible web development.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

Dive into the world of web security with "**[The Beginner's Guide To Web Security](https://gokulkrishh.gumroad.com/l/web-security?a=623146483&ref=tailwindweekly.ongloat.com)**", a **comprehensive 100+ page book** by Gokul, a Google Developer Expert based in Bangalore. This guide covers everything from the basics of how the web works, HTTP, HTTPS, TCP/IP, SSL certificates, **to various web security vulnerabilities and how to counter them**. It's a must-read for both junior and senior web developers, offering a wealth of information in a concise format.

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[Weekly Web Development](https://wweb.dev/weekly?ref=tailwindweekly.com)**: A weekly newsletter that helps you to stay up-to-date on the latest and greatest tools in web development!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #127: Typescript support is coming to Tailwind UI templates! 🤩
URL: https://tailwindweekly.com/issue-127/
Last updated: 2025-09-08T08:52:37.000Z
Hello folks!

The Tailwind Labs team was pretty active on Twitter this week sharing cool stuff. Here's one stat that will 🤯 your mind: The prettier-plugin-tailwindcss is installed almost [1 million times per week](https://x.com/adamwathan/status/1688660009989574656?ref=tailwindweekly.ongloat.com) these days!

Now onto our usual content 😉.

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-50.jpeg)

We got a lot of news from the Tailwind Labs team on twitter this past week! Here's the rundown:

- All the Tailwind UI templates were updated to use the new [Next.js App Router feature](https://x.com/adamwathan/status/1688164055142289409?ref=tailwindweekly.ongloat.com) 🤓️.
- Coming soon, all Tailwind UI templates will have [a Typescript version](https://x.com/reinink/status/1689726648923426816?ref=tailwindweekly.ongloat.com) 🙌🏻.
- We got a new version of the [Tailwind CSS Prettier plugin](https://x.com/reinink/status/1689348222752301056?ref=tailwindweekly.ongloat.com) which *improves support for Prettier v3 by fixing compatibility with a bunch of other common third-party Prettier plugins* 🎨.
- Believe it or not the prettier-plugin-tailwindcss plugin is the most popular Prettier plugin there is 🤯

## **📚 Learning**

### **[The differences between CSS and Sass Nesting](https://www.youtube.com/watch?v=ljDIcBp-9sQ&ref=tailwindweekly.com)**

Now that CSS nesting has a lot of browser support more and more people are using it but many do not know that there are key differences from the Sass implementation. This video from Kevin Powell explains exactly that in a concise way with great examples.

### **[Typographic Hierarchies](https://www.smashingmagazine.com/2022/10/typographic-hierarchies/?ref=tailwindweekly.com)**

I feel typography stuff is kind of like its own world in web design and a lot of that niche knowledge leaks into frontend development work, like the typography hierarchy concept example. This article has no code examples but it's an amazing resource to learn about *why* hierarchies exist in typography and why it's widely used even in Tailwind CSS.

> quick tip for nested radii → your corners will look a lot better if you set the outer radius to the sum of the inner radius + padding [pic.twitter.com/oh9ABFSuQ1](https://x.com/aleksliving/status/1687889580555407361?ref=tailwindweekly.com)— Aleks (@aleksliving) [August 5, 2023](https://x.com/aleksliving/status/1687889580555407361?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

I don't usually tend to share tips in tweet form bu this one is so good I had to do it. It turns out the formula for awesome nested rounded corners is very simple math!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-51.jpeg)

****[Resend](https://resend.com/?ref=tailwindweekly.com)**

Resend is another developer-focused product and its landing page looks like something the Tailwind Labs team would design, yes it's *that* good. I find the truly dark theme very elegant and the shadow effects look stunning!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-52.jpeg)

****[tailwindcss-3d](https://github.com/sambauers/tailwindcss-3d?ref=tailwindweekly.com)**

Tailwind CSS list of classes is *almost* 1:1 with CSS properties, but for some very *niche* stuff, you can either write your own custom CSS or depend on plugins. This is the case for 3D transforms in Tailwind and luckily for us, this plugin fills exactly that gap. One thing I really liked its its exhaustive documentation, not many plugins have that to its highly appreciated!

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[TypingMind](https://tdinh.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com) is your pocket-friendly ChatGPT alternative.** For a one-time fee, you'll have access to incredible AI power with minimal token charges. **Say goodbye to high costs** and embrace the world of affordable and sophisticated AI chatbots. Join TypingMind now and unleash the full potential of AI!

---

**"[The Junior to Senior Guidebook](https://randallkanna.gumroad.com/l/xOzJU?a=623146483&ref=tailwindweekly.ongloat.com)"** is your ultimate guide to thriving in your dev career. Beyond coding, it **offers invaluable insights into standing out in a saturated job market**, rapid career advancement, skill development, burnout management, and effective learning. The author shares **his journey from junior to senior engineer in just 18 months**. Boost your tech career with this essential guidebook.

---

Dive into the world of web security with "**[The Beginner's Guide To Web Security](https://gokulkrishh.gumroad.com/l/web-security?a=623146483&ref=tailwindweekly.ongloat.com)**", a **comprehensive 100+ page book** by Gokul, a Google Developer Expert based in Bangalore. This guide covers everything from the basics of how the web works, HTTP, HTTPS, TCP/IP, SSL certificates, **to various web security vulnerabilities and how to counter them**. It's a must-read for both junior and senior web developers, offering a wealth of information in a concise format.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[Weekly Web Development](https://wweb.dev/weekly?ref=tailwindweekly.com)**: A weekly newsletter that helps you to stay up-to-date on the latest and greatest tools in web development!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #126: More Tailwind CSS tips and tricks and learn all about object-* properties 😁!
URL: https://tailwindweekly.com/issue-126/
Last updated: 2025-09-08T09:11:43.000Z
Hello folks!

Another quiet week on the Tailwind CSS front but Adam seems hard at work on project Catalyst. I love [seeing](https://x.com/adamwathan/status/1684684729130348546?ref=tailwindweekly.ongloat.com) those [tweets](https://x.com/adamwathan/status/1687097695649886208?ref=tailwindweekly.ongloat.com) where he explains his reasoning for some of his [design](https://x.com/adamwathan/status/1687489185563684866?ref=tailwindweekly.ongloat.com) decisions. It's like seeing a master practicing his craft 💪🏻.

Now onto our usual content 😉.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-47.jpeg)

****[Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?](https://csswizardry.com/2023/07/core-web-vitals-for-search-engine-optimisation/?ref=tailwindweekly.com)**

This one is an incredibly read from Harry, AKA CSS Wizardry. We all know that Core Web Vitals affect SEO but Harry does a complete deep dive including quotes from Google employees and their official docs and statements. This is THE article proof I would show my manager or client to convince him to allocate time for Core Web Vitals improvements. Overall a great read.

### **[Tailwind CSS Tips and Tricks Worth Knowing](https://www.builder.io/blog/tailwind-css-tips-and-tricks?ref=tailwindweekly.com)**

Here's another great compilation of Tailwind CSS tips, I particularly liked the one about "Creating custom Tailwind plugins", that's a Tailwind skill that will offer benefits for years to come.

### **[How to Use CSS object-fit and object-position](https://www.sitepoint.com/using-css-object-fit-object-position-properties/?ref=tailwindweekly.com)**

You probably know the hero image trick of <img class="object-cover w-full" /> but do you know *why* you should use object-cover? You can learn that and even more from this piece! It explains all the nitty gritty of the object-fit and object-position properties with great examples and use cases.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-48.jpeg)

****[Inngest](https://www.inngest.com/?ref=tailwindweekly.com)**

Here's another developer product with an amazing landing page! I just love how all these dev-focused startups are investing good money in their presentation layer and Inngest is no exception, with great typography, beautiful structure, and lovely colors, the landing page looks elegant and polished.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-49.jpeg)

****[Atlas Icons](https://atlasicons.vectoricons.net/?ref=tailwindweekly.com)**

While there are hundreds of icon packs for the web out there, it's very difficult to find ones that have a high number of varied icons *and* also keep them all consistent. [Remix Icon](https://remixicon.com/?ref=tailwindweekly.ongloat.com) is usually my go-to but I recently discovered Atlas Icons and I'm very tempted to switch, I just love their visual style and they look more framework friendly with packages for React, Vue, and even Flutter. Will definitely keep an eye on this one!

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[TypingMind](https://tdinh.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com) is your pocket-friendly ChatGPT alternative.** For a one-time fee, you'll have access to incredible AI power with minimal token charges. **Say goodbye to high costs** and embrace the world of affordable and sophisticated AI chatbots. Join TypingMind now and unleash the full potential of AI!

---

**"[The Junior to Senior Guidebook](https://randallkanna.gumroad.com/l/xOzJU?a=623146483&ref=tailwindweekly.ongloat.com)"** is your ultimate guide to thriving in your dev career. Beyond coding, it **offers invaluable insights into standing out in a saturated job market**, rapid career advancement, skill development, burnout management, and effective learning. The author shares **his journey from junior to senior engineer in just 18 months**. Boost your tech career with this essential guidebook.

---

Dive into the world of web security with "**[The Beginner's Guide To Web Security](https://gokulkrishh.gumroad.com/l/web-security?a=623146483&ref=tailwindweekly.ongloat.com)**", a **comprehensive 100+ page book** by Gokul, a Google Developer Expert based in Bangalore. This guide covers everything from the basics of how the web works, HTTP, HTTPS, TCP/IP, SSL certificates, **to various web security vulnerabilities and how to counter them**. It's a must-read for both junior and senior web developers, offering a wealth of information in a concise format.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[Weekly Web Development](https://wweb.dev/weekly?ref=tailwindweekly.com)**: A weekly newsletter that helps you to stay up-to-date on the latest and greatest tools in web development!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #125: Learn 10 actually useful Tailwind CSS tips!
URL: https://tailwindweekly.com/issue-125/
Last updated: 2025-09-08T09:23:48.000Z
Hello folks!

It's been a slow week on the Tailwind CSS ecosystem so no major news this time but I did want to mention that the Tailwind Labs team seems hard at work developing Catalyst components. You can see their work on buttons and form components [here](https://x.com/steveschoger/status/1684970618020667393?ref=tailwindweekly.ongloat.com).

Also, Adam will be speaking at [RailsWorld](https://x.com/adamwathan/status/1683538550518689792?ref=tailwindweekly.ongloat.com), can't wait to watch that talk!

Now onto our usual content 😉.

## **📚 Learning**

### **[10 Tailwind Tricks You NEED To Know!](https://www.youtube.com/watch?v=aSlK3GhRuXA&ref=tailwindweekly.com)**

I found this video on my Youtube feed recently and I was pleasantly surprised when I learned something from one of the tips. Tailwind CSS has so many features that it's easy to forget some of them but this one min-\[400px\]:class was incredible to see in action! Be sure to check out the video for the other tips, they're very good.

### **[Randomness in CSS](https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd?ref=tailwindweekly.com)**

Randomness in CSS is a tricky business and developers usually resort to JS to fill that gap. Well, this piece teaches you mentions a way around this, and explains how to use it. Definitely a niche issue but a great read nonetheless.

### **[Baseline: A NEW Way To Think About Browser Support](https://www.youtube.com/watch?v=wTT0jRpE-Q8&ref=tailwindweekly.com)**

Ever heard of Baseline? It's a new initiative from Google that helps web developers know which features are safe to use for production depending on what browser versions they want to support. The video explains it way better than I can and I think it can be a great concept to mention to clients when talking about cross-browser support.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-45.jpeg)

****[Diverently](https://diverently.com/en?ref=tailwindweekly.com)**

Diverently is an advertising agency based in Hamburg and let me tell you, their website rocks! It kind of reminds me of an interactive comic book, yes it's that good. Also love their font choices, who would have thought that there's a font called "Real" 🎨.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-46.jpeg)

****[NativeWind](https://www.nativewind.dev/?ref=tailwindweekly.com)**

If you want to use Tailwind CSS in React Native then you'll love NativeWind. In their own words:

> NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.

The library seems to have almost all of Tailwind CSS features and you can even set styles for each individual platform. Overall a cool library to keep an eye on.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[TypingMind](https://tdinh.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com) is your pocket-friendly ChatGPT alternative.** For a one-time fee, you'll have access to incredible AI power with minimal token charges. **Say goodbye to high costs** and embrace the world of affordable and sophisticated AI chatbots. Join TypingMind now and unleash the full potential of AI!

---

**"[The Junior to Senior Guidebook](https://randallkanna.gumroad.com/l/xOzJU?a=623146483&ref=tailwindweekly.ongloat.com)"** is your ultimate guide to thriving in your dev career. Beyond coding, it **offers invaluable insights into standing out in a saturated job market**, rapid career advancement, skill development, burnout management, and effective learning. The author shares **his journey from junior to senior engineer in just 18 months**. Boost your tech career with this essential guidebook.

---

Dive into the world of web security with "**[The Beginner's Guide To Web Security](https://gokulkrishh.gumroad.com/l/web-security?a=623146483&ref=tailwindweekly.ongloat.com)**", a **comprehensive 100+ page book** by Gokul, a Google Developer Expert based in Bangalore. This guide covers everything from the basics of how the web works, HTTP, HTTPS, TCP/IP, SSL certificates, **to various web security vulnerabilities and how to counter them**. It's a must-read for both junior and senior web developers, offering a wealth of information in a concise format.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[Weekly Web Development](https://wweb.dev/weekly?ref=tailwindweekly.com)**: A weekly newsletter that helps you to stay up-to-date on the latest and greatest tools in web development!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #124: read the official Tailwind Connect recap 😁
URL: https://tailwindweekly.com/issue-124/
Last updated: 2025-09-08T09:37:06.000Z
Hello folks!

The Tailwind Labs folks were kind enough to write a recap of the Tailwind Connect event we had a few weeks ago. I still highly recommend you watch the [full video](https://www.youtube.com/watch?v=CLkxRnRQtDE&ref=tailwindweekly.com) because the demos were mind-blowing 🤯 but if you just want the TL;DR then the recap is for you.

Now onto our usual content 😉.

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-42.jpeg)

That's right folks, thanks to the upcoming Oxide engine, Tailwind CSS' performance is going through the roof 🤯!

According to the Tailwind Labs team, v3.4 will land in a couple of months and will not only include the new Oxide engine but also integrate with Lightning CSS.

Want to learn more about all this? Go read the [official recap](https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap?ref=tailwindweekly.ongloat.com) for the event!

## **📚 Learning**

### **[Hands-On Guide to Color Fonts](https://www.youtube.com/watch?v=VpZSMq2ajDE&ref=tailwindweekly.com)**

I didn't know color fonts existed until a few weeks ago when I came across this video, and I must say they look pretty cool. They're basically special fonts that you can use to create very nice effects. The video walks you through the most popular ones from Google Fonts and how you can customize them.

### **[Useful DevTools Tips and Tricks](https://www.smashingmagazine.com/2023/06/popular-devtools-tips/?ref=tailwindweekly.com)**

As a frontend developer, I spend a lot of time on the Chrome dev tools but I feel like I have only scratched the surface of what it can do and this article sooo proved me right. This one is so good I can't believe it's free content! If you want to level up your devtools skills then this is the guide for you.

### **[New Viewport Units](https://ishadeed.com/article/new-viewport-units/?ref=tailwindweekly.com)**

Ever wanted to make the hero of a website take up the full viewport height and *also* make it work on mobile? It was like doing dark magic my friend. But the developer experience gods heard our cry and delivered us from this punishment and now we have new viewport units that *actually* know the height of the viewport on mobile! Check out the article to learn more.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-43.jpeg)

****[Airplane](https://www.airplane.dev/?ref=tailwindweekly.com)**

Here's another cool-looking landing page for a developers-centric product for you. This one has the best micro animations I have seen in years, so many micro interactions, almost feels like the page is "alive". I'm also loving the dark theme and the beautiful gradients 🎨.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-44.jpeg)

****[tailwindcss-icons](https://github.com/egoist/tailwindcss-icons?ref=tailwindweekly.com)**

Icons are a pretty big part of UI development and while Heroicons is an incredible resource sometimes you want something more specific. That's where this plugin can help! It lets you use icons from Iconify, which has over 150k icons, by just adding classes to your markup. You can also define what "collection" of icons you want to use, pretty neat!

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

Meet **[Origin](https://archiethedev.gumroad.com/l/origin-theme?a=623146483&ref=tailwindweekly.ongloat.com), a sleek personal blog theme for Ghost**, crafted with TailwindCSS. It's all about simplicity and a superior writing experience. With features like customizable color schemes, rich media embedding, and a newsletter subscription box, Origin is your perfect platform for sharing thoughts.

---

**"[The Junior to Senior Guidebook](https://randallkanna.gumroad.com/l/xOzJU?a=623146483&ref=tailwindweekly.ongloat.com)"** is your ultimate guide to thriving in your dev career. Beyond coding, it **offers invaluable insights into standing out in a saturated job market**, rapid career advancement, skill development, burnout management, and effective learning. The author shares **his journey from junior to senior engineer in just 18 months**. Boost your tech career with this essential guidebook.

---

Dive into the world of web security with "**[The Beginner's Guide To Web Security](https://gokulkrishh.gumroad.com/l/web-security?a=623146483&ref=tailwindweekly.ongloat.com)**", a **comprehensive 100+ page book** by Gokul, a Google Developer Expert based in Bangalore. This guide covers everything from the basics of how the web works, HTTP, HTTPS, TCP/IP, SSL certificates, **to various web security vulnerabilities and how to counter them**. It's a must-read for both junior and senior web developers, offering a wealth of information in a concise format.

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #123: Tailwind UI launched a new "Studio" template 🎨
URL: https://tailwindweekly.com/issue-123/
Last updated: 2025-09-08T09:48:50.000Z
Hello folks!

Say hello to the new "Studio" template for Tailwind UI. Steve [calls](https://x.com/steveschoger/status/1679561978577145874?ref=tailwindweekly.ongloat.com) it "their largest yet" and it looks AWESOME! Check out below for more info.

Also, the Tailwind Connect keynote video just reached [100k views](https://x.com/adamwathan/status/1679522010328625153?ref=tailwindweekly.ongloat.com)! If you're interested in the future of Tailwind CSS then I highly recommend you [watch it](https://www.youtube.com/watch?v=CLkxRnRQtDE&ref=tailwindweekly.com), it also has great production value and the demos were incredible.

Now onto our usual content 😉.

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-39.jpeg)

The new Studio template (see [preview](https://studio.tailwindui.com/?ref=tailwindweekly.ongloat.com)) is aimed at development studios and agencies that want to have a clean and beautiful website to showcase their project and case studies. It even says that *you can even tell people we were the ones who stole the design from you* 🤣.

Like all the other Tailwind UI templates, it was made using Next.js and MDX, and all the animations are made with Framer Motion to add a nice touch.

## **📚 Learning**

### **[Dismissing a Radix Dialog after a form submission](https://www.youtube.com/watch?v=3ijyZllWBwU&ref=tailwindweekly.com)**

Here's another great video from Sam Selikoff, the "new Youtube sensation" as per Adam Wathan's words. This video is part of a series where Sam shows best practices when coding with Radix and Tailwind CSS but even if you don't use Radix you can definitely gain something by watching this series. I particularly loved the disabled fieldset trick for managing the loading state, that was 🤯.

### **[Why custom properties don't work with the url() CSS function](https://www.stefanjudis.com/today-i-learned/custom-properties-dont-work-with-the-url-css-function/?ref=tailwindweekly.com)**

Now that CSS custom properties have been out for a while and people are using them all around, you sometimes find "bugs" or surprising behavior like the one explained in this piece. Lucky for all of us, it's an easy fix!

### **[Conditional CSS with :has and :nth-last-child](https://ishadeed.com/article/conditional-css-has-nth-last-child/?ref=tailwindweekly.com)**

After watching the Tailwind Connect keynote video last week and seeing the power of the upcoming :has support in Tailwind CSS I'm now reading a lot of articles about :has in a whole new light and thinking on how to translate them to Tailwind CSS. This one is from one of my favorite CSS bloggers and shows a multitude of use cases for pairing :has and the :nth-last-child selector. Definitely a great read!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-40.jpeg)

****[Vendure](https://vendure.io/?ref=tailwindweekly.com)**

This week's showcase is yet another example that you can make simple and familiar layouts look AWESOME if you just customize them a bit. This site looks like it was made straight out of Tailwind UI components but they have their own personality and their animations and interactivity make them shine. Also, that blue gradient looks lovely 😻.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-41.jpg)

****[Tailwind Templates & UI Kits - Built At Lightspeed](https://www.builtatlightspeed.com/category/tailwind?themes%5BrefinementList%5D%5Bcategories.css%5D%5B0%5D=tailwind%3Futm%5Fcampaign%3Dtailwind-weekly-123&ref=tailwindweekly.com)**

After Tailwind UI launched a lot of people realized there's money behind building a good UI library and dozens have popped up. Now the question is, how do you find a good one? That's what this site is about! It features a list of Tailwind CSS templates, starter kits, and boilerplate projects and you can filter by category, tech stack, and even if its open source of not. Definitely, a site to browse when you want to start your next project.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

**Caleb Porzio's ​[Make VS Code Awesome](https://calebporzio.gumroad.com/l/SFYKpD/?a=623146483&ref=tailwindweekly.ongloat.com)** course is an excellent course on customizing and improving your VS Code experience. I bought it recently and it completely changed how I set up and use VS Code, for the better!

## **✌️ Partners**

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #122: we got the Tailwind Connect video and its 😎 🤟🏻
URL: https://tailwindweekly.com/issue-122/
Last updated: 2025-09-09T02:51:35.000Z
Hello folks!

We finally got the Tailwind Connect video folks and it's a MUST watch if you're interested in the future of Tailwind CSS. Check out the news section for more info!

Now onto our usual content 😉.

## **🌟 News**

Here's the Tailwind Connect keynote and at 1.5 hours, its quite beefy but if you just want the TL;DW then here it is:

- The event was separated into 3 parts: 1) an intro, 2) a demo session with 4 demos, and 3) a "here's what we're working on and will be releasing soon" session.
- For the demos, we got:

1) How to use the accent-\[color\] feature2) How to use the upcoming text-balance class3) Upcoming :has support in the form of has-\[\] and group-has-\[\] classes, with examples4) Upcoming @container queries support, with examples

- After the demos, Adam started talking more about his vision for Tailwind CSS and what they're coming up the pipeline but 2 major things stood out:
- The announcement of Oxide, which will be a unified toolchain for Tailwind CSS, will include support autoprefixer, postcss-import and other PostCSS plugins out of the box, kind of like Parcel, so you won't have to install those individual packages anymore.
- The announcement of Catalyst, which will be a mix of Tailwind UI and ready-made components a la Radix UI, all made in React. The idea is to copy and paste a folder full of premade components that you can customize to fit your needs.

That pretty much covers all the major things but I HIGHLY suggest you watch the whole video, it has incredible production value and we even got Steve at the end showing some cool upcoming designs.

## **📚 Learning**

### **[Self-hosting fonts explained (including Google fonts) // @font-face tutorial](https://www.youtube.com/watch?v=zK-yy6C2Nck&ref=tailwindweekly.com)**

This is one of the best tutorials I have seen about using your own font files (or self-hosting as it is called now). It details all the steps, from getting the font files to converting them to web-friendly formats to creating the @font-face declarations. Overall, a great video to have in your library for future reference!

### **[You probably want position: sticky instead of fixed](https://www.youtube.com/watch?v=8MaCTDkoVd8&ref=tailwindweekly.com)**

Here's yet another video from Kevin Powell 🙈 but this one is just as good! If you have been coding long enough you know that position: fixed was the standard way to make elements "sticky" on the screen, until position: sticky came along and changed things a bit.

The thing is, you can still use position: fixed but position: sticky offers a few advantages and this video is all about those and some scenarios where position: sticky is definitely the way to go!

### **[CSS color-mix()](https://developer.chrome.com/docs/css-ui/css-color-mix?ref=tailwindweekly.com)**

This is THE tutorial about the new way of mixing colors in CSS using the color-mix() function. No more messing with SCSS or trying to do magic with HSL and variables. You just call the function, give it a few colors and it'll all the work for you. The best thing is, it has [very good browser support](https://caniuse.com/?search=color-mix&ref=tailwindweekly.com)!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-37.jpg)

****[Trigger.dev](https://trigger.dev/?ref=tailwindweekly.com)**

Here's another stunning development tool landing page for you! Trigger.dev has a dark style with lots of beautiful shadows and lighter gradients. It also has a very nice combination of fonts ([Poppins](https://fonts.google.com/specimen/Poppins?ref=tailwindweekly.ongloat.com) & [Inter](https://fonts.google.com/specimen/Inter?ref=tailwindweekly.ongloat.com) to be exact) but if you ask me, the light of the party is the "screenshot" animations! They look very well-made and catch the eyes' attention for sure.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-38.jpeg)

****[Tailwind Size Conversion Raycast Extension](https://www.raycast.com/kemiljk/tailwind-size-conversion?ref=tailwindweekly.com)**

I'm a HUGE fan of [Raycast](https://www.raycast.com/?ref=tailwindweekly.ongloat.com) and use it a lot on my daily work so when I saw this new extension popup I had to try it out. It basically converts pixel values to approximate Tailwind CSS values, using Tailwind's scale 4\. It also goes the other way around, converting Taiwind values to pixels. Definitely helpful if you're not yet familiar with Tailwind's number scale.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[OpenDyslexic is a new open-source font](https://antijingoist.gumroad.com/l/OpenDyslexic?a=623146483&ref=tailwindweekly.ongloat.com)** created to increase readability **for readers with dyslexia**. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from other dyslexic users.

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #121: the State of CSS survey is back!
URL: https://tailwindweekly.com/issue-121/
Last updated: 2025-09-09T08:46:58.000Z
Hello folks!

Not much official news this week, the Tailwind Labs team is hard at work on cool stuff. In the meantime, we got more Tailwind Connect photos 📸!

The [State of CSS 2023](https://survey.devographics.com/en-US/survey/state-of-css/2023?ref=tailwindweekly.com) is open so be sure to do your part and fill it out!

Now onto our usual content 😉.

## **🌟 News**

Adam released a bunch of pictures from Tailwind Connect, they're lovely! You can see them all [here](https://connect.tailwindcss.com/photos?ref=tailwindweekly.ongloat.com) but there's a few:

![](https://tailwindweekly.com/content/images/image-34.jpg)

On the community side, we got another awesome video from Sam Selikoff, where he showcases the powerful combination of Radix UI and Tailwind CSS. It's wild 🤯!

## **📚 Learning**

### **[shadcn/ui — Theming Wrapped in a Tailwind Plugin/Preset](https://www.youtube.com/watch?v=QJlTWj30krw&ref=tailwindweekly.com)**

[shadcn/ui](https://ui.shadcn.com/?ref=tailwindweekly.ongloat.com) is a very opinionated React component library based on [Radix UI](https://www.radix-ui.com/?ref=tailwindweekly.ongloat.com) and Tailwind that has been gaining some popularity in recent months. In this video, our friend Simon shows how to use it and why you might like it. I have been following Radix UI for a bit and [shadcn/ui](https://ui.shadcn.com/?ref=tailwindweekly.ongloat.com) is exactly the type of project that can help with adoption.

### **[Creating a shine effect on a card with Tailwind CSS](https://ibelick.com/blog/create-shine-effect-on-card-with-tailwind-css?ref=tailwindweekly.com)**

This one is short and sweet! You'll learn how to make a beautiful shine hover effect using Tailwind and how easy is to adapt vanilla CSS to use it as Tailwind CSS instead!

### **[11 HTML best practices for login & sign-up forms](https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms?ref=tailwindweekly.com)**

A more general article but great nonetheless. This one is from Evil Martians, the folks behind *autoprefixer* and *postcss.* Just for that alone, the article deserves a glance and it didn't disappoint! I particularly liked point #8, will start implementing it on my forms going forward.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-35.jpeg)

****[Sofa](https://www.sofahq.com/?ref=tailwindweekly.com)**

Sofa is one of those apps that makes you think "Huh, I didn't know I wanted that". It helps you "*create lists of apps, books, board games, movies, tv shows, podcasts, music albums, and video games to enjoy later*" and let me tell you, the landing page design is *very nice*. It has a kind of playful vibe with subtle colors and round font. Overall, a great landing page for a great app!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-36.jpeg)

****[Flowbite Icons](https://flowbite.com/icons/?ref=tailwindweekly.com)**

Here's another great icon source for you all! The Flowbite icons site is very similar to Heroicons as in you can copy the icon's code right away and the search is great. I do like that Flowbite has brand icons, albeit just a few. Looking forward to seeing it grow!

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[OpenDyslexic is a new open-source font](https://antijingoist.gumroad.com/l/OpenDyslexic?a=623146483&ref=tailwindweekly.ongloat.com)** created to increase readability **for readers with dyslexia**. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from other dyslexic users.

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**Designing on your own and want fancy icons? [Check out Iconfinder](https://tailwindweekly.link/iconfinder?ref=tailwindweekly.ongloat.com)**, they have the biggest and best selection of icons I have ever seen and at very affordable prices.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #120: the first official Tailwind CSS event went brilliantly!
URL: https://tailwindweekly.com/issue-120/
Last updated: 2025-09-09T09:02:30.000Z
Hello folks!

It was a pretty exciting week for the Tailwind Labs team with the first official Tailwind event being held a few days ago. Do check the news section for more info, we have pictures!

Now onto our usual content 😉.

P.S.: I apologize for the silence these last few weeks, I was neck-deep in work and dealing with some health issues but I'm as good as new now and back on track!

## **🌟 News**

Tailwind Connect was held a couple of days ago and it went very well! I personally didn't attend it but from what I could tell from the pictures and twitter talk, it was a blast.

And speaking of pictures, here are a few of them I got from Twitter!

![](https://tailwindweekly.com/content/images/image-31.jpeg)

Besides that, here's what you may have missed since our last email:

- :has(...) support is coming on the [next version ](https://x.com/adamwathan/status/1663582608528224257?s=20&ref=tailwindweekly.com)of Tailwind!
- We're also getting support for text-wrap on the [next release](https://github.com/tailwindlabs/tailwindcss/pull/11320?ref=tailwindweekly.ongloat.com) too.
- There's a [new template](https://x.com/adamwathan/status/1666198286003232785?s=20&ref=tailwindweekly.ongloat.com) coming soon! Looks to be an agency-focused template, and looks very cool

On the community side, our friend Simon released a video about the advantages of using [tailwind-merge](https://www.youtube.com/watch?v=tfgLd5ZSNPc&ref=tailwindweekly.com) and Sam Selikoff released his [Tailwind Mastery course](https://buildui.com/courses/tailwind-mastery?ref=tailwindweekly.ongloat.com), which is now fully complete over on Build UI, clocking in at 2h 29m across 21 lessons!

## **📚 Learning**

### **[Autoexpanding textareas with CSS and JavaScript](https://www.youtube.com/watch?v=2jPdcHENAi8&ref=tailwindweekly.com)**

If you ever worked with forms then you know that sometimes textareas are tricky. They behave like big, tall, and scrollable text inputs but sometimes that's not exactly what you want. This video tutorial teaches you how to fix the annoying scrollable issue by auto-resizing it with JS.

### **[Solving Media Object Float Issues With CSS Block Formatting Contexts](https://www.smashingmagazine.com/2023/05/media-object-float-issues-css-block-formatting-contexts/?ref=tailwindweekly.com)**

I heard of the term block formatting context years ago on CSS tricks but never gave it enough attention. Until I read this article! This piece offers an elegant solution to a niche issue (float problems) but also teaches you what a block formatting context is and why you should care.

### **[CSS Custom Properties Beyond the :root](https://matthiasott.com/notes/custom-properties-beyond-the-root?ref=tailwindweekly.com)**

It's very common for modern CSS libraries that use custom properties (a.k.a variables) to put a lot if not most of them on the :root selector and this article acknowledges that but also shows you an alternative to avoid having your :root selector become overwhelming. A pretty specific issue but solvable!

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-32.jpeg)

****[PopSQL](https://popsql.com/?ref=tailwindweekly.com)**

Who would think a SQL editor would be so pretty 😍. PopSQL is a *collaborative SQL editor for your team* and its landing page is one of the best I have seen for a very technical's product. The typography is elegant, the colors are vibrant and the micro animations are eye-catching. The features' pages look even better!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-33.jpg)

****[rewind-ui](https://rewind-ui.dev/?ref=tailwindweekly.com)**

I'm featuring new component libraries again and this week's is pretty cool! rewind-ui is a React-based library with 25 ready-to-use components, separated into 2 categories, "Data display" and "Forms". I find the components intuitive, the docs have a lot of examples and the [roadmap](https://rewind-ui.dev/roadmap?ref=tailwindweekly.ongloat.com) looks promising. Definitely, a library to keep an eye on.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**[Tiiny Host](https://tiiny.host/?fpr=vivian32&ref=tailwindweekly.ongloat.com)** is the simplest way to **share your web project**. Get feedback faster.

---

**[OpenDyslexic is a new open-source font](https://antijingoist.gumroad.com/l/OpenDyslexic?a=623146483&ref=tailwindweekly.ongloat.com)** created to increase readability **for readers with dyslexia**. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from other dyslexic users.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #119: Disable text selection, check the best-designed music app, and spice up your GitHub profile!
URL: https://tailwindweekly.com/issue-119/
Last updated: 2025-09-09T09:15:08.000Z
Hello folks!

No news this week folks, the Tailwind Labs team is probably crazy busy organizing the upcoming Tailwind Connect event next month. On that note, the event sold out in hours!

If you're planning on going be sure to take photos and tag @tailwindweekly on Twitter, I would love to share them with the community 😄.

Now onto our usual content 😉.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-28.jpeg)

****[TailwindCSS vs. UnoCSS](https://dev.to/mapleleaf/tailwindcss-vs-unocss-2a53?ref=tailwindweekly.com)**

For those who don't know, Uno CSS calls itself an "instant on-demand atomic CSS engine" and was inspired by Tailwind CSS. I find it a bit more customizable than Tailwind but I prefer the Tailwind conventions and the design work behind it.

### **[The gotcha with @property](https://www.bram.us/2023/02/01/the-gotcha-with-animating-custom-properties/?ref=tailwindweekly.com)**

I love the [Bram.us](https://www.bram.us/?ref=tailwindweekly.ongloat.com) blog, especially for these kinds of articles. This one is short and sweet and explains a quirky gotcha of using the @property. Here's the TL;DR: Custom properties that are registered using @property don’t animate on the compositor.

### **[When is it OK to Disable Text Selection?](https://css-tricks.com/when-is-it-ok-to-disable-text-selection/?ref=tailwindweekly.com)**

This one is something I have wondered about for a while and the scenarios the article mentions are very valid, especially the "Avoiding paywalled content theft" one. Overall a good opinion piece with great code examples.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-29.jpeg)

****[Sleeve 2](https://replay.software/sleeve?ref=tailwindweekly.com)**

I'm not even in the target market of this app but their marketing site is so good I just had to share it. The site has a nice Apple vibe and the dark mode is beautiful. Imagine my surprise when I noticed they're using the default system fonts! Never knew you could make those look so good 💅🏻.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-30.jpeg)

****[ProfileMe.dev](https://www.profileme.dev/?ref=tailwindweekly.com)**

I recently updated my Github profile to make it more "professional" and this free tool was great to make it shine. Adding technology logos and sections was a breeze, you just fill out fields and copy the output to your Github profile markdown file. Highly recommend it if you want to spice up your profile, especially if you're currently looking for a job.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.‌

---

**[Maccy is a clipboard manager](https://p0deje.gumroad.com/l/Apsra?a=623146483&ref=tailwindweekly.ongloat.com)** for macOS which does one job - keep your copy history at hand. Period. Lightweight. Open-source. No fluff.

---

**[OpenDyslexic is a new open-source font](https://antijingoist.gumroad.com/l/OpenDyslexic?a=623146483&ref=tailwindweekly.ongloat.com)** created to increase readability **for readers with dyslexia**. The typeface includes regular, bold, italic, and bold-italic styles. It is being updated continually and improved based on input from other dyslexic users.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #118: Tailwind got its first in-person event 🥳!
URL: https://tailwindweekly.com/issue-118/
Last updated: 2025-09-09T09:27:57.000Z
Hello folks!

We got the news of the season people: Tailwind CSS is doing a live in-person event 😃! Check out the news section for more details.

Also, CodeSandbox added [full integration support for Tailwind CSS](https://x.com/compuives/status/1656359660230971395?ref=tailwindweekly.ongloat.com). So you can expect classname autocomplete, linting, color highlighting, and hover previews, a la VS Code.

Now onto our usual content 😉.

## **🌟 News**

![](https://tailwindweekly.com/content/images/image-25.jpg)

The Tailwind Labs team got to work and now we're getting our [first in-person event](https://connect.tailwindcss.com/?ref=tailwindweekly.ongloat.com)!

Here are the main details:

- 📅 June 20, 2023 @ 6PM
- 📍 Tapestry Hall in Cambridge, ON, Canada
- 🎟️ Registration opens May 17th

The best part is that it's very affordable at just $50 per person but it's capped at 150 people so be sure to order yours as soon as the registration opens!

Also, I just have to point out that the event page is *beautiful*! I know Tailwind UI already has an event template but they should create another one with this design, it looks superb!

## **📚 Learning**

### **[The simple trick to transition from height 0 to auto with CSS](https://www.youtube.com/watch?v=B%5Fn4YONte5A&ref=tailwindweekly.com)**

If you have ever coded an accordion element then you probably know how quirky it is to animate the open and close states. One would have to do all sorts of tricks with fixed height or even max-height values.

Well, you can say bye to all of that because this little short video shows you that not only its possible to finally animate the auto property value but it's as easy as just adding two extra properties to your elements. Watch the video to find out which but here's a spoiler, it uses CSS Grid 🎨!

### **[Don’t use custom CSS scrollbars](https://ericwbailey.website/published/dont-use-custom-css-scrollbars/?ref=tailwindweekly.com)**

I always thought that animating scrollbars was a bad idea. I find it very finicky, the cross-browser support is not that good, and it's kind of unexpected for the user so it can throw them off. Well, this piece explains, *in detail*, why it's such a bad idea and why you *should* stick to the defaults.

### **[CSS border animations](https://web.dev/articles/css-border-animations?ref=tailwindweekly.com)**

Animating borders with CSS has always been a bit tricky. You would have to mess around with :before and :after to get anything worthwhile. But now thanks to better browser support you can make pretty cool border animations by using background properties. I won't spoil the fun but I do want to say that the example animation in the article is very very cool.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-26.jpeg)

****[Total TypeScript](https://www.totaltypescript.com/?ref=tailwindweekly.com)**

It's not every day that you find a course website that looks anything but! This one makes you feel like you jumped into a magical world, full of colors, old-style serif fonts, and magical-looking shapes. If you're into learning Typescript then you'll be doubly pleased.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-27.jpeg)

****[Tailwind Variants](https://www.tailwind-variants.org/?ref=tailwindweekly.com)**

I discovered this little utility last week and it blew my mind 🤯. Imagine being able to create reusable components with any prop you want like size or color and not have to deal with inline styles. That's what Tailwind Variants promises!

The docs [introduction](https://www.tailwind-variants.org/docs/introduction?ref=tailwindweekly.ongloat.com) is full of examples that will showcase its power better than I can explain it in these brief paragraphs but I think this can be a game changer for building reusable components with Tailwind CSS.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.‌

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**[Lexington Themes ](https://lexingtonthemes.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com)**– Premium themes and UI kits crafted with Astro.js and Tailwind CSS.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #117: new upcoming agency template and possible event happening 👀
URL: https://tailwindweekly.com/issue-117/
Last updated: 2025-09-09T09:41:02.000Z
Hello folks!

Short intro this week my friends, we got our usual menu of news, articles, a showcase, and a cool resource. I hope you like it 😄.

## **🌟 News**

Steve announced [a few days ago](https://x.com/steveschoger/status/1653840738830958592?ref=tailwindweekly.ongloat.com) that the Tailwind Labs team is working on a new template for agencies and it looks awesome! Here's a sneak peek:

![](https://tailwindweekly.com/content/images/image-22.jpeg)

Adam has also been tweeting about a [possible in-person event](https://x.com/adamwathan/status/1653919996769189890?ref=tailwindweekly.ongloat.com) the team might be planning. I'm crossing my fingers that it's close enough for me to attend 🤞🏻.

## **📚 Learning**

### **[Level Up Your VS Code Workflow: Start Using Profiles](https://youtu.be/kbUkU2XZp3M?ref=tailwindweekly.com)**

I feel like every developer I know uses VS Code as their daily driver and I can't blame them, its plugin and theme ecosystem is vibrant. But sometimes those plugins conflict with each other or make the editor a bit slow. That's where creating profiles for different use cases can help and this video tells you all about it.

### **[The wasted potential of CSS attribute selectors](https://elisehe.in/2022/10/16/attribute-selectors?ref=tailwindweekly.com)**

I absolutely love attribute selectors and wish more people used them. Even in Tailwind CSS, by using its arbitrary variant feature, you can use attribute selectors and they can be very powerful for specific use cases, like UI state management, which is the main use case the post showcases. Overall, a great piece that may open your eyes to the power of attribute selectors.

### **[CSS Blend Modes](https://garden.bradwoods.io/notes/css/blend-modes?ref=tailwindweekly.com)**

This interactive tutorial teaches you the basics of CSS blend modes in a very visual way. I particularly loved their duotone and halftone examples, very creative.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-23.jpeg)

****[Skiff](https://skiff.com/?ref=tailwindweekly.com)**

This site got on my radar recently and wow was I impressed! The colors, the screenshots, and the animations are all beautiful and elegant. They even have their own font! If this is their marketing landing page then I would love to see what they did for their product UI 😍.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-24.jpeg)

****[SupportsCSS](https://supportscss.dev/?ref=tailwindweekly.com)**

This is a brand new JS library that offers live, in-browser detection of modern CSS support for selectors, features, and at-rules. It claims to be inspired by [Modernizr](https://modernizr.com/?ref=tailwindweekly.ongloat.com) but goes way beyond it and the capabilities of @supports. Overall, if you're on the cutting edge and need CSS feature detection for progressive enhancements then you'll love this tool.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Our friend **[Shruti](https://x.com/shrutibalasa/?ref=tailwindweekly.ongloat.com)**, the author of [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com), **is writing another book! This time about Tailwind CSS and it'll also be a video course.** You can **preorder it** right now at a discount [here](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com).

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.‌

---

**Designing on your own and want fancy icons? [Check out Iconfinder](https://tailwindweekly.link/iconfinder?ref=tailwindweekly.ongloat.com)**, they have the biggest and best selection of icons I have ever seen and at very affordable prices.

---

**[Lexington Themes ](https://lexingtonthemes.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com)**– Premium themes and UI kits crafted with Astro.js and Tailwind CSS.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #116: huge Tailwind UI update, 3M installs milestone + our usual menu 😃!
URL: https://tailwindweekly.com/issue-116/
Last updated: 2025-09-09T14:11:14.000Z
Hello folks!

It's been a quiet week on the Tailwind CSS front. The Tailwind Labs team recently [wrapped up a huge update](https://x.com/reinink/status/1650557415304093719?ref=tailwindweekly.ongloat.com) to Tailwind UI where they redesigned hundreds of the components and added tons of new ones too.

Tailwind UI keeps getting better every year and I think it's an excellent investment if you want your projects to look professional and beautiful.

Also, the Tailwind CSS Visual Studio Code plugin just hit a milestone recently, it now has been [downloaded 3 MILLION times](https://x.com/adamwathan/status/1650902653159845889?ref=tailwindweekly.ongloat.com) 🤯, that means millions of people are using Tailwind, and that's no small feat!

Now onto our usual content 😉.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-19.jpg)

****[Circular Text with CSS?](https://dev.to/jh3y/circular-text-with-css-57jf?ref=tailwindweekly.com)**

A client asked me to do this effect a couple of weeks ago and I didn't realize it was so complicated to do! This article literally saved me hours of work and I hope it does the same for you!

### **[Ten tips for better CSS transitions and animations](https://joshcollinsworth.com/blog/great-transitions?ref=tailwindweekly.com)**

Nothing makes a site shine more than beautiful animations, and this piece gives excellent advice on how to create stunning transitions and animations. I really liked tip #3 "Accelerate and decelerate", it really made me think about how I construct my own animations and how I can improve them from now on.

### **[When life gives you lemons, write better error messages](https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f?ref=tailwindweekly.com)**

This is more of a meta article but I found it worthwhile to share. As developers, we sometimes have to write error messages that our users (and maybe other developers) see so knowing what makes a good error message is super important. This piece gives you a rundown of what makes a bad error message and how you can fix it.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-20.jpg)

****[attio](https://attio.com/?ref=tailwindweekly.com)**

This one is a truly elegant site 😍. Forget flashy colors and complicated layouts, this site's best features are its simplicity, refined typography, and so much beautiful white space. And if the screenshots are anything to go by then the tool interface looks even better!

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-21.jpeg)

### **[Built At Lightspeed](https://www.builtatlightspeed.com/?ref=tailwindweekly.com)**

This site is a compilation of templates, starters & UI kits, all filterable by tech stack, and many of them use Tailwind CSS. I think this is a great resource for when you want to build a project with something new but don't want to start from scratch.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Our friend **[Shruti](https://x.com/shrutibalasa/?ref=tailwindweekly.ongloat.com)**, the author of [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com), **is writing another book! This time about Tailwind CSS and it'll also be a video course.** You can **preorder it** right now at a discount [here](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com).

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.‌

**Designing on your own and want fancy icons? [Check out Iconfinder](https://tailwindweekly.link/iconfinder?ref=tailwindweekly.ongloat.com)**, they have the biggest and best selection of icons I have ever seen and at very affordable prices.

**[Lexington Themes ](https://lexingtonthemes.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com)**– Premium themes and UI kits crafted with Astro.js and Tailwind CSS.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-9.jpeg)
### Tailwind Weekly #115: new template, new application UIs, and new playground update 😍
URL: https://tailwindweekly.com/issue-115/
Last updated: 2025-09-09T14:12:51.000Z
Hello folks!

The Tailwind Labs team has been hard at work these past 2 weeks. They released a brand new changelog template and new application UI screens for Tailwind UI. I'm telling you, those are are machines 😂.

Now onto our usual content 😉.

## **🌟 News**

Say hello to the new Commit template! 🥳

![](https://tailwindweekly.com/content/images/image-15.jpg)

[](https://tailwindcss.com/plus/templates/commit?ref=tailwindweekly.com)[Commit](https://tailwindcss.com/plus/templates/commit?ref=tailwindweekly.com) is a beautiful one-page changelog template made with React and Next.js. It uses MDX for the content and it's pretty much plug-and-play:

> "No configuration variables or complex CSS to wrestle with, just open the markup in your editor and change whatever you want."

We also got new application UI page templates [for Tailwind UI](https://tailwindcss.com/plus/ui-blocks?ref=tailwindweekly.com#product-application-ui-page-examples) and they look stunning 💫

![](https://tailwindweekly.com/content/images/image-16.jpg)

Last but not least, now the Tailwind playground tells you the size of the [generated CSS](https://x.com/adamwathan/status/1643744057708126208?ref=tailwindweekly.ongloat.com). Pretty handy!

## **📚 Learning**

### **[Create Complex Transitions With Individual CSS Transform Properties](https://www.youtube.com/watch?v=ZAXSbjrOZwg&ref=tailwindweekly.ongloat.com)**

Here's CSS Weekly with another awesome tutorial, this time about the new transform CSS properties. For those of you who don't know, a while back if you wanted to scale or rotate an element you had to do it using the transform property. Well now, you can do it using dedicated properties which makes things more predictable and more readable in my opinion. Overall a great video!

### **[Parents counting children in CSS](https://www.matuzo.at/blog/2022/counting-children/?ref=tailwindweekly.com)**

Here's another incredible use case of the :has() selector: check how many children an element has! This article explains it all, it's very concise and to the point and has plenty of examples.

### **[Why we use Tailwind at ConvertKit](https://engineering.kit.com/2023/03/27/why-we-use-tailwind/?ref=tailwindweekly.com)**

This one is short and sweet. Learn why a big company like Convertkit loves Tailwind CSS. Want a tl;dr? *Because it simplifies just about everything when it comes to styling UI across our teams.*

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-17.jpg)

****[Hatica](https://www.hatica.io/?ref=tailwindweekly.com)**

Who knew screenshots could look that good? 😍 Hatica offers to make your developers more productive and they have a beautiful landing page to tell you all about it. It has a combination of pretty gradients, good-looking fonts, and lots of white-space.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-18.jpeg)

****[Dev Fonts](https://devfonts.gafi.dev/?ref=tailwindweekly.com)**

Dev fonts is a curated library of programming fonts. I'm a huge fan of these types of fonts and occasionally switch things up (currently using "[Dank Mono](https://philpl.gumroad.com/l/dank-mono?a=623146483&ref=tailwindweekly.ongloat.com)" and loving it). When I do, I browse the site and see what catches my fancy.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Our friend **[Shruti](https://x.com/shrutibalasa/?ref=tailwindweekly.ongloat.com)**, the author of [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com), **is writing another book! This time about Tailwind CSS and it'll also be a video course.** You can **preorder it** right now at a discount [here](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com).

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.‌

---

**Designing on your own and want fancy icons? [Check out Iconfinder](https://tailwindweekly.link/iconfinder?ref=tailwindweekly.ongloat.com)**, they have the biggest and best selection of icons I have ever seen and at very affordable prices.

---

**[Lexington Themes ](https://lexingtonthemes.lemonsqueezy.com/?aff=lVeE1&ref=tailwindweekly.ongloat.com)**– Premium themes and UI kits crafted with Astro.js and Tailwind CSS.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-9.jpeg)
### Tailwind Weekly #114: v3.3 is here 🤩
URL: https://tailwindweekly.com/issue-114/
Last updated: 2025-09-09T14:27:15.000Z
Hello folks!

We got a new Tailwind CSS release this week and it's packed! I love the new darker colors but wow those new gradient color stop positions are 🤯. See the news section for the entire list of new stuff!

P.S. I'm currently looking for a full-time job. I'm a frontend dev with 6+ years of experience in Vue (3 with React) & some Laravel. If you're looking for a seasoned frontend dev who loves Tailwind CSS and also wants to learn backend then [email me](mailto:vivian@redpixel.io) 😁.

Now onto our usual content 😉.

## **🌟 News**

Well folks after weeks of waiting, Tailwind CSS v3.3 has finally landed, and its awesome 🤩.

Here's [everything new](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com):

- [Extended color palette for darker darks:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com) New darker 950 shades for every color.
- [ESM and TypeScript support:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com) Write your config file using ESM or TypeScript.
- [Simplified RTL support with logical properties:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#simplified-rtl-support-with-logical-properties) Build layouts that adapt to different directions.
- [Fine-tune gradient color stop positions:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#fine-tune-gradient-color-stop-positions) Specify exactly where you want each color stop to go.
- [Line-clamp out of the box:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#line-clamp-out-of-the-box) Truncate multi-line text without a plugin.
- [New line-height modifier:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#new-line-height-shorthand-for-font-size-utilities) Set your font-size and line-height with one class.
- [CSS variables without the var()](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#css-variables-without-the-var): New shorthand syntax for arbitrary values.
- [Configurable font-variation-settings:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#configure-font-variation-settings-for-custom-font-families) Baked directly into your font-\* utilities.
- [New list-style-image utilities:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#new-list-style-image-utilities) So you can use horrible clip art for bullet points.
- [New hyphens utilities:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#new-hyphens-utilities) For fine-tuning hyphenation behavior.
- [New caption-side utilities:](https://tailwindcss.com/blog/tailwindcss-v3-3?ref=tailwindweekly.ongloat.com#new-caption-side-utilities) Title your tables with style.

My favorite feature of this release is the new darker color variants, they look quite elegant in my opinion 🧑🏻‍🎨, and will be very useful down the line. Can't wait for Tailwind UI to adopt them.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-12.jpg)

****[Avoiding <img> layout shifts: aspect-ratio vs width & height attributes](https://jakearchibald.com/2022/img-aspect-ratio/?ref=tailwindweekly.com)**

This one is an old one but still very relevant. I liked the rabbit hole the author got into trying to determine which one is best but in the end, as with most things, "it depends". I particularly prefer the aspect ratio method because it's faster and more customizable with Tailwind.

### **[A Practical Guide to Centering in CSS](https://stackdiary.com/centering-in-css/?ref=tailwindweekly.com)**

I swear every week I read a joke about how hard centering is in CSS but it's really not! It all depends on the scenario you got and this piece details and gives solutions to quite a lot of them. It uses regular CSS but you can definitely apply these tidbits with Tailwind CSS.

### **[Everything You Need to Know About the Gap After the List Marker](https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/?ref=tailwindweekly.com)**

Yet another list marker article but I promise this one is even cooler! It shows you all the limitations and gotchas of working with the ::marker pseudo-element and let me tell you, they're quite a few! Overall a great piece on a very niche topic.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-13.jpg)

****[liveblocks](https://liveblocks.io/?ref=tailwindweekly.com)**

Another week, another beautiful website! This one has a dark theme and lots of micro animations, but my favorite one is a cool flashlight effect when you hover over specific sections, it's so cool 😍.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-14.jpg)

****👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Our friend **[Shruti](https://x.com/shrutibalasa/?ref=tailwindweekly.ongloat.com)**, the author of [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com), **is writing another book! This time about Tailwind CSS and it'll also be a video course.** You can **preorder it** right now at a discount [here](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com).

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**Designing on your own and want fancy icons? [Check out Iconfinder](https://tailwindweekly.link/iconfinder?ref=tailwindweekly.ongloat.com)**, they have the biggest and best selection of icons I have ever seen and at very affordable prices.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-9.jpeg)
### Tailwind Weekly #113: we got a cool tip, a community win, and a self-paced workshop launch 🚀
URL: https://tailwindweekly.com/issue-113/
Last updated: 2025-09-09T14:29:53.000Z
Hello folks!

It seems the Tailwind Labs team is hard at work on the v3.3 version. Adam [asked the community for ideas](https://x.com/adamwathan/status/1638564233066561542?ref=tailwindweekly.ongloat.com) for naming new darker colors so expect a more detailed color palette in the upcoming release 🎨.

Now onto our usual content 😉.

## **🌟 News**

We got a couple of great news for the ecosystem this week but first, let's talk about a tip from Adam:

> Useful trick if you ever need to use inline styles because a value is coming from the database or something but also need to change those styles on hover or similar —

> Use those values to set CSS variables using inline styles, then use arbitrary values to read the variables 🧠 [pic.twitter.com/cucMnaeG2W](https://x.com/adamwathan/status/1638695713793011712/photo/1?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [March 23, 2023](https://x.com/adamwathan/status/1638695713793011712?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

This tip is extremely useful when working with components and user-generated content. Now you have the full power of Tailwind CSS even with custom colors!

Next, the news! The popular create-next-app tool now asks you if you want to install Tailwind CSS on every new project. It's still on the canary version but it'll hit the main version soon.

It's been so rewarding seeing Tailwind CSS become mainstream and this is another great addition to the community!

> create-next-app now asks if you want to start with Tailwind CSS instead of CSS Modules.

> Already out on canary, stable release soon!

> npx create-next-app@canary [pic.twitter.com/gkBztwCwWU](https://x.com/timneutkens/status/1636654046474805249?ref=tailwindweekly.com)— Tim (@timneutkens) [March 17, 2023](https://x.com/timneutkens/status/1636654046474805249?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

And last but not least, our friend Simon released his first [self-paced Tailwind CSS workshop](https://www.protailwind.com/workshops/multi-style-tailwind-components?ref=tailwindweekly.ongloat.com)! The main topic is working with "Multi-Style Tailwind Components" and I heard great reviews about the live version. Even better, it supports Purchasing Power Parity (PPP) so if you can get a discount depending on where you live.

## **📚 Learning**

###   
**[Create a Direction Aware Hover Effect Using CSS :has() Selector](https://www.youtube.com/watch?v=gnQPS0hogkE&ref=tailwindweekly.com)**

This is another great video from CSS Weekly, showing the power of the :has() selector (or "parent" selector as some call it), this time with hover effects. I really love CSS weekly videos and this one is outstanding!

### **[Everything You Need to Know About the Gap After the List Marker](https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/?ref=tailwindweekly.com)**

I first learned about :marker when Tailwind CSS introduced utility classes for it and then realized how customizable it can be. This piece takes it a step further and explains everything you need to know about the little gap between the list bullet icon and the content.

### **[Fancy Image Decorations: Outlines and Complex Animations](https://css-tricks.com/fancy-image-decorations-outlines-and-complex-animations/?ref=tailwindweekly.com)**

This is the final article on a 3 part series about making fancy image effects with CSS. This last one is all about using the outline property and the examples it has are 🤯.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-10.jpg)

****[Sprig](https://sprig.com/?ref=tailwindweekly.com)**

Sprig is an "in-product research platform" and its landing page reflects just that. You won't find any "techie" design elements here, instead, you'll see it uses a tried and true layout, beautiful icons, and very elegant typography. The page is not flashy it more than makes up for it with its great readability.

### **🎁 Resource**  

![](https://tailwindweekly.com/content/images/image-11.jpg)

****[Sailboat UI](https://sailboatui.com/?ref=tailwindweekly.com)**

Sailboat is a component library made with Tailwind CSS and Alpine.js. It includes a lot of components like avatars, progress bars, modals, and many more. I really like their design choices, the components look clean and consistent.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Our friend **[Shruti](https://x.com/shrutibalasa/?ref=tailwindweekly.ongloat.com)**, the author of [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com), **is writing another book! This time about Tailwind CSS and it'll also be a video course.** You can **preorder it** right now at a discount [here](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com).

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**[Get console errors right on your page.](https://tailwindweekly.link/toastlog?ref=tailwindweekly.ongloat.com)** Be aware of errors that are happening on your website without having to open the browser's console. See logs in a toast notification format and find out bugs you didn't know existed!

---

**Designing on your own and want fancy icons? [Check out Iconfinder](https://tailwindweekly.link/iconfinder?ref=tailwindweekly.ongloat.com)**, they have the biggest and best selection of icons I have ever seen and at very affordable prices.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-9.jpeg)
### Tailwind Weekly #112: we got a handbook launch, a Tailwind animation guide, and more 🤓!
URL: https://tailwindweekly.com/issue-112/
Last updated: 2025-09-09T14:34:02.000Z
Hello folks!

The Tailwind Labs team has been quiet recently but the community has been picking up! Last time we got a book and video course preorder and now we got a handbook launch! See the news section for more info.

Now onto our usual content 😉.

## **🌟 News**

This week we got a community launch from [Surjith](https://x.com/surjithctly?ref=tailwindweekly.ongloat.com)! He released **the "Tailwind CSS Notion Handbook"**.

He compiled all his knowledge from years of using Tailwind CSS and put it on a Notion workspace, some of the content includes:

- Tailwind CSS Basics
- 30 Tailwind CSS Tips
- 10 Bonus Tips
- Production Checklist
- UI Kits & Templates
- 20+ Tools & Resources

It's a paid product but very affordable. Right now its priced at $9 if you use the code LAUNCH75.

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-6.jpeg)

****[Different ways to get CSS gradient shadows](https://css-tricks.com/different-ways-to-get-css-gradient-shadows/?ref=tailwindweekly.com)**

This great piece shows you how to do complex gradient shadows with CSS and features both non-transparent and transparent solutions, along with adding a border-radius. The process is complex but can really make your site "pop"!

### **[How to create custom CSS Animations in TailwindCSS](https://5balloons.info/how-to-create-custom-css-animations-in-tailwindcss/?ref=tailwindweekly.com)**

Tailwind CSS comes with built-in animations like spin and pulse but you can also add your own! This article outlines exactly how to do that and uses a loading bar animation as an example.

### **[Debug your CSS with a ??? utility](https://www.shaunchander.me/debug-your-css-with-a-utility?ref=tailwindweekly.com)**

The author posted this tip on the official Tailwind CSS discord chat and I found it very useful. It's basically the "add a border to everything" trick but with a clever class name. I think it would be a great addition to any starter project.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-7.jpg)

****[Scale AI](https://scale.com/?ref=tailwindweekly.com)**

Some people say 2023 will be the year of AI and now we're getting a lot of AI services with beautiful marketing pages. Scale AI is one of them!

I really like the dark theme with the colorful and mouse-controlled animations. It makes it look really futuristic 🧑🏻‍🚀. And that typography is just beautiful 😍.

For the curious, here's what Scale AI does:

*Scale delivers high quality training data for AI applications such as self-driving cars, mapping, AR/VR, robotics, and more.*

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-8.jpg)

****[VantaJS](https://www.vantajs.com/?ref=tailwindweekly.com)**

If there's one thing I love about web development, is beautiful animations so when I found VantaJS I was thrilled! It's a library to helps you generate custom background animations and its incredibly flexible. Some of the example animations even look like videos! Overall, a great way to spice up your next project.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Our friend **[Shruti](https://x.com/shrutibalasa/?ref=tailwindweekly.ongloat.com)**, the author of [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com), **is writing another book! This time about Tailwind CSS and it'll also be a video course.** You can **preorder it** right now at a discount [here](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com).

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**[Polypane](https://polypane.app/?ref=redpixel)** is an excellent tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-9.jpeg)
### Tailwind Weekly #111: new upcoming Tailwind CSS book, preorders open! 📘
URL: https://tailwindweekly.com/issue-111/
Last updated: 2025-09-10T06:07:06.000Z
Hello folks!

It's been a quiet week on the Tailwind ecosystem but the Tailwind Labs team has been hard at work on Tailwind UI adding [tons of new components ](https://x.com/steveschoger/status/1628791774821982209?ref=tailwindweekly.ongloat.com)behind the scenes. I think Tailwind UI is just getting better and better!

Now onto our usual content 😉.

## **🌟 News**

Our friend Shruti, the author of the popular [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com) book it's now writing another book (and video course), and this time **it's all about Tailwind CSS 🚀**

I personally read her first book and it was full of great tips about Flexbox and CSS Grid, even though I have been coding CSS for 10 years now I did learn quite a few things from it.

**The book and video course are coming in July but [you can pre-order them today](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.ongloat.com) at a discount.** It even supports purchase power parity so you will pay less depending on where you live. A win-win for sure!

> Took the leap of faith and set up the pre-order page.

> 🎉 Level up with Tailwind CSS 🎉

> eBook + video course will be released in July. But if you pre-order now, it’ll give me a big boost![https://t.co/Nt0SG0Nysz](https://shrutibalasa.gumroad.com/l/level-up-with-tailwind-css?ref=tailwindweekly.com)

> Hoping to help lots of devs with this book! Kindly RT for reach [pic.twitter.com/8CSFaamxcp](https://x.com/shrutibalasa/status/1627637155085557762?ref=tailwindweekly.com)— Shruti Balasa (@shrutibalasa) [February 20, 2023](https://x.com/shrutibalasa/status/1627637155085557762?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

## **📚 Learning**

![](https://tailwindweekly.com/content/images/image-2.jpeg)

****[5 ways CSS :has() can make your HTML forms even better](https://austingil.com/css-has-with-html-forms/?ref=tailwindweekly.com)**

The new :has() pseudo-class has been making waves for the last year and this piece is a great example of how versatile it can be. You can do everything from adding custom focus styles to specific inputs to conditionally render content based on selected inputs, the sky is the limit!

### **[How To Create Advanced Animations With CSS](https://www.smashingmagazine.com/2022/10/advanced-animations-css/?ref=tailwindweekly.com)**

This one is a great primer from Smashing Magazine and its main angle is using the simple but powerful cubic-bezier function to create stunning CSS animations.

### **[How to Safely Share Your Email Address on a Website](https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/?ref=tailwindweekly.com)**

Learn how to properly share your email address without getting it scraped and spammed to hell, a short but very useful article.

## **💅 Showcase**

![](https://tailwindweekly.com/content/images/image-3-3.jpeg)

****[FoodNoms](https://foodnoms.com/?ref=tailwindweekly.com)**

FoodNoms is a calorie tracker iOS app and it's one I personally use! Their marketing website is made with Tailwind and it has a very minimalistic vibe with tons of spacing, beautiful color tones, and subtle animations. Definitely a great example of an app marketing page.

## **🎁 Resource**

![](https://tailwindweekly.com/content/images/image-4.jpeg)

****[Satori](https://github.com/vercel/satori?ref=tailwindweekly.com)**

Satori's a library that helps you to create SVGs from HTML/CSS. A popular use case for it is programmatically creating social media images and the part is that it has Tailwind CSS support, albeit experimental. If you have a blog or content-heavy website and want to generate your social media images then you should play around with Satori.

## **👌 Promoted links**

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the [Complete Guide to CSS Flex and Grid](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)** ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**[Buttondown — email subscriptions for hackers and creators](https://buttondown.com/?ref=tailwindweekly.ongloat.com)**. Why do indie hackers love Buttondown? It's simple: no futzing with embeds, no weird iFrames or styles to fit into your existing static site's theme or CMS, just a good old-fashioned <form> tag that you can style to your heart's content. **Just plug in Buttondown, start collecting subscribers, and get back to business**.

---

**Caleb Porzio's ​[Make VS Code Awesome](https://calebporzio.gumroad.com/l/SFYKpD/?a=623146483&ref=tailwindweekly.ongloat.com)** course is an excellent course on customizing and improving your VS Code experience. I bought it recently and it completely changed how I set up and use VS Code, for the better!

---

**Ariyh is a newsletter about marketing tactics based on science**. Every week you get 3-min marketing recommendations based on the latest scientific research from top business schools. [Subscribe for $0 here](https://links.swapstack.co/2l7?ref=tailwindweekly.ongloat.com).

## **✌️ Partners**

**[CSS Simplified by Shruti Balasa](https://shrutibalasa.substack.com/?ref=tailwindweekly.ongloat.com)**: One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

**[TypeScript Weekly](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com)**: the best TypeScript links every week, right in your inbox.

---

**[This Week In React](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com)**: the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/image-5.jpeg)
### Tailwind Weekly #110: we got upcoming Tailwind UI, a new course, and Remix support 🤩
URL: https://tailwindweekly.com/issue-110/
Last updated: 2025-09-10T06:32:10.000Z
Hello folks!

I'll keep the intro brief today. It's the end of an era my friends, Internet Explorer 11 is [dead and buried](https://www.cbsnews.com/news/microsoft-permanently-disables-internet-explorer/?ref=tailwindweekly.ongloat.com) 💀.

Now onto our usual content 😉.

## **🌟 News**

The Tailwind Labs team is hard at work creating new marketing components for Tailwind UI. Steve shared the following image as a sneak peek [on Twitter](https://x.com/steveschoger/status/1623742445958705153?ref=tailwindweekly.ongloat.com) and the new sections look stunning!

![](https://tailwindweekly.com/content/images/image-1.jpeg)

Also, our friend Simon recently released the [first self-paced workshop](https://twitter.com/simonswiss/status/1621191725577560066?s=12&t=wBP1ujZ0lF2N1DZ4I-Sb7A&ref=tailwindweekly.ongloat.com) for his [ProTailwind course](https://www.protailwind.com/?ref=tailwindweekly.ongloat.com). The [workshop](https://www.protailwind.com/workshops/multi-theme-strategy?ref=tailwindweekly.ongloat.com) is about adding multi-theme support to Tailwind projects, definitely a popular topic.

Lastly, [Remix](https://remix.run/?ref=tailwindweekly.ongloat.com) now has [built-in Tailwind CSS support](https://github.com/remix-run/remix/releases/tag/remix%401.13.0?ref=tailwindweekly.ongloat.com)! All you need to do is enable a flag on your config and you're good to go.
### Tailwind Weekly #108: these new Tailwind UI hero sections are 🔥👌
URL: https://tailwindweekly.com/issue-108/
Last updated: 2025-09-11T04:25:31.000Z
_No content available._
### Tailwind Weekly #107: say hello to the new Protocol template!
URL: https://tailwindweekly.com/107/
Last updated: 2025-09-22T14:53:55.000Z
Hello folks!

We got the new template the Tailwind Labs team has been [teasing](https://x.com/jamesm/status/1602279148873031680?ref=tailwindweekly.ongloat.com) us with for the past week and it's quite the looker! It's a documentation template made with Next.js and it's ready to use out of the box. Check out the news section for more info.

Also, this will be our last issue of the year 🎄, we'll take a break, recharge, and then we'll be back in January 😁.

Now onto our usual content 😉.

## 🌟 News

![](https://tailwindweekly.com/content/images/2025/09/image.jpeg)

We got a new template! Say hello to [Protocol](https://tailwindcss.com/plus/templates/protocol?ref=tailwindweekly.com), a beautiful starter kit for building amazing API reference websites and let me tell you, it's full of little but lovely design details but my favorite is the sidebar animations 😍. Here's the [demo](https://protocol.tailwindui.com/?ref=tailwindweekly.ongloat.com).

Quoting the Tailwind Labs team:

> Powered by Next.js and MDX and styled with Tailwind CSS, it's built exactly the way we'd build our own API reference documentation.

The template has all the bells and whistles you would want on a documentation template like a dark mode, code syntax highlighting (with [Shiki](https://github.com/shikijs/shiki?ref=tailwindweekly.ongloat.com)), and Algolia integration, and it even has a new icon set made specifically for it, a la [Heroicons](https://heroicons.com/?ref=tailwindweekly.ongloat.com).

![](https://tailwindweekly.com/content/images/2025/09/image-1.jpeg)

Beautiful icons for a beautiful template

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/css2022-og.jpg)

### [The State of CSS 2022](https://2022.stateofcss.com/en-US/?ref=tailwindweekly.com)

First and foremost, the State of CSS 2022 survey results are in! Tailwind CSS led the way with 28.3% of people saying they would use it again 🥳 and 19.5% saying they haven't used it but are interested 🤩. 

### [Setting up a screen reader testing environment on your computer](https://www.sarasoueidan.com/blog/testing-environment-setup/?ref=tailwindweekly.com)

When working with web accessibility nothing compares to having your own screen reader set up locally but alas, not many people know the ins and outs on how to do it properly and without any gotchas. This article is an excellent guide to do that, it's very detailed and it even has screenshots so you know exactly what to do for every step.

### [Newer Things to Know About Good Ol’ HTML Lists](https://css-tricks.com/newer-things-to-know-about-good-ol-html-lists/?ref=tailwindweekly.com)

This one is short and sweet, you get to learn some new stuff about the list HTML tag, including accessibility concerns and how the new <menu> HTML element compares to it.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/share_img.jpg)

### [Paragraph](https://paragraph.xyz/?ref=tailwindweekly.com)

Paragraph allows you to build "Web3-powered newsletters" and like other web3 projects I have seen, it goes all out on its design 💅. You got beautiful gradients, lovely micro animations, dark but pleasing color palettes, and of course, pretty screenshots! I really liked how they took Tailwind UI sections as a base but customized the heck out of them and now look very on-brand.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/starter-markdown.jpeg)

### [Maizzle starter for markdown](https://github.com/maizzle/starter-markdown?ref=tailwindweekly.com)

I have featured [Maizzle ](https://maizzle.com/?ref=tailwindweekly.ongloat.com)a few times here, it's basically Tailwind CSS but for emails and it's very very good. They recently released this project starter that allows you to write emails with markdown and I have to say I'm impressed!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**Ankur Tyagi's** [**The Prime Guide For Next Gen Developer**](https://theankurtyagi.gumroad.com/l/nextgendev?a=623146483&ref=tailwindweekly.ongloat.com) contains everything you need in a typical career path of a **software engineer or developer.** From starting at a company as a fresher or new grad to a senior software engineer.

---

**Caleb Porzio's ​**[**Make VS Code Awesome**](https://calebporzio.gumroad.com/l/SFYKpD/?a=623146483&ref=tailwindweekly.ongloat.com)course is an excellent course on customizing and improving your VS Code experience. I bought it recently and it completely changed how I set up and use VS Code, for the better!

---

Many of the most impactful leaders **know exactly** what they need to accomplish before the day starts. They use productivity apps like Sunsama to help them organize their weekly goals and smaller tasks to **become the most productive version of themselves**. [Signup for a 14-day trial (no credit card needed)](https://links.swapstack.co/mfc?ref=tailwindweekly.ongloat.com)

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee.jpeg)
### Tailwind Weekly #106: Tailwind CSS has its own Wikipedia page folks 😎!
URL: https://tailwindweekly.com/106/
Last updated: 2025-09-22T15:04:46.000Z
Hello folks!

We were pleasantly surprised this week when Adam [tweeted](https://twitter.com/adamwathan/status/1599854053789351936?ref=tailwindweekly.ongloat.com) that Tailwind CSS has its own [Wikipedia page](https://en.wikipedia.org/wiki/Tailwind%5FCSS?ref=tailwindweekly.ongloat.com) now! I guess popularity does has its perks 😉.

Now onto our usual content 😉.

## 🌟 News

> I'm afraid to even share this 😂 but playing around with ideas for what it might look like to do more of your Tailwind customization/configuration/extensions directly in CSS instead of in JS.

> Left is what you do now, right is an idea of doing the same thing in "CSS": [pic.twitter.com/lBiS3KWkLm](https://t.co/lBiS3KWkLm?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [December 3, 2022](https://twitter.com/adamwathan/status/1599082063441068032?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

It was kind of a quiet week again but Adam did tease us with a possible upcoming feature. Imagine being able to define custom and dynamic utility classes right there on your CSS file. Surreal 🤯.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/social_smashingmagazine.com-document-object.jpeg)

### [Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide](https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/?ref=tailwindweekly.com)

This is a great guide on the upcoming CSSOM View Module API and the kind of geometry you can do with the properties it introduces. Things like a "scroll to top" component, an infinite scrolling module, and even trigger animations on scroll

### [The large, small, and dynamic viewport units](https://web.dev/viewport-units/?ref=tailwindweekly.com)

Have you ever tried to create a hero element that takes up the whole height and it breaks on iOS? Well, these new dynamic viewport units attempt to fix that! The best part is that these units have good browser support and can be used starting today if you have Chrome 108 or later.

### [6 Steps to Improve HTML Images For Users & Developers](https://austingil.com/better-html-images/?ref=tailwindweekly.com)

The first thing a dev does when doing page speed optimization is optimize images. This article explains how to do that efficiently by using srcset and the picture element. Overall a good and simple guide to working with images in HTML.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/open-graph.jpg)

### [Spinal CMS](https://spinalcms.com/?ref=tailwindweekly.com)

This week's showcase is the landing page of the headless CMS Spinal. I find its use of gradients and colors very lovely and the customized screenshots and micro-animations add a very nice touch.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwindcss-plugin-starter.jpeg)

### [tailwindcss-plugin-starter](https://github.com/cossssmin/tailwindcss-plugin-starter?ref=tailwindweekly.com)

I wanted to mention this resource again because it's so good. It's a base project for building a Tailwind CSS plugin! It has everything you need to build a plugin right away, including examples of the Tailwind plugin API.

Creating a Tailwind plugin would be a great Christmas gift to the community! If you do create one feel free to reply to this email and I'll add it in an upcoming issue 😁.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**Ankur Tyagi's** [**The Prime Guide For Next Gen Developer**](https://theankurtyagi.gumroad.com/l/nextgendev?a=623146483&ref=tailwindweekly.ongloat.com) contains everything you need in a typical career path of a **software engineer or developer.** From starting at a company as a fresher or new grad to a senior software engineer.

---

**Caleb Porzio's ​**[**Make VS Code Awesome**](https://calebporzio.gumroad.com/l/SFYKpD/?a=623146483&ref=tailwindweekly.ongloat.com)course is an excellent course on customizing and improving your VS Code experience. I bought it recently and it completely changed how I set up and use VS Code, for the better!

---

Many of the most impactful leaders **know exactly** what they need to accomplish before the day starts. They use productivity apps like Sunsama to help them organize their weekly goals and smaller tasks to **become the most productive version of themselves**. [Signup for a 14-day trial (no credit card needed)](https://links.swapstack.co/mfc?ref=tailwindweekly.ongloat.com)

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-1.jpeg)
### Tailwind Weekly #105: Learn all about color formats, the history of CSS and :where() 🤓!
URL: https://tailwindweekly.com/tailwind-weekly-105-learn-all-about-color-formats-the-history-of-css-and-where/
Last updated: 2025-09-22T15:13:12.000Z
Hello folks!

It's been a quiet week on Tailwind CSS land, the Tailwind Labs team is probably recharging and taking a breather, which is very well deserved ❤️!

I did want to remind you that [our friend Simon](https://twitter.com/simonswiss?ref=tailwindweekly.ongloat.com) is continually posting [cool short videos](https://twitter.com/simonswiss/status/1598079107153399809?ref=tailwindweekly.ongloat.com) about different Tailwind features, be sure to follow him on Twitter!

Now onto our usual content 😉.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/social_joshwcomeau.com-color-formats-i.jpeg)

### [Color Formats in CSS - hex, rgb, hsl, lab](https://www.joshwcomeau.com/css/color-formats/?ref=tailwindweekly.com)

Another incredible guide from Joshua, this guy is a machine! This is everything you need to know about working with colors in CSS plus a look at what's coming soon to evergreen browsers. Overall, a great read!!

### [The evolution of scalable CSS](https://frontendmastery.com/posts/the-evolution-of-scalable-css/?ref=tailwindweekly.com)

This is a great recap of how CSS first started, how it has evolved over other years, how people have come up with strategies on how to better use it, and how we got to the utility classes trend led by Tailwind CSS. I have to admit it made me quite nostalgic!

### [CSS :where() to replace complex multi-selectors](https://helloanselm.com/writings/css-where-to-replace-complex-multi-selectors?ref=tailwindweekly.com)

Another great post about the use of :where() to optimize your CSS selectors. :where allows you to stop repeating yourself when writing custom CSS and [its browser support](https://caniuse.com/?search=where&ref=tailwindweekly.ongloat.com) is excellent.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/phiilu.com.jpeg)

### [Florian Kapfenberger](https://phiilu.com/?ref=tailwindweekly.com)

Another personal site this week but this one is special, it's so colorful! Even tho it uses Tailwind CSS default colors, the combinations really pop. Also, the dark mode is gorgeous and the big font really helps with readability. Overall a great personal site example!

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tinymotion.jpeg)

### [Tinymotion](https://github.com/lepikhinb/tinymotion?ref=tailwindweekly.com)

Love Tailwind, Vue, and animations? Then you'll love this library! Tinymotion is a small animation library made for Vue.js and it's compatible with Tailwind CSS utility classes. The setup is pretty simple so you can get started with it pretty quickly!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

**Ankur Tyagi's** [**The Prime Guide For Next Gen Developer**](https://theankurtyagi.gumroad.com/l/nextgendev?a=623146483&ref=tailwindweekly.ongloat.com) contains everything you need in a typical career path of a **software engineer or developer.** From starting at a company as a fresher or new grad to a senior software engineer.

---

**Caleb Porzio's ​**[**Make VS Code Awesome**](https://calebporzio.gumroad.com/l/SFYKpD/?a=623146483&ref=tailwindweekly.ongloat.com)course is an excellent course on customizing and improving your VS Code experience. I bought it recently and it completely changed how I set up and use VS Code, for the better!

---

Many of the most impactful leaders **know exactly** what they need to accomplish before the day starts. They use productivity apps like Sunsama to help them organize their weekly goals and smaller tasks to **become the most productive version of themselves**. [Signup for a 14-day trial (no credit card needed)](https://links.swapstack.co/mfc?ref=tailwindweekly.ongloat.com)

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-2.jpeg)
### Tailwind Weekly #104: new feature sneak peeks and goals for v4 😎
URL: https://tailwindweekly.com/104/
Last updated: 2025-09-22T15:21:58.000Z
Hello folks!

For our friends in the US, happy thanksgiving weekend 🥳, I hope you have a wonderful time with your family and friends and that you rest and take it easy for the rest of the weekend.

For our other friends, happy black friday/cyber week deals week 💸, this weekend is gonna be packed with LOTS of deals and sales so be sure to prepare your wallet 🤣.

Now onto our usual content 😉.

## 🌟 News

We got a few sneak peeks this week of some upcoming features to Tailwind CSS, things like adding line height as a [modifier of font size](https://twitter.com/adamwathan/status/1593693857832730625?ref=tailwindweekly.ongloat.com), eg: text-lg/8 and using CSS variables as arbitrary values without having to wrap them in var(...), eg: bg-\[--color-var\].

Adam also [shared his goals for Tailwind v4](https://twitter.com/adamwathan/status/1594874850178367488?ref=tailwindweekly.ongloat.com), which are:

1. Simplify mental model, fewer framework-specific concepts
2. Less configuration, without less power
3. Fewer dependencies
4. 10x faster

I think those are very ambitious but totally doable goals so I'm actually pretty pumped for v4 💪.

## 📚 Learning

### [The easiest way to get started with CSS Grid](https://www.youtube.com/watch?v=sAsX9e2NzZ4&ref=tailwindweekly.ongloat.com)

If you still find some of CSS grid's features confusing then this video is for you. In it, Zoran from [CSS weekly](https://twitter.com/cssweekly?ref=tailwindweekly.ongloat.com) breaks down features like template areas, columns and rows, and the fractional unit fr in a very approachable way.

### [An Interactive Guide to Flexbox in CSS](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/?ref=tailwindweekly.com)

Another incredible primer from [Josh Comeau](http://joshwcomeau/?ref=tailwindweekly.com)! This one is a fully featured and interactive guide to Flexbox, this is THE guide to share with your junior dev and backend dev friends who want to master Flexbox.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/social_simonswiss.com-simonswiss-web-.jpg)

### [Simon Swiss](https://simonswiss.com/?ref=tailwindweekly.com)

I have featured [Simon](https://twitter.com/simonswiss?ref=tailwindweekly.ongloat.com) a few times here because he's an incredibly talented creator and developer and now I wanted to feature his newly released personal site. I loved the color choices and the small interaction animations, also that corgi mascot is cute as hell 😍. 

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwind-fontawesome.jpeg)

### [tailwind-awesome](https://github.com/mattpfeffer/tailwind-fontawesome?ref=tailwindweekly.com)

This Tailwind CSS plugin does one thing but does it very well, it allows you to integrate Font Awesome and generates some useful utility classes for you. The best thing about it is that it's currently compatible with both Tailwind v2 and v3 and it also supports Font Awesome 6!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

[**The Tech Resume Inside-Out**](https://tailwindweekly.link/tech-resume?ref=tailwindweekly.ongloat.com) **\- Learn what a good developer resume looks like, and how to write one.** This is a practical guide written by the people who do the resume screening: engineering managers and technical recruiters working at tech companies.

---

[**Dracula PRO**](https://tailwindweekly.link/dracula-theme?ref=tailwindweekly.ongloat.com) is a color scheme and UI theme **tailored for programming**. Made for terminal emulators, code editors, and syntax highlighters. Designed to be aesthetically pleasing while **keeping you focused**.

---

[**Smartr Daily**](https://links.swapstack.co/jrx?ref=tailwindweekly.ongloat.com) **is the essential newsletter for curious minds**. By sourcing the smartest articles on the Web it brings you **thought-provoking ideas** and insights delivered straight to your inbox daily!

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-3.jpeg)
### Black Friday/Cyber Week 2022 Deals for the Tailwind CSS Community
URL: https://tailwindweekly.com/black-friday-cyber-week-2022-deals-for-the-tailwind-css-community/
Last updated: 2025-09-22T15:34:28.000Z
Hello folks!

We all know this week we'll be seeing LOTS of sales due to Black Friday and wanting to join the fun I decided to compile a list of deals that I think could be useful to Tailwind CSS developers.

The regular newsletter will be coming this Saturday as usual.

Now, here's the list!

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Let's start with the [Tailwind Labs bundle](https://tailwindui.com/all-access?ref=tailwindweekly.ongloat.com)!

![](https://tailwindweekly.com/content/images/2025/09/image--1-.jpeg)

You'll get access to:

- Over [500 Tailwind CSS component examples](https://click.convertkit-mail.com/k0uq3dmn50t6hd2z775cl/25h2hoh7mpgn3qu3/aHR0cHM6Ly90YWlsd2luZHVpLmNvbS9jb21wb25lbnRz?ref=tailwindweekly.ongloat.com) in HTML, React, and Vue
- All of their [website templates](https://click.convertkit-mail.com/k0uq3dmn50t6hd2z775cl/qvh8h7h8kmvqd3hl/aHR0cHM6Ly90YWlsd2luZHVpLmNvbS90ZW1wbGF0ZXM=?ref=tailwindweekly.ongloat.com), built with Tailwind CSS + Next.js
- The [218-page Refactoring UI ebook](https://click.convertkit-mail.com/k0uq3dmn50t6hd2z775cl/g3hnh5heq8nxmvir/aHR0cHM6Ly93d3cucmVmYWN0b3Jpbmd1aS5jb20vI3RoZS1ib29r?ref=tailwindweekly.ongloat.com)
- All three in-depth Refactoring UI [video tutorials](https://click.convertkit-mail.com/k0uq3dmn50t6hd2z775cl/9qhzhnhg5vxnzku9/aHR0cHM6Ly93d3cucmVmYWN0b3Jpbmd1aS5jb20vI3ZpZGVvLXR1dG9yaWFscw==?ref=tailwindweekly.ongloat.com)
- All of the Refactoring UI bonus content, including [color palettes](https://click.convertkit-mail.com/k0uq3dmn50t6hd2z775cl/3ohphkhqp5rv4our/aHR0cHM6Ly93d3cucmVmYWN0b3Jpbmd1aS5jb20vI2NvbG9yLXBhbGV0dGVz?ref=tailwindweekly.ongloat.com), [font recommendations](https://click.convertkit-mail.com/k0uq3dmn50t6hd2z775cl/n2hohvhn79ge6xf6/aHR0cHM6Ly93d3cucmVmYWN0b3Jpbmd1aS5jb20vI2ZvbnQtc3VnZ2VzdGlvbnM=?ref=tailwindweekly.ongloat.com), and an exclusive [icon library](https://click.convertkit-mail.com/k0uq3dmn50t6hd2z775cl/reh8hohq6l7nwec2/aHR0cHM6Ly93d3cucmVmYWN0b3Jpbmd1aS5jb20vI2N1c3RvbS1pbGx1c3RyYXRlZC1pY29ucw==?ref=tailwindweekly.ongloat.com)

The "**CSS for Javascript Developers**" course made by Josh, which I think is the best CSS course ever, is having a [Black Friday sale](https://css-for-js.dev/?ref=tailwindweekly.ongloat.com). **It's a whopping 50% off!**

**Polypane**, a browser for developers who want to build responsive, accessible, and performant websites,[is offering 30% off their yearly plans](https://a.paddle.com/v2/click/39438/124142?link=3792&ref=tailwindweekly.ongloat.com). I**f you build responsive websites, this is a must-have tool.**

**Beyond Code, the makers of Windy and Devtools for Tailwind CSS,** is having [a sale on all their products with up to 70% off](https://a.paddle.com/v2/click/103161/124142?link=3530&ref=tailwindweekly.ongloat.com) on some of them. They're also famous for their Laravel-specific dev tools apps and all their products are super high quality!

**Laracasts,** the Netflix for Laravel developers, is having a [45% off sale on all plans](https://laracasts.com/sales/black-friday?ref=tailwindweekly.ongloat.com) including the lifetime deal!

**Debugging CSS**, the book that will help you improve your debugging CSS skills and **reduce the time you spend on CSS bugs** is now just [$16.5](https://tailwindweekly.link/debuggingcss?ref=tailwindweekly.ongloat.com) by using the code nov22 .

**Iconfinder**, my preferred place to buy **custom and unique icons and illustrations**, is offering [70% off on the first month](https://www.iconfinder.com/discountcode/blackfriday22?ref=vivgui) of any monthly plan.

**Inspect Flow, the complete developer tool for Tailwind CSS**, is offering 50% off and it's a one-time fee. You can check it out [here](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com).

**Tower, the excellent git client and the one I personally use**, is offering [50% off any plan](https://www.git-tower.com/?via=vivian&ref=tailwindweekly.ongloat.com) this week.

**SetApp**, which offers a large collection of **powerful Mac apps** available by subscription, is offering [20% off of their yearly plan](https://setapp.sjv.io/3Pnjjv?ref=tailwindweekly.ongloat.com).

**Caleb Porzio's ​Make VS Code Awesome** course is [50% Off for Black Friday](https://calebporzio.gumroad.com/l/SFYKpD/BFRI21?a=623146483&ref=tailwindweekly.ongloat.com)! This is an excellent course on how to customize and improve your VS Code experience.

[**Shruti Balasa**](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com)**'s** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com) **ebook** is on sale and you can get 60% off by using code BlackFriday22.

**Wes Bos's Beginner Javascript course** is [50% off](https://beginnerjavascript.com/?ref=tailwindweekly.ongloat.com) this week only!

[**DevUtils**](https://devutils.com/?ref=tailwindweekly.ongloat.com)**, an all-in-one toolbox for developers**, is 50% OFF with code BLACKFRIDAY\_2022

**Florian Pop's** [**"Ten++ Ways to Make Money as a Developer" ebook**](https://florinpop17.gumroad.com/l/makemoneydev?a=433022067&ref=tailwindweekly.ongloat.com) is on sale, get 50% off by using code BLACKFRIDAY2022

**Ankur Tyagi's** [**The Prime Guide For Next Gen Developer**](https://theankurtyagi.gumroad.com/l/nextgendev?a=623146483&ref=tailwindweekly.ongloat.com), which contains everything you need in a typical career path of a **software engineer or developer,** is on sale for 50% off.

**Ahmad Awais's** [**NodeCLI.com**](http://nodecli.com/?utm%5Fsource=tailwind-weekly.beehiiv.com) **and** [**VSCode.pro**](http://vscode.pro/?ref=tailwindweekly.com) **courses** are on sale for 80% off, no code necessary.

[**RightFont**](https://rightfontapp.com/?ref=tailwindweekly.ongloat.com)**, the ultimate font manager app for Mac** is offering 20% off on all their plans.
### Tailwind Weekly #103: Tailwind CSS is now the most popular CSS framework on NPM 🚀
URL: https://tailwindweekly.com/103/
Last updated: 2025-09-22T15:44:07.000Z
Hello folks!

What a milestone, Tailwind CSS recently surpassed Bootstrap and [became the most popular CSS framework](https://twitter.com/adamwathan/status/1590877529141051392?ref=tailwindweekly.ongloat.com) on NPM 🎉, with 4.5 MILLION weekly downloads 🤯.

This is huge! It means more and more people are using and loving Tailwind ❤️. Now I can confidently say that Tailwind became mainstream 🤣.

Now onto our usual content 😉.

## 🌟 News

> 🚀 Shipped \`blocklist\` support in Tailwind CSS v3.2.4 today so you can easily prevent specific unwanted classes from being generated!

> Really handy if you run a website selling shipping container pools but don't actually use the \`container\` class 🫣[https://t.co/I4h0Gpa4CT](https://t.co/I4h0Gpa4CT?ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-103-tailwind-css-is-now-the-most-popular-css-framework-on-npm) [pic.twitter.com/Ftxv2jSndQ](https://t.co/Ftxv2jSndQ?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [November 11, 2022](https://twitter.com/adamwathan/status/1591147430070091776?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

Shopify recently released a new blocklist feature. It basically allows you to define a list of classes you *never* want Tailwind to generate. Remember that Tailwind CSS generated its classes by parsing your code and looking for matches, so like the example Adam gave, if you have the word container on your page, then the container class will be added to your CSS even if you're not using the class. This new feature allows you "block" that generation.

## 📚 Learning

### [Tailwind CSS v3.2 Crash Course - Build a responsive conference landing page](https://www.youtube.com/watch?v=ei20HfTloFE&ref=tailwindweekly.com)

Our friend Shruti just released a crash course on the latest version of Tailwind CSS and it's a must-watch! In a little less than an hour, she walks you through how to create a conference signup site that is completely responsive and has very minimal custom CSS. I think the video is both a code-along and a tutorial and a great link to share for people new to Tailwind or who want to learn about all the new stuff from v3.2.

### [How to use Tailwind CSS in a Shopify Hydrogen Project](https://www.youtube.com/watch?v=O3%5FqDL4Ls%5Fs&ref=tailwindweekly.com)

Shopify recently released a new react framework for e-commerce headless site development called [Hydrogen](https://hydrogen.shopify.dev/?ref=tailwindweekly.ongloat.com) and the popular [Shopify development Youtuber Chris](https://www.youtube.com/@CodewithChristheFreelancer?ref=tailwindweekly.ongloat.com) published this video on how to set up Tailwind and how to convert their starter project to use it. If you use Shopify then you'll love this one!

### [Why you should never use px to set font-size in CSS](https://joshcollinsworth.com/blog/never-use-px-for-font-size?ref=tailwindweekly.com)

This is a great primer on why px values are horrible for font sizes and what are good alternatives to use from an accessibility standpoint, which I found very informative. It also gives you a good idea of why Adam decided to use rems instead of px for font sizes in Tailwind CSS.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/social_lite.markee.io-markee-lite.jpeg)

### [Markee Lite](https://lite.markee.io/?ref=tailwindweekly.com)

I saw this project mentioned on the Tailwind CSS discord and I liked the design so much that I just *had* to feature it this week! I particularly love the structure and layout of the design, it's simple enough but it packs a lot of readable info in such a short page.

It uses colors to correctly accentuate the most important parts but doesn't abuse them. And I think the icons and text effects add a very nice and unique touch to the page.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/social_defensivecss.dev-defensive-css.jpeg)

### [Defensive CSS](https://defensivecss.dev/?ref=tailwindweekly.com)

I have featured quite a number of articles from the talented developer [Ahmad Shadeed](https://twitter.com/shadeed9?ref=tailwindweekly.ongloat.com) but I believe this project is his best work yet. It's a compilation of multiple tips and tricks on how to structure your CSS code in such a way that it can handle whatever content you throw at it and it even applies to Tailwind CSS code too! Overall, I think it's a great resource to check from time to time.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book. ‌

---

[**The Tech Resume Inside-Out**](https://tailwindweekly.link/tech-resume?ref=tailwindweekly.ongloat.com) **\- Learn what a good developer resume looks like, and how to write one.** This is a practical guide written by the people who do the resume screening: engineering managers and technical recruiters working at tech companies.

---

[**Dracula PRO**](https://tailwindweekly.link/dracula-theme?ref=tailwindweekly.ongloat.com) is a color scheme and UI theme **tailored for programming**. Made for terminal emulators, code editors, and syntax highlighters. Designed to be aesthetically pleasing while **keeping you focused**.

---

[**Smartr Daily**](https://links.swapstack.co/jrx?ref=tailwindweekly.ongloat.com) **is the essential newsletter for curious minds**. By sourcing the smartest articles on the Web it brings you **thought-provoking ideas** and insights delivered straight to your inbox daily!

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-4.jpeg)
### Tailwind Weekly #102: Tailwind CSS turns 5 🥳
URL: https://tailwindweekly.com/issue-102/
Last updated: 2025-09-22T16:20:32.000Z
Hello folks!

First off, Tailwind CSS [turned 5 years old](https://x.com/adamwathan/status/1587128677724291074?ref=tailwindweekly.ongloat.com) last October 31st, what a milestone! I started using Tailwind in 2018, only 1 year after it was out and it has come *such* a long way! I still remember when we had to use PurgeCSS as a separate build step and the file sizes in dev mode were in the *megabytes* 🤣.

Now Tailwind CSS is a mature framework and it's more powerful than ever, let's hope for more great years to come!

Now onto our usual content 😉.

## 🌟 News

As part of the 5 year celebration tweet, Adam shared some metrics and I wanted to highlight them here too.

Tailwind CSS:

- 🏒 Has a team of 7 full-time developers and designers
- 💵 Is a sustainable bootstrapped business
- 😲 Is used by 2.8 million projects on GitHub
- 🤯 Has over 168 million total downloads
- 🥇 It's just days away from becoming the most downloaded CSS framework on npm

I also want to mention the new [Showcase page](https://tailwindcss.com/showcase?ref=tailwindweekly.ongloat.com) on the official website. It features websites with very unique designs, all made with Tailwind, in an effort to show developers just how varied and unique websites can be, when coded with Tailwind CSS.

## 📚 Learning

### [Using CSS Container Queries with Tailwind CSS](https://www.youtube.com/watch?v=NoP9oY7kdy8&ref=tailwindweekly.com)

This excellent video shows how powerful container queries in Tailwind can be. It shows you the old way of coding a responsive design and then it walks you through how to transform that into container queries. A great watch indeed!

### [Use cases for CSS comparison functions](https://ishadeed.com/article/use-cases-css-comparison-functions/?ref=tailwindweekly.com)

Another great piece from [Ahmad Shadeed](https://x.com/shadeed9?ref=tailwindweekly.ongloat.com), this one shows you multiple use cases that AREN'T about fluid sizing, for comparison functions like min(), max(), and clamp() . The use cases range from positioning elements to creating decorative elements, all the way to creating a fancy loading bar. Overall, a great read.

I also wanted to encourage you to follow our friend [Simon](https://x.com/simonswiss/status/1586583823898361858?ref=tailwindweekly.ongloat.com), he has been tweeting great tips about Tailwind CSS, like how to use [arbitrary properties](https://x.com/simonswiss/status/1586583823898361858?ref=tailwindweekly.ongloat.com), how to use [container queries](https://x.com/simonswiss/status/1585754044525862912?ref=tailwindweekly.ongloat.com), and how to use the new [data attribute variants](https://x.com/simonswiss/status/1584403404226338817?ref=tailwindweekly.ongloat.com). The best part is that all the tips are in video form so you can actually see Simon coding the tip!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/main-og.jpeg)

### [FSJam](https://fsjam.org/?utm%5Fcampaign=tailwind-weekly-102&ref=tailwindweekly.com)

This week I'm showcasing the website for the FSJam podcast with a twist, it's actually using a customized version of the podcast template [Transmit](https://tailwindcss.com/plus/templates/transmit?ref=tailwindweekly.com) from Tailwind UI. This one uses a dark mode and it's more on-brand with the logo I have to say I love the tech logos pattern they're using! Overall, it's a great example of how to make those templates your own.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwindcss-fluid-type.jpg)

### [tailwindcss-fluid-type](https://github.com/davidhellmann/tailwindcss-fluid-type?ref=tailwindweekly.com)

This one is a cool plugin to do fluid typography in Tailwind CSS. If you're wondering what that is here's a [CSS Tricks article explaining it](https://css-tricks.com/snippets/css/fluid-typography/?ref=tailwindweekly.ongloat.com) but in short, it's a way to make font sizes scale depending on the size of the viewport. In my opinion, it's a more involved and customizable way to work with font sizes and can be a great choice for some use cases.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

[**The Tech Resume Inside-Out**](https://tailwindweekly.link/tech-resume?ref=tailwindweekly.ongloat.com) **\- Learn what a good developer resume looks like, and how to write one.** This is a practical guide written by the people who do the resume screening: engineering managers and technical recruiters working at tech companies.

[**Join more than 3.1k Web Weekly subscribers**](https://tailwindweekly.link/web-weekly?ref=tailwindweekly.ongloat.com) and become a better web developer with quick-to-read resources that you won't find elsewhere. Learn more about fundamentals, discover new tools, and have a good time!

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-1.jpg)
### Tailwind Weekly #101: v3.2 is out 🚀 and it's 🤯!
URL: https://tailwindweekly.com/issue-101/
Last updated: 2025-09-22T17:03:33.000Z
Hello folks!

**We got a big release this week!** To quote Adam:

> *Tailwind CSS v3.2 is here with an absolutely massive amount of new stuff, including support for dynamic breakpoints, multiple config files in a single project, nested groups, parameterized variants, container queries, and more*

For me, I'm really excited to start using the parameterized variants, I think that's gonna be a game changer for a lot of people's workflows!

Now onto our usual content 😉.

## 🌟 News

![](https://tailwindweekly.com/content/images/2025/09/card.65ec124d.jpg)

We got another awesome release folks! Say hello to v3.2 🚀.

You can read the [release notes](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.2.0?ref=tailwindweekly.ongloat.com) but the most important changes are here (with direct links too):

- [Multiple config files in one project using @config](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)
- [Browser-support-based styling with supports-\*](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)
- [ARIA attribute variants](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)
- [Data attribute variants](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)
- [Max-width and dynamic breakpoints](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)
- [Dynamic group-\* and peer-\* variants](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)
- [Dynamic variants with matchVariant](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)
- [Nested group and multiple peer support using variant modifiers](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)
- [Container queries](https://tailwindcss.com/blog/tailwindcss-v3-2?ref=tailwindweekly.ongloat.com)

One thing you might want to know right off the bat is that for the container queries the team decided to encapsulate that functionality into a plugin to have more flexibility while they make it more robust. 

## 📚 Learning

### [The border property you never knew you needed](https://www.youtube.com/watch?v=ypstT5UfCsk&ref=tailwindweekly.com)

Another great video from Kevin Powell, this time about the really niche but very useful border-image-\* properties. He gives a few examples that not just use images but gradients too and the effects you can do with them are pretty impressive. Definitely a great watch.

### [So your designer wants stuff to overlap](https://chenhuijing.com/blog/so-your-designer-wants-stuff-to-overlap?ref=tailwindweekly.com)

You probably got that request a lot while doing web development and figured out a few ways with experience, but this article gets into the nitty gritty and shows you the 4 possible and correct ways to make elements overlap on a website. The 4th one, using CSS grid, was a nice find and definitely one I'll be using in the future.

### [Disabling a link](https://www.scottohara.me/blog/2021/05/28/disabled-links.html?ref=tailwindweekly.com)

This one is short and sweet, in it you'll learn the various ways to properly disable a link taking into account semantics and accessibility. In the end, you end up with this snippet:

But the article walks you through the thought process of how to get there. Overall a great read.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/screenshot.jpg)

### [Metawork](https://www.metawork.com/?ref=tailwindweekly.com)

Here's another dark-themed website for you. This one is less traditional but it has a lot of delightful little details like the number backgrounds, the highlighted screenshots, and the icons with shadows. It kind of feels like a video game website so I think they really nailed their target audience (developers)!

For the curious, here's Metawork's description:

*Metawork captures every aspect of your code's execution—from function arguments and return values to call sites and timing data. It takes note of how threads of execution tie together, properly capturing the execution order of things like coroutines and async functions.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/bennettfeely.jpg)

### [Clippy](https://bennettfeely.com/clippy/?ref=tailwindweekly.com)

A lot of you probably know about this one but this saved my butt so many times in the past month that I just HAD to share it again. Clippy helps you visually create shapes that you can use with the clip-path CSS property. This is can very powerful in the right context. On my end, I was working with user-generated content and needed to make images in a section in a certain shape, clip-path solved that for me and Clippy was critical in me getting the polygon values correctly! 

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

[**Dracula PRO**](https://tailwindweekly.link/dracula-theme?ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-101-v3-2-is-out-and-it-s) is a color scheme and UI theme **tailored for programming**. Made for terminal emulators, code editors, and syntax highlighters. Designed to be aesthetically pleasing while **keeping you focused**.

[**The Tech Resume Inside-Out**](http://redpixelthemes.link/tech-resume?ref=tailwindweekly.ongloat.com) **\- Learn what a good developer resume looks like, and how to write one.** This is a practical guide written by the people who do the resume screening: engineering managers and technical recruiters working at tech companies.

**Join over 450K people who read** [**Emerging Tech Brew**](https://links.swapstack.co/brt?ref=tailwindweekly.ongloat.com) \- the 3-times-a-week email delivering the latest tech news impacting our future. From drones and AI to climate tech and robotics - **if it affects your world, Emerging Tech Brew has got you covered.**

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-2.jpg)
### Tailwind Weekly #100: v3.2 is coming up and it's 🔥!
URL: https://tailwindweekly.com/issue-100/
Last updated: 2025-09-22T15:44:37.000Z
Hello folks!

I'm very proud to say that this is our **100th issue**! To celebrate I want to share Tailwind Weekly's origin story with you.

*It all started just before the pandemic*, I had been using the framework for a few months and fell in love with it almost immediately. I wanted to use it on all my projects and couldn't even bear the thought of using anything else. The other frameworks became painful to use and the feeling of not having to name classes over and over again was liberating.

*Tailwind CSS felt very special to me*, like a treasure you find in a field and you sell everything you own to buy that field because you think it's the most wonderful thing in the world.

*But adoption was very slow back then* and there were just a few of us on the official Slack chat. So I decided to do something about it. I have always loved newsletters and thought, "Why not write one for Tailwind?" That's how Tailwind Weekly was born!

*I sent the* [*first issue* ](https://tailwindweekly.ongloat.com/issue-1/?ref=tailwindweekly.com)*on January 4th, 2020*, to just 20 subscribers, most of them friends from the Slack chat. Now we have more than 2,000 subscribers, it feels surreal!

*My goal has always been for more people to know about Tailwind CSS* and improve their CSS skills because I think the more you know CSS the more you'll love Tailwind CSS. Every week I pick the links and write the descriptions with that in mind.

**It's been a pleasure to write to you for the last 2 years and I hope I can do it for more years to come ❤️.**

Now onto our usual content 😉.

## 🌟 News

> 📢 Tailwind CSS v3.2 is coming soon and we're looking for people to beta test some of the new stuff that's coming!

> Read about all of the features we've been working on and how to get started with the pre-release here 👉[https://t.co/C7SdQUXZnb](https://github.com/tailwindlabs/tailwindcss/discussions/9504?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [October 7, 2022](https://x.com/adamwathan/status/1578411255530156033?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

The Tailwind CSS team is looking for feedback for the v3.2 beta, which packs incredible features such as multiple config files support, new @supports variants, dynamic group and peer variants and more!

You can start using the beta by installing the insiders version:

npm install -D tailwindcss@insiders

And also on [Tailwind Play](https://play.tailwindcss.com/TZxjYqVrKQ?ref=tailwindweekly.ongloat.com), just be sure to select the Insiders version on the top right dropdown.

## 📚 Learning

> 🔥 Tailwind Tip 🔥

> The "class" dark mode strategy only targets \*\*children element\*\* of the element with the \`dark\` class.

> If you're trying to combine a custom variant with dark mode, make sure you respect this hierarchy 👍 [pic.twitter.com/JWVPw4oQ1N](https://x.com/simonswiss/status/1577803645789229056?ref=tailwindweekly.com)— Simon Vrachliotis 🇨🇭🇦🇺🏀🏄‍♂️🏂💻 (@simonswiss) [October 5, 2022](https://x.com/simonswiss/status/1577803645789229056?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

I don't usually share tips from Twitter here but Simon's tip was so good I had to make an exception! This is an issue I have encountered myself when working with Tailwind's dark mode config. If you use the class strategy, the dark class HAS to be in the parent, doesn't matter if its the body or whatever parent element you choose.

### [The Power of CSS Blend Modes](https://cloudfour.com/thinks/the-power-of-css-blend-modes/?ref=tailwindweekly.com)

Blend modes are very powerful but somewhat of a dark art for some, anything past the usual dark layer with opacity may feel complicated. Well, this article wants to dispel that notion and does it with style! The author outlines not only how to use common blend modes but shows you 3 stunning effects, all with just CSS and images. The first one made me go all 🤯.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/videosdklive-thumbnail.jpeg)

### [videosdk](https://www.videosdk.live/?ref=tailwindweekly.com)

I have always found a dark website aesthetic kind of difficult to do right. You have to take into account not just colors but also proper spacing, legible fonts, and good structure. videosdk has all of that and more! I think this is the best all-dark-mode website I have seen in a while and I have to say those gradients really make it shine! 

For the curious, here's videosdk's description:

*Embed customized audio & video calling APIs & SDKs and interactive live streaming APIs & SDKs to add live audio & video conferencing to your platform with Video SDK.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/icons.download.jpg)

### [icons.download](https://icons.download/?ref=tailwindweekly.com)

Yet another icons library but this one is special! You can automatically change the stroke width, the type (outline or solid) and there are round and sharp options! Overall I find the icons very clean and such customization options make them very flexible. They do lack social icons but I hope they add them in the future.

## 💼 Featured jobs

**Center Pixel, Inc** is hiring a full-time [**Frontend Web Engineer**](https://jobs.ashbyhq.com/center/b287f1b5-b9d9-4a86-bc3f-8fb8f6048f11?ref=tailwind-jobs)Remote / Palo Alto, CA · $140,000 - $180,000

**Chicago Botanic Garden** is hiring a full-time [**Principal Web Application Developer**](https://workforcenow.adp.com/mascsr/default/mdf/recruitment/recruitment.html?cid=21ef98a3-d325-4110-a85a-7729320b6f80&ccId=19000101%5F000001&lang=en%5FUS&ref=tailwind-jobs)Hybrid / Chicago Botanic Garden

**Simple Focus** is hiring a full-time [**Front-End Developer**](https://simplefocus.com/careers/front-end-developer?ref=tailwind-jobs)Remote / USA

**Infinia ML** is hiring a full-time [**Senior Front-End Engineer**](https://infiniaml.bamboohr.com/careers?ref=tailwindweekly.com)Durham, NC

⭐ Want to add your job post here? See [more info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

[**Dracula PRO**](https://tailwindweekly.link/dracula-theme?ref=tailwindweekly.ongloat.com) is a color scheme and UI theme **tailored for programming**. Made for terminal emulators, code editors, and syntax highlighters. Designed to be aesthetically pleasing while **keeping you focused**.

**Join over 450K people who read** [**Emerging Tech Brew**](https://links.swapstack.co/brt?ref=tailwindweekly.ongloat.com) \- the 3-times-a-week email delivering the latest tech news impacting our future. From drones and AI to climate tech and robotics - **if it affects your world, Emerging Tech Brew has got you covered.**

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee.jpg)
### Tailwind Weekly #99: a game-changer feature is coming, the State of CSS survey is open, and more!
URL: https://tailwindweekly.com/issue-99/
Last updated: 2025-09-23T07:39:06.000Z
Hello folks!

Not much has happened on the official these past few weeks but I think its becausde the Tailwind Labs team is preparing to launch a game-changer feature on the next Tailwind release, be sure to read the News section for more info!

Also, I wante dto mention that the "State of CSS" survey is open! This is an annual developer survey about the latest trends in CSS. If you use CSS in any way, be sure to fill out the survey. I make sure to read the results posts after and they're always surprising and exciting!

Now onto our usual content 😉.

## 🌟 News

Since our last issue, Adam [announced](https://twitter.com/adamwathan/status/1574833153205731328?ref=tailwindweekly.ongloat.com) a new upcoming feature for Tailwind CSS, creating variants that accept parameters 🤯 and it's due to be shipped on the next Tailwind's release.

I'm actually very excited about this feature! The arbitrary values feature was a game changer for one-off edits and the arbitrary variants feature took inline customization to the next level. Now arbitrary variants with parameters will be even more powerful and keep your custom CSS to the absolute minimum! 

As Adam says, imagine being able to "do things like one-off breakpoints, supports checks, and more". The sky is the limit folks 🚀!

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/jekyll-tailwindcss.jpeg)

### [Starting a blank Jekyll site with Tailwind CSS in 2022](https://mzrn.sh/2022/04/09/starting-a-blank-jekyll-site-with-tailwind-css-in-2022/?ref=tailwindweekly.com)

If you have been coding for a while then you know Jekyll is really old school. It was the first-ever static site generator and when Github announced native support for it on its GitHub pages it really took off. But, as with all things in tech, over time it lost momentum.

Nowadays Jekyll is well and good and still relevant today and with this post, you can learn how to use Tailwind CSS with it. The tutorial is pretty straightforward and very detailed. It's definitely a great excuse to try Jekyll again!

### [outline is your friend](https://www.matuzo.at/blog/2022/focus-outline/?ref=tailwindweekly.com)

The piece outlines all the reasons why the outline CSS property is the best choice for focus styles on the web and while it has disadvantages, over the years it has become more customizable and more approachable. Better yet, Tailwind CSS supports it and its customization properties quite well. Overall a great post!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/neotokyofm-opengraph.jpeg)

### [NeoTokyo.fm](https://neotokyo.fm/?ref=tailwindweekly.com)

This week's showcase really ticks a few boxes for me. I'm a huge fan of anime and steampunk so I loved the site! I was actually delighted when I saw it was made with Tailwind ❤️, it does prove you can use Tailwind CSS to build practically *anything*.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/8e29ad42-9c6c-4527-a61b-7fa1c10726cd.jpeg)

### [twify](https://github.com/tzsk/twify?ref=tailwindweekly.com)

If you like CLI tools then you'll definitely *love* twify. It's basically create-react-app but universal, you can use it to create any type of app, from nuxt, to remix, to even laravel and all with Tailwind CSS properly installed and configured. 

Even better? You can use it to install Tailwind CSS on *existing* projects too!

## 💼 Featured jobs

**Center Pixel, Inc** is hiring a full-time [**Frontend Web Engineer**](https://jobs.ashbyhq.com/center/b287f1b5-b9d9-4a86-bc3f-8fb8f6048f11?ref=tailwind-jobs)Remote / Palo Alto, CA · $140,000 - $180,000

---

**Chicago Botanic Garden** is hiring a full-time [**Principal Web Application Developer**](https://workforcenow.adp.com/mascsr/default/mdf/recruitment/recruitment.html?cid=21ef98a3-d325-4110-a85a-7729320b6f80&ccId=19000101%5F000001&lang=en%5FUS&ref=tailwind-jobs)Hybrid / Chicago Botanic Garden

---

**Simple Focus** is hiring a full-time [**Front-End Developer**](https://simplefocus.com/careers/front-end-developer?ref=tailwind-jobs)Remote / USA

---

**Infinia ML** is hiring a full-time [**Senior Front-End Engineer**](https://infiniaml.bamboohr.com/jobs/view.php?id=78&source=aWQ9MTQ%3D&ref=tailwind-jobs)Durham, NC

⭐ Want to add your job post here? See [more info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**Dracula PRO**](https://tailwindweekly.link/dracula-theme?ref=tailwindweekly.ongloat.com) is a color scheme and UI theme **tailored for programming**. Made for terminal emulators, code editors, and syntax highlighters. Designed to be aesthetically pleasing while **keeping you focused**.

---

**Join over 450K people who read** [**Emerging Tech Brew**](https://links.swapstack.co/brt?ref=tailwindweekly.ongloat.com) \- the 3-times-a-week email delivering the latest tech news impacting our future. From drones and AI to climate tech and robotics - **if it affects your world, Emerging Tech Brew has got you covered.**

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-5.jpeg)
### Tailwind Weekly #98: upcoming features, CSS colors, and cascade layers 💅
URL: https://tailwindweekly.com/issue-98/
Last updated: 2025-09-23T07:52:15.000Z
Hello folks!

It's been a quiet week on the official front but we did get a few sneak peeks at what's coming, all is in the next News section, I must admit I'm pretty excited about the first sneak peek, it's gonna be revolutionary for a lot of sites!

Now onto our usual content 😉.

## 🌟 News

> Gonna make this a reality this week I think 😇 [https://t.co/BgTtoug3fW](https://t.co/BgTtoug3fW?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [September 20, 2022](https://twitter.com/adamwathan/status/1572272420261859328?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-98-upcoming-features-css-colors-and-cascade-layers) 

We may be getting a new @config directly which will allow the use of more than one config file. This is gonna be huge for big projects and sites with multiple themes, like the example shows. Imagine generating different CSS files for your app's admin side and public side. The CSS file sizes will be tiny!

> Refreshing some early Tailwind UI components, trying to decide which direction to go 🤔

> What feels more useful to you in your projects — a flashier design with more decorative opinions, or a more bare-bones version focused on structure/hierarchy?

> (Poll in next tweet 👇) [pic.twitter.com/pOvkNhvxiV](https://t.co/pOvkNhvxiV?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [September 19, 2022](https://twitter.com/adamwathan/status/1571934312471138304?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

It seems the Tailwind UI team is working on a redesign for the earliest components and they're asking for feedback, be sure to check the Twitter thread for more info but overall, I think both options look great!

## 📚 Learning

### [CSS color pro tips](https://www.youtube.com/watch?v=lCD4kJ4rYq8&ref=tailwindweekly.com)

This is the best video about colors in CSS that I have seen in quite a while! It talks about the basics and how colors have changed in CSS and how you should work with it now. It's from the popular YouTuber [Kevin Powell](http://the%20popular%20youtuber%20kevin%20powell%20released%20a%20video/?utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-98-upcoming-features-css-colors-and-cascade-layers) so you know it's gonna be good!

### [Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project](https://css-tricks.com/using-css-cascade-layers-to-manage-custom-styles-in-a-tailwind-project/?ref=tailwindweekly.com)

This is an excellent article on how to mix Tailwind's @layer directive with the [CSS Cascade Layers](http://css%20cascade%20layers/?utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-98-upcoming-features-css-colors-and-cascade-layers) feature, according to the post you can avoid having to use !important if you set up your cascade layers properly. Overall a great read!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/githubnext.com.jpeg)

### [Github Next](https://githubnext.com/?ref=tailwindweekly.com)

This week's showcase is quite fancy! It has a very clean layout and uses color contrast and subtle gradients to add emphasize part of the content. It also uses a custom font which [I have never seen](https://www.cufonfonts.com/font/alliance-no1?ref=tailwindweekly.ongloat.com) before but it looks very elegant and was a great choice for the site. Also, those charts' animations look lovely 😍!

For the curious, here's Github Next's description:

*GitHub Next investigates the future of software development. We are a team of researchers and engineers, exploring things beyond the adjacent possible. We prototype tools and technologies that will change our craft. We identify new approaches to building healthy, productive software engineering teams.* 

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/og-image.jpeg)

### [Tailwind Helper](https://www.tailwindhelper.com/?ref=tailwindweekly.com)

Tailwind Helper is a tailwind multi-tool to convert and visualize your classes and properties. It has a units calculator specific to Tailwind values and can serve as an interactive cheat sheet for the most common properties like font sizes, positioning, CSS grid, colors, etc. Overall it can be a very useful tool if you use Tailwind CSS in your daily workflow.

## 💼 Featured jobs

**Center Pixel, Inc** is hiring a full-time [**Frontend Web Engineer**](https://jobs.ashbyhq.com/center/b287f1b5-b9d9-4a86-bc3f-8fb8f6048f11?ref=tailwind-jobs) Remote / Palo Alto, CA · $140,000 - $180,000

---

**Chicago Botanic Garden** is hiring a full-time [**Principal Web Application Developer**](https://workforcenow.adp.com/mascsr/default/mdf/recruitment/recruitment.html?cid=21ef98a3-d325-4110-a85a-7729320b6f80&ccId=19000101%5F000001&lang=en%5FUS&ref=tailwind-jobs) Hybrid / Chicago Botanic Garden

---

**Simple Focus** is hiring a full-time [**Front-End Developer**](https://simplefocus.com/careers/front-end-developer?ref=tailwind-jobs) Remote / USA

---

**Infinia ML** is hiring a full-time [**Senior Front-End Engineer**](https://infiniaml.bamboohr.com/jobs/view.php?id=78&source=aWQ9MTQ%3D&ref=tailwind-jobs) Durham, NC

⭐ Want to add your job post here? See [more info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**Dracula PRO**](https://tailwindweekly.link/dracula-theme?ref=tailwindweekly.ongloat.com) is a color scheme and UI theme **tailored for programming**. Made for terminal emulators, code editors, and syntax highlighters. Designed to be aesthetically pleasing while **keeping you focused**.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://links.swapstack.co/lfa?ref=tailwindweekly.ongloat.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-6.jpeg)
### Tailwind Weekly #97: new icons, visual updates, and possible container queries feature 👀
URL: https://tailwindweekly.com/issue-97/
Last updated: 2025-09-23T08:04:19.000Z
Hello folks!

This week was packed with sneak peeks of future features, new icons, and visual updates, do check out the News sections to learn more!

Now onto our usual content 😉.

## 🌟 News

The Tailwind Labs team sure was busy tweeting this week! In just a few days we got:

- [A new batch of heroicons, from Steve Schoger](https://twitter.com/steveschoger/status/1569688757804335107?ref=tailwindweekly.ongloat.com), love that new rocket icon!
- A [WIP preview](https://twitter.com/adamwathan/status/1570840782659260416?ref=tailwindweekly.ongloat.com) of a possible container query implementation for Tailwind CSS, looks incredibly cool!
- [Variant "labels"](https://twitter.com/adamwathan/status/1570869415444611072?ref=tailwindweekly.ongloat.com), never knew I so needed that until I saw it, so excited for it!
- A preview for some [upcoming visual updates](https://twitter.com/steveschoger/status/1570872908788146176?ref=tailwindweekly.ongloat.com) to the earliest Tailwind UI components, also by Steve.

From the community side, we got a tweet from Sam, [showing a feature](https://twitter.com/samselikoff/status/1570089403468464129?ref=tailwindweekly.ongloat.com) I didn't even know existed! If you use the hoverOnlyWhenSupported flag on the future config property, now all your hover classes will only apply to devices that support hover, so no more weird styles on mobile when you tap elements!

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/new-css-style-queries.jpeg)

### [Understanding and using the new CSS style queries](https://blog.logrocket.com/new-css-style-queries/?ref=tailwindweekly.ongloat.com)

You probably heard all about container queries lately, but did you know there's also a *style* query API that is coming soon? This article explains all about it, how to use it, and useful use cases for when it's more available. Definitely a great read to be informed of what's coming!

### [When Do You Use CSS Columns?](https://css-tricks.com/when-do-you-use-css-columns/?ref=tailwindweekly.com)

Flexbox and CSS Grid have become the default when we want to work with multi-column layouts but there's also the old fashioned columns CSS property. This CSS Tricks piece mentions a few use cases of when you would like to use columns instead of the traditional flexbox approaches.

### [How to use box shadows with Tailwind CSS, including custom and arbitrary values](https://redpixelthemes.com/blog/tailwindcss-box-shadows-how-to/?ref=tailwindweekly.com)

Written by me! I had to use a one-off shadow for a client project and realized there were some quirks for doing it as an arbitrary value, so decided to write a whole post about it, I hope you find it useful!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/meta-2.jpeg)

### [Collect Content](https://www.collectcontent.io/?ref=tailwindweekly.com)

Here's another SaaS landing page for you, this one is all about minimalistic layouts, hand-written-looking effects and shapes, and lots of screenshots! Also, that header font is just so 😍.

For the curious, here's Collect Content's description:

*Stop worrying about collecting content from your clients. "Get the content you need to finish your website builds and launch on time.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/800o59dutnanbfb7udjopuwb33la.jpeg)

### [Heroicons Raycast extension](https://www.raycast.com/haack/heroicons?ref=tailwindweekly.com)

If you're on Mac then you're gonna love this. [Raycast](https://www.raycast.com/?ref=tailwindweekly.ongloat.com) is a more powerful version of Spotlight and it has a plugin system where you can add functionality to it.

This week's resource is a plugin (or extension as it's officially called) for searching and copy-pasting icons from Heroicons straight from Raycast! Pretty handy if you work with Heroicons a lot and want a more streamline way of getting them.

## 💼 Featured jobs

**Center Pixel, Inc** is hiring a full-time or contract [**Frontend Web Engineer**](https://jobs.ashbyhq.com/center/b287f1b5-b9d9-4a86-bc3f-8fb8f6048f11?ref=tailwind-jobs) Remote / Palo Alto, CA · $140,000 - $180,000

---

**Chicago Botanic Garden** is hiring a full-time [**Principal Web Application Developer**](https://workforcenow.adp.com/mascsr/default/mdf/recruitment/recruitment.html?cid=21ef98a3-d325-4110-a85a-7729320b6f80&ccId=19000101%5F000001&lang=en%5FUS&ref=tailwind-jobs) Hybrid / Chicago Botanic Garden

---

**CMS Max** is hiring a full-time [**Lead Tailwind Developer**](https://www.cmsmax.com/careers/lead-tailwind-developer?ref=tailwind-jobs) Remote / USA

---

**Simple Focus** is hiring a full-time [**Front-End Developer**](https://simplefocus.com/careers/front-end-developer?ref=tailwind-jobs) Remote / USA

---

**Infinia ML** is hiring a full-time [**Senior Front-End Engineer**](https://infiniaml.bamboohr.com/jobs/view.php?id=78&source=aWQ9MTQ%3D&ref=tailwind-jobs)Durham, NC

⭐ Want to add your job post here? See [more info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

Manage **all your projects** and tasks in the most **organized and efficient way** possible. Use the [**Notion Project Management Template**](https://gumroad.com/a/131215187/rxldm?ref=tailwindweekly.ongloat.com) to stay focused and implement a robust structure for your business or personal projects.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://links.swapstack.co/lfa?ref=tailwindweekly.ongloat.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-7.jpeg)
### Tailwind Weekly #96: new template, new heroicons batch, and new update for Tailwind Play baby 😎
URL: https://tailwindweekly.com/issue-96/
Last updated: 2025-09-23T08:16:30.000Z
Hello folks!

For my US friends, I hope you had a great long weekend!

This week we got some couple of [exciting news](https://tailwindcss.com/blog/2022-09-09-new-personal-website-heroicons-2-headless-ui-v17?ref=tailwindweekly.ongloat.com) from the Tailwind Labs team: a brand new template, new beautiful icons, and a cool update for Tailwind Play. Get more info in the news section!

Now onto our usual content 😉.

## 🌟 News

Ok since we missed last week we got a couple of updates for you.

![](https://tailwindweekly.com/content/images/2025/09/image--2-.jpeg)

The Spotlight template preview is simply lovely!

First and most important, we got a [new template](https://twitter.com/adamwathan/status/1567545918328639490?ref=tailwindweekly.ongloat.com)! Say hello to [Spotlight](https://tailwindui.com/templates/spotlight?ref=tailwindweekly.ongloat.com), a personal website template with a beautiful modern design that also includes a very good-looking dark mode.

![](https://tailwindweekly.com/content/images/2025/09/image-1--1-.jpeg)

A new batch of Heroicons

Second, Steve [announced](https://twitter.com/steveschoger/status/1564678733482582020?ref=tailwindweekly.ongloat.com) a new batch of icons for Heroicons, it's just a few of them but little by little, the library is growing!

Last but not least, the Tailwind Labs team [added support](https://twitter.com/adamwathan/status/1563204427254616067?ref=tailwindweekly.ongloat.com) for the insiders builds on Tailwind Play. This means that you can test the latest unreleased features without leaving your browser!

## 📚 Learning

### [Everything You Need To Know About CSS Gradients](https://www.youtube.com/watch?v=e6jnl3iAezM&ref=tailwindweekly.com)

Another awesome video from Youtuber [Colt Steele](https://www.youtube.com/c/ColtSteeleCode?ref=tailwindweekly.ongloat.com), the best part for me was all the examples he gave for Conic gradients and how easy they were to use. Definitely gave me a few ideas to use in the future! Overall this is a great CSS gradients intro for beginners and senior devs alike.

### [Do you know about overflow: clip?](https://kilianvalkhof.com/2022/css-html/do-you-know-about-overflow-clip/?ref=sidebar)

This is a great article on how and why to use the overflow: clip CSS declaration. As always Kilian offers a concise explanation of the feature and shows a very cool example, he even mentions the related overflow-clip-margin property. The best thing is, that you can already use [overflow: clip](https://tailwindcss.com/docs/overflow?ref=tailwindweekly.ongloat.com) with Tailwind CSS by using the overflow-clip class. 

### [How to do gradient text with Tailwind CSS](https://redpixelthemes.com/blog/tailwindcss-gradient-text/?ref=tailwindweekly.com)

Written by me! I wanted to do a gradient text effect on a project and realized how easy it is to do it with Tailwind CSS but I also found some gotchas, which are documented in the article. I hope you find it useful! 

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/157d1db7-6226-47ce-bc95-b597f63bebd5/og-index-83792c8446e51081c66a113a6aaccf3d.jpeg?t=1738083318)

### [Leadgeek](https://leadgeek.io/?ref=tailwindweekly.com)

This week we have a website with a very unique design, more grungy looking, and reminds me a lot of a comic book. I have to say I love the font choices (Inter ftw!) and the fancy background effects. Even the cookie consent popup looks cool!

For the curious, here's Leadgeek description:

*Trusted by Amazon FBA sellers across the world, Leadgeek offers online arbitrage sourcing lists, software, and tools to put you in control of your selling.*

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/f2d8d8e9-dbe3-486d-bd06-c9eea1c154f5/wind-ui-722ccf65e80ae41d28f4c07b860e7d7a.png?t=1738083318)

### [Wind UI](https://wind-ui.com/?ref=tailwindweekly.com)

Here's another component library for you. Based on Tailwind CSS of course and uses a beautiful green hue as the main color, it also looks very clean and most of the components have a lot of variations. If you like the green hue then this is a great library to jump-start your next project.

## 💼 Featured jobs

**Crowd Favorite** is hiring a full-time [**Senior Web Developer, Open Source**](https://apply.workable.com/crowd-favorite/j/6B453F70A8/?ref=tailwind-jobs) Remote / USA

---

**Spear AI** is hiring a full-time [**Frontend Engineer**](https://jobs.gusto.com/postings/spear-ai-frontend-engineer-1e4614b6-09c9-4363-b9e2-1c6b17a80204?ref=tailwind-jobs) Washington D.C. · $95,000 – $145,000 USD

---

**CMS Max** is hiring a full-time [**Lead Tailwind Developer**](https://www.cmsmax.com/careers/lead-tailwind-developer?ref=tailwind-jobs) Remote / USA

---

**Third Time Games** is hiring a full-time [**Web Developer**](https://thirdtimegames.com/?ref=tailwind-jobs) Remote / Orlando, FL

⭐ Want to add your job post here? See [more info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

Manage **all your projects** and tasks in the most **organized and efficient way** possible. Use the [**Notion Project Management Template**](https://gumroad.com/a/131215187/rxldm?ref=tailwindweekly.ongloat.com) to stay focused and implement a robust structure for your business or personal projects.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://links.swapstack.co/lfa?ref=tailwindweekly.ongloat.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-8.jpeg)
### Tailwind Weekly #95: Heroicons v2.0 is here 🥳 🚀!
URL: https://tailwindweekly.com/issue-95/
Last updated: 2025-09-23T08:29:03.000Z
Hello folks!

[Heroicons v2.0](https://twitter.com/steveschoger/status/1562117153591107586?ref=tailwindweekly.ongloat.com) is out folks 🎉 . This launch has been long in the making and it's finally here! Check out the news section for more info.

We also decided to add a jobs section and feature job ads from the official Tailwind CSS job board, if you want to add yours then check out the section for more info. 

## 🌟 News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b0c02713-2104-49fe-a925-87a32057bf5e/heroicons.com.png?t=1738083318)

Beautiful 😍

Say hello to the new Heroicons!

We got a completely new design, a new 24px solid set, and 260 icons redrawn from scratch, with the outline version using a thinner 1.5px stroke.

The icons are also available as React and Vue libraries and official Figma components so we got the whole deal 😎.

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/5abd7954-0606-4f4c-a5ef-cb267c61cd81/everything-developers-must-know-about-figma.jpg?t=1738083319)

### [Everything Developers Must Know About Figma](https://www.smashingmagazine.com/2022/08/everything-developers-must-know-about-figma/?ref=tailwindweekly.com)

This primer is not your average "here's how to use Figma" post, this is actually a great guide for its most common and advanced features and how they're useful for developers. A great read if you work translating Figma designs to code.

### [How to make your multilingual website suitable for RTL with only HTML and CSS](https://www.voorhoede.nl/en/blog/how-to-multilingual-website-rtl-html-css/?ref=tailwindweekly.com)

This one is short, sweet, and straight to the point. It has 3 tips for you if you're working on adding RTL support to your website. The 3rd tip "Give unicode ranges to fonts" was one I haven't heard of before and was quite interesting.

### [How to change the Tailwind CSS base font size](https://redpixelthemes.com/blog/change-tailwindcss-base-font-size/?ref=tailwindweekly.com)

Written by me! I recently worked on a project migrating an old codebase from Bootstrap to Tailwind CSS and the original developer did the whole html { font-size: 10px; } so had to find a way around that for Tailwind and this post explains how I did it. I hope you find it useful!

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/69219cf1-4704-44c3-b330-9fd8887ca905/default_image.png?t=1738083320)

### [Bump](https://bump.sh/?ref=tailwindweekly.com)

Bump's design is simple and clean with beautiful blue hues, cute icons, and styled screenshots. The copy is king here and I particularly liked the testimonial section's design.

For the curious, here's Bump's description:

*Create a powerful human-centered workflow for your APIs. Bump documents, diffs, and validates your API changes continuously. It lets you focus on what's important: building your product.*

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/44fe1938-3d66-4cc2-9c61-d7cc00312f15/a17t.png?t=1738083320)

### [a17t](https://a17t.miles.land/?ref=tailwindweekly.com)

a17t is a Tailwind CSS plugin that provides pre-built components like field, button, and card in for your project. I would say the design is very minimalistic and I find it curious how they class prefixes like \~ and @. Overall a great resource if you like the design and you're looking to code fast with pre-built components.

## 💼 Featured jobs

[**Senior Frontend Web Developer**](https://cmu.wd5.myworkdayjobs.com/en-US/SEI/job/Pittsburgh-PA/Senior-Frontend-Web-Developer%5F2018394-1?ref=tailwind-weekly) \- Full-time - Pittsburgh, PA - Carnegie Mellon University Software Engineering Institute

---

[**Laravel Developer**](https://apply.workable.com/mindsize/j/EE7A836C34/?ref=tailwind-weekly) **\-** Full-time - Remote / USA - Mindsize

---

[**Lead Tailwind Developer**](https://www.cmsmax.com/careers/lead-tailwind-developer?ref=tailwind-weekly) \- Full-time - Remote / USA - CMS Max

---

[**Senior Frontend Engineer**](https://www.ycombinator.com/companies/lugg/jobs/JnIt8KgiG-front-end-software-engineer?ref=tailwind-weekly)\- Full-time - Remote / Everywhere - Lugg

⭐ Want to add your job post here? See [more info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

Manage **all your projects** and tasks in the most **organized and efficient way** possible. Use the [**Notion Project Management Template**](https://gumroad.com/a/131215187/rxldm?ref=tailwindweekly.ongloat.com) to stay focused and implement a robust structure for your business or personal projects.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://links.swapstack.co/lfa?ref=tailwindweekly.ongloat.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

**Get smarter every day**. Every day Refind picks 7 links from around the web for you, tailored to your interests. Loved by 50k+ curious minds. [**Subscribe for free today.**](https://links.swapstack.co/z68?ref=tailwindweekly.ongloat.com)

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-9.jpeg)
### Tailwind Weekly #94: the :has() selector is almost here, use Tailwind with Remix + more!
URL: https://tailwindweekly.com/issue-94/
Last updated: 2025-09-23T08:38:36.000Z
Hello folks!

It's been a quiet week for the Tailwind Labs team, glad they're taking it easy after such a great launch for the job board. [Coming up](https://tailwindcss.com/blog/2022-08-17-tailwind-framer-motion-template-and-tailwind-jobs?ref=tailwindweekly.ongloat.com) we have the Heroicons v2 launch, a new template, and Headless UI v.17 so stay tuned!

⭐ We're adding a new section to Tailwind Weekly to feature a new developer story every week. If you want to get featured then please fill out [this form](https://forms.reform.app/redpixel/tailwind-weekly-dev-feature/897t7z?ref=tailwindweekly.ongloat.com).

## 🌟 News

No major official news folks, but on the community side, our friend Simon is teaching a Tailwind CSS workshop! Like the tweet says, you can get a pretty big discount if you sign up via the [Pro Tailwind site](https://www.protailwind.com/?ref=tailwindweekly.ongloat.com). The first one was this last Thursday but I think there'll be more in the future.

For those of you who don't know, Simon regularly posts videos about Tailwind CSS on his [youtube channel](https://www.youtube.com/c/Simonswissdev/videos?ref=tailwindweekly.ongloat.com) and tweets a lot about tailwind too! He's also working on an advanced Tailwind course over at Pro Tailwind and I must admit I'm eagerly waiting for it to launch 😍.

> Teaching my first workshop this Thursday 🎉

> There are a couple of days left to get your ticket - going through [https://t.co/nVhCjkNTA2](https://t.co/nVhCjkNTA2?ref=tailwindweekly.ongloat.com) will give you a huge discount ✨

> Looking forward to this one![https://t.co/SPiY0ougBr](https://t.co/SPiY0ougBr?ref=tailwindweekly.ongloat.com)— Simon Vrachliotis 🇨🇭🇦🇺🏀🏄‍♂️🏂💻 (@simonswiss) [August 15, 2022](https://twitter.com/simonswiss/status/1559164821949427712?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/37e7aeb1-03d2-4577-b6b6-780c21d02bcc/developer.chrome.com_blog_has-m105_-Macbook-Pro--1.png?t=1738083318)

### [:has(): the family selector](https://developer.chrome.com/blog/has-m105/?ref=tailwindweekly.com)

You're probably tired of how often I have mentioned the :has() selector lately but I promise this one is important. The selector will be supported on Chrome on the 105 release, which is just around the corner!

This is huge since the current release version is 104 so adoption is really picking up. We're still waiting for Firefox to implement it but that's planned. I'm so excited to play around with it when it lands!

### [Not All Zeros are Equal](https://www.oddbird.net/2022/08/04/zero-units/?ref=tailwindweekly.com)

This article was quite a ride, it's almost like a detective story! The author had an issue where their CSS was breaking on production and it turns out it was because a 0 value was breaking a particular CSS rule. The rest of the article explains *why* that happened and what to keep in mind when working with zeros in CSS.

### [How to use Tailwind CSS with Remix](https://www.netlify.com/blog/how-to-use-tailwind-css-with-remix/?ref=tailwindweekly.com)

Here's a detailed guide on how to set up Tailwind CSS with the popular full-stack framework [Remix](https://remix.run/?ref=tailwindweekly.ongloat.com). Long story short, you'll need an additional npm script to set up the build step for your CSS and there are some quirks with adding it to Remix, which the article explains in detail, with examples.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7ccb5736-9392-44f9-9432-a938f629ca2c/brokenrubik.co_-Macbook-Pro-.png?t=1738083319)

### [Broken Rubik](https://brokenrubik.co/?ref=tailwindweekly.com)

That hero is so cool 😍! This week I bring you an agency website and one that really knows how to do illustrations. Theirs are so lovely! Very colorful and sharp. The rest of the website is also very nice, they have good-looking typography and a great layout plus a cool and consistent hover effect.

For the curious, here's Broken Rubik's description:

*We are Broken Rubik, a team with the ability to provide personalized solutions and with high-quality standards for your ecommerce.*

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b4f51ab3-e718-481a-a1b5-45de8236c745/thumbnail.png?t=1738083319)

### [Meraki UI](https://merakiui.com/?ref=tailwindweekly.com)

Meraki UI is a popular components library for Tailwind CSS. They have \~108 ready-made components in 19 categories and all components include dark mode and RTL support. Overall, the component designs are simple and functional, and the code is clean.

## 💼 Featured jobs

### [Lead Frontend Dev, FT, Remote](https://apply.workable.com/meetingpackage/j/46203AF47C/?ref=tailwindweekly.ongloat.com)

We’re looking for an experienced frontend developer to join our small team to ensure design-focused implementation, build a solid foundation for our upcoming component system and oversee the quality of our product.[MeetingPackage](https://apply.workable.com/meetingpackage/j/46203AF47C/?ref=tailwindweekly.ongloat.com)

⭐ Want to add your job post here? See [more info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

**I recently finished the** [**"Ten++ Ways to Make Money as a Developer" ebook**](https://tailwindweekly.link/10-money-developers?ref=tailwindweekly.ongloat.com) from Florian Pop and I really liked it. Since I'm a freelancer I already knew some of the methods he mentioned but others really blew my mind, for example, I didn't know streaming could be so profitable 🤯!

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://links.swapstack.co/lfa?ref=tailwindweekly.ongloat.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

**Get smarter every day**. Every day Refind picks 7 links from around the web for you, tailored to your interests. Loved by 50k+ curious minds. [**Subscribe for free today.**](https://links.swapstack.co/z68?ref=tailwindweekly.ongloat.com)

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-10.jpeg)
### Tailwind Weekly #93: the job board is live folks 🚀!
URL: https://tailwindweekly.com/issue-93/
Last updated: 2025-09-23T08:45:17.000Z
Hello folks!

It's official folks, the Tailwind CSS job board is live 🤩!

I think this will be a great addition to the ecosystem, now people who love Tailwind CSS can find jobs at companies that love it too, that's a big win in my book!

## 🌟 News

> We just launched the official Tailwind CSS job board! 🥳

> Find a job working at an awesome company using tools you love like Tailwind CSS.[https://t.co/v6unrKYAlV](https://jobs.tailwindcss.com/?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [August 9, 2022](https://x.com/adamwathan/status/1557011993848160257?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

That's the official announcement tweet from Adam, so exciting!

For the curious, here are some interesting facts about the job board:

- Each job post costs $499 but there are some additional perks you can buy like boosting the listing every day or every week.
- There's a newsletter that sends you the latest job posts every week.
- All job posts are also shared on the official discord chat in a special channel so it doesn't get lost in the busy community hiring channel.

On the Tailwind UI front, we got [a new template](https://x.com/adamwathan/status/1558163028453085189?ref=tailwindweekly.ongloat.com)! Say hello to [Pocket](https://tailwindcss.com/plus/templates/pocket?ref=tailwindweekly.com), a marketing landing page for mobile apps. See the demo [here](https://tailwindcss.com/plus/templates/pocket?ref=tailwindweekly.com), it's gorgeous! 

## 📚 Learning

### [3 useful CSS hacks](https://www.youtube.com/watch?v=MywezIxlp8Y&ref=tailwindweekly.com)

Another great video from Kevin Powell, I really liked the first hack (using border-radius: 100vmax), I have never seen it before and it's very clever! The other tips are just as good, definitely a great watch!

### [Grid for layout, Flexbox for components](https://ishadeed.com/article/grid-layout-flexbox-components/?ref=tailwindweekly.com)

This one is an old one from [Shadeed](https://x.com/shadeed9?ref=tailwindweekly.ongloat.com) but it's still very relevant. The article details a very good mental framework on when and how to use CSS Grid and Flexbox for coding layouts.

### [How to hide the scrollbar with Tailwind CSS](https://design2tailwind.com/blog/tailwindcss-hide-scrollbar/?ref=tailwindweekly.com)

Written by me! I had this issue recently with a client project and realized the solution had a few quirks you need to keep in mind, so I decided to document it in this blog post. I hope you find it useful!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/leerob.io.jpg)

### [Lee Robinson – Developer, writer, creator.](https://leerob.com/?utm%5Fcampaign=tailwind-weekly-093&ref=tailwindweekly.com)

Another personal site! This one is from Lee Robinson, a talented developer with a very good eye for design and it shows all over his portfolio! From the micro-interactions animations to the minimal but beautiful layout, the whole site is just *nice* to look at. I also particularly loved his [Dashboard page](https://leerob.com/?ref=tailwindweekly.ongloat.com), very clever!

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/dynamowaves.jpg)

### [Dynamowaves - SVG wave templates](https://dynamowaves.markzebley.com/?ref=tailwindweekly.com)

CSS Weekly recently [did a video](https://www.youtube.com/watch?v=l5cYOU%5FDv%5Fs&ref=tailwindweekly.com) about this one and I just had to share it! The package helps you create fancy SVG wave shapes, which can make your design really unique. The best part is that, depending on how you configure it, the shapes can change on every page load, very unique!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

[**PixelSnap 2**](https://tailwindweekly.link/pixelsnap-2?ref=tailwindweekly.ongloat.com) **is the fastest tool for measuring anything on your screen**. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

---

**I recently finished the** [**"Ten++ Ways to Make Money as a Developer" ebook**](https://tailwindweekly.link/10-money-developers?ref=tailwindweekly.ongloat.com) from Florian Pop and I really liked it. Since I'm a freelancer I already knew some of the methods he mentioned but others really blew my mind, for example, I didn't know streaming could be so profitable 🤯!

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](https://ecmascript.news/?ref=tailwindweekly.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-3.jpg)
### Tailwind Weekly #92: the job board is coming next week + more about centering stuff, variable fonts, and hyphens!
URL: https://tailwindweekly.com/issue-92/
Last updated: 2025-09-23T08:58:26.000Z
Hello folks!

The job board is coming people 🤩! Check the news section for more info.

We also got a cool video about the good old "centering stuff with CSS" topic, this time with more modern approaches. Likewise, we have a great primer on what variable fonts are and how to use them.

I'm also excited to announce that I made my first Tailwind CSS plugin 😊. Check out the resource section for more info, I know it's pretty niche but I hope you find it useful!

## 🌟 News

> Next week we're launching the official Tailwind CSS job board! 🥳 Really proud of the design and been super fun working on lots of little details in the UI.

> Excited to make this the best place in the world to find engineering and design jobs at companies using Tailwind 👍 [pic.twitter.com/YfqFhof2H8](https://x.com/adamwathan/status/1554486537768865803/photo/1?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [August 2, 2022](https://x.com/adamwathan/status/1554486537768865803?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

It's official folks, the official Tailwind CSS job board is launching next week. Who would have thought that a job board would make me so excited 🤣!

If you want to submit your own job post then there's still time, the team is still [accepting posts](https://x.com/adamwathan/status/1554811457333764096?ref=tailwindweekly.ongloat.com) and you can get a lot of publicity by being part of the first posts on launch.

## 📚 Learning

### [3 Simple Ways To Center an Element Using CSS](https://www.youtube.com/watch?v=54XxWwwFZtw&ref=tailwindweekly.com)

Yet another great video from CSS weekly goes straight to the point! You'll learn how to center elements using absolute, flexbox and css grid and also learn a bit about the place-content property.

### [<article> vs. <section>: How To Choose The Right One](https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/?ref=tailwindweekly.com)

This is one was a wild ride! It's a great primer on a very common question you might have asked yourself if you work a lot with markup. It talks about the theory for each tag, the original vision behind them, how assistive technology interprets it, and some practical examples of when to use each.

### [The joy of Variable Fonts: getting started on the Frontend](https://evilmartians.com/chronicles/the-joy-of-variable-fonts-getting-started-on-the-frontend?ref=tailwindweekly.com)

Variable fonts are quite the hot topic these days. I keep hearing all the good things about them but never really knew how to use them... until I found this article. It shows the old and new ways of using variable fonts, the correct format to use *right now,* and how to set good fallbacks. Overall a primer intro article to the topic.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/index.jpg)

### [Danilo Leal](https://daniloleal.co/?ref=tailwindweekly.com)

Here's another personal site for you, this one takes a more minimal approach which I quite liked. Simple typography (Inter FTW!) and layout, bright colors and the dark mode is just beautiful.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwindcss-hyphens-1.jpg)

### [tailwindcss-hyphens](https://github.com/vivgui/tailwindcss-hyphens?ref=tailwindweekly.com)

This plugin was made by me! I had a client project that required [hyphens](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens?ref=tailwindweekly.ongloat.com) for the headers and I realized Tailwind CSS doesn't offer those classes. Not wanting to write custom CSS I decided to write my first plugin and it was pretty easy 😄.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

[**PixelSnap 2**](https://tailwindweekly.link/pixelsnap-2?ref=tailwindweekly.ongloat.com) **is the fastest tool for measuring anything on your screen**. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

---

[**CSS Scan**](https://tailwindweekly.link/CSSScan?ref=tailwindweekly.ongloat.com) **is the fastest and easiest way to check, copy, and edit CSS**. Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-4.jpg)
### Tailwind Weekly #91: Heroicons v2 is on the horizon, a new personal template, and more!
URL: https://tailwindweekly.com/issue-91/
Last updated: 2025-09-23T09:17:59.000Z
Hello folks!

It's been a pretty interesting week, the Tailwind Labs team is hard at work on a couple of upcoming updates (see the News section for more!) and the ecosystem is as vibrant as ever.

This time we also have a couple of articles and videos that can teach you more about CSS grid in Tailwind CSS and how to adapt Eslint and Prettier for your Tailwind development setup.

Now onto our usual content 😉.

## 🌟 News

It looks like the Tailwind Labs team is busy working on 2 upcoming updates! Lucky for us they decided to share a bit of the behind-the-scenes on Twitter:

1. Steve is working on v2 of Heroicons and it looks sleek! Here's the [sneak peek](https://x.com/steveschoger/status/1551586310657302529?ref=tailwindweekly.ongloat.com). Keep in mind Steve has been working on this update since last year but this month he mentioned he's hoping to launch it in [the coming weeks](https://x.com/steveschoger/status/1550505220131676162?ref=tailwindweekly.ongloat.com).
2. The team is also working on a personal website template for Tailwind UI. James gave us a [sneak peek](https://x.com/jamesm/status/1550587011727253505?ref=tailwindweekly.ongloat.com) recently and it looks AMAZING, really excited for its launch 🎉

## 📚 Learning

> One fun Tailwind CSS trick I came up with is creating my own role-based variants.

> For example to show certain elements only to admins, I make my body look like: <body data-admin> and add the classes "hidden admin:block" to any elements that should only be visible to admins [pic.twitter.com/Qs23ypMGAV](https://x.com/marckohlbrugge/status/1544113650134384640?ref=tailwindweekly.com)— marckohlbrugge.eth (@marckohlbrugge) [July 5, 2022](https://x.com/marckohlbrugge/status/1544113650134384640?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

I found this trick a few weeks ago and wanted to share it. Now that we have arbitrary support the sky is the limit! And this trick showcases exactly the thing you can do with it. Loved the cleverness! 

### [Easy Responsive Grid Layouts in Tailwind CSS without Breakpoints | Single utility class](https://www.youtube.com/watch?v=9aQ6nFMsbDs&ref=tailwindweekly.com)

Back in [issue #83](https://tailwindweekly.ongloat.com/issue-83/?ref=tailwindweekly.com) I mentioned Shruti's Tailwind CSS' plugin for responsive grids. Well, just recently she decided to release a video that is part a demo for the plugin and part a class on how Tailwind handles CSS grid. I can say that even if you don't use the plugin, the video is great and you might learn a thing or two about how grids work in the framework.

### [Streamlining your Tailwind CSS workflow with ESLint + Prettier](https://dev.to/mryechkin/streamlining-your-tailwind-css-workflow-with-eslint-prettier-1hg?ref=tailwindweekly.com)

I have always felt that configuring Eslint and Prettier is kind of dealing with dark magic 😅, so many options, possibilities, and conflicts too! But this article explains in detail how to setup up both properly for Tailwind CSS development and even how to make it work with VS Code too. Overall, a great read.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/home.jpg)

### [OpenNode](https://opennode.com/?ref=tailwindweekly.com)

Here's another crypto site for you, with a completely different design, and oh wow, it looks good! Very clean, cool colors, looks very enterprise and "banksy". LOVE the mini-interaction animations.

For the curious, here's what OpenNode does:*A simple Bitcoin payment processor for any business. Accept Bitcoin payments, receive Bitcoin donations and send Bitcoin payouts all on the OpenNode platform.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/open-graph-1.jpg)

### [Checka11y.css](https://checka11y.jackdomleo.dev/?ref=tailwindweekly.com)

This week's resource is related to accessibility and I love how unique and easy to use it is. It's a stylesheet that you add to your code and it highlights lots of accessibility issues. [The demo](https://checka11y.jackdomleo.dev/demo/?ref=tailwindweekly.ongloat.com) does a great job of showing how powerful and useful it can be. It's basically just copy, paste and fix!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

[**PixelSnap 2**](https://tailwindweekly.link/pixelsnap-2?ref=tailwindweekly.ongloat.com) **is the fastest tool for measuring anything on your screen**. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

---

[**CSS Scan**](https://tailwindweekly.link/CSSScan?ref=tailwindweekly.ongloat.com) **is the fastest and easiest way to check, copy, and edit CSS**. Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-5.jpg)
### Tailwind Weekly #90: another sneak peek, more about CSS variables and all colors in all formats!
URL: https://tailwindweekly.com/issue-90/
Last updated: 2025-09-23T09:29:27.000Z
Hello folks!

It's been a quiet week on the Tailwind CSS front but we did get a tidbit about the upcoming job board, can't wait to see it live!

Now onto our usual content 😉.

## 🌟 News

> Playing around with some interface ideas for the official Tailwind CSS job board we started working on. Fun to have a real app to jack on for the first time in a while! [pic.twitter.com/ek8BR7odLX](https://x.com/adamwathan/status/1548325815665864706/video/1?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [July 16, 2022](https://x.com/adamwathan/status/1548325815665864706?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

> We got a sneak peek of a small piece of UI for the upcoming job board project and it looks *very nice*. Really excited about it!

## 📚 Learning

### [Lea Verou | CSS Variable Secrets | CSS Day 2022](https://www.youtube.com/watch?v=ZuZizqDF4q8&ref=tailwindweekly.com)

I watched this talk recently and it was just 🤯. I can say I know the basics of CSS variables but this talk took it to a whole new level. I even learned about [@property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property?ref=tailwindweekly.ongloat.com) which seems so handy to solve very specific problems like the ones mentioned in the video. I bet it'll be pretty popular once it reaches more adoption. Overall, it was a GREAT talk!

### [Breaking Out of a Central Wrapper](https://css-irl.info/breaking-out-of-a-central-wrapper/?ref=tailwindweekly.com)

This post addresses a very common problem a developer tends to have with layouts, especially with blog posts and the proposed solutions are *very* good. I especially liked solution #4 (Viewport width breakout technique) since I have never seen it before, also solution #5 (using CSS grid) was very clever! I now have this post bookmarked!

### [Complex vs Compound Selectors](https://www.miriamsuzanne.com/2022/06/15/complex-compound/?ref=tailwindweekly.com)

This one is short and sweet! It's kind of theoretical really, but once you understand the concept of selector types you see it *everywhere.*

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/2c4539bdd790391d1b658a15e2d4de5bddd1732bab79df505cbe58eed6d548fd.jpg)

### [Previewify](https://previewify.app/?ref=tailwindweekly.com)

First of all, the typography of this site is just beautiful 😍! The layout is simple but the great typography, combined with lots of white space and contrasting colors really makes it look *very* elegant.

For the curious, here's Previewify's description:

*Save more time and money by automating your link previews on socials using Previewify. No need for designers, Just plug and play.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/redpixelthemes.com_blog_tailwindcss-colors-different-formats.jpg)

### [Tailwind CSS Color Palette in different CSS color formats](https://redpixelthemes.com/blog/tailwindcss-colors-different-formats/?ref=tailwindweekly.com)

Created by me! I decided to create a handy resource for referring the Tailwind's color palette in the 3 most common CSS color formats: hex code, RGB, and HSL. I also added 1-click copy functionality and quick links so you can find the color you want right away. I hope you find it useful!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

[**PixelSnap 2**](https://tailwindweekly.link/pixelsnap-2?ref=tailwindweekly.ongloat.com) **is the fastest tool for measuring anything on your screen**. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

---

[**CSS Scan**](https://tailwindweekly.link/CSSScan?ref=tailwindweekly.ongloat.com) **is the fastest and easiest way to check, copy, and edit CSS**. Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

## ✌️ Partners

[**CSS Simplified by Shruti Balasa**](https://www.getrevue.co/profile/shrutibalasa?ref=tailwindweekly.ongloat.com): One simple CSS tip every Wednesday from her decade of experience right into your inbox.

---

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](https://ecmascript.news/?ref=tailwindweekly.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-6.jpg)
### Tailwind Weekly #89: an upcoming official job board, another crypto site, and one more component library!
URL: https://tailwindweekly.com/issue-89/
Last updated: 2025-09-23T09:42:58.000Z
Hey everyone, due to some email misconfiguration all the links in today's issue were broken, the problem has now been fixed and I'm resending it, sorry for the trouble!

Hello folks!

It's official, the Tailwind UI team is working on a job board! I'm very excited about this, now we'll have a central place to look for Tailwind CSS devs 😁.

Now onto our usual content 😉.

## 🌟 News

A bit of personal news over here!

I'm helping [@adamwathan](https://x.com/adamwathan?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) and the [@tailwindcss](https://x.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) team launch and run an official job board for Tailwind CSS!

Super excited about this opportunity 😎

PS. 👉 If you want your job included when we launch, DM me

PPS. Reform is still alive and kicking— Peter Suhm (@petersuhm) [July 12, 2022](https://x.com/petersuhm/status/1546874050760286208?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

It looks like they decided to team up with Peter, one of [Reform](https://www.reform.app/?ref=tailwindweekly.ongloat.com)'s creators, which means the site is gonna be slick!

Besides that, we got a few [minor releases](https://github.com/tailwindlabs/tailwindcss/releases?ref=tailwindweekly.ongloat.com), some highlights:

- You can now add a default font-weight for each font size utility
- The safelist config now has support for alpha values

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/kilianvalkhof.com_2022_css-html_are-you-sure-thats-a-number-input_-Macbook-Pro-.jpg)

### [Are you sure that’s a number input?](https://kilianvalkhof.com/2022/css-html/are-you-sure-thats-a-number-input/?ref=tailwindweekly.com)

This article really resonated with me, especially because I have worked with the exact same examples that the author mentions, that is, numbers that don't need to increment/decrement. I always find myself removing that little control widget with CSS. Now I know an accessible alternative!

### [How to add Tailwind to Hugo](https://flaviocopes.com/hugo-add-tailwind/?ref=tailwindweekly.com)

This one is short and sweet, just like Florian always writes. The tutorial is pretty straightforward and the only Hugo-specific thing is right at the end. If you use [Hugo](https://gohugo.io/?ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-89-an-upcoming-official-job-board-another-crypto-site-and-one-more-component-library) and want to try out Tailwind CSS then this article is for you.

### [How to add Tailwind CSS to an existing project](https://design2tailwind.com/blog/tailwindcss-in-existing-project/?ref=tailwindweekly.com)

Written by me! Since I'm a freelance developer I sometimes get projects where I need to work with an existing codebase. If I want to add Tailwind CSS to it then there are a few gotchas I need to take into account. This article outlines them and shows how I usually do it. I hope you like it!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/thirdweb.jpg)

### [Thirdweb](https://thirdweb.com/?ref=tailwindweekly.com)

In my opinion, the crypto craze of the last few years has produced some really amazing sites. Thirdweb is one of them! With dark colors, beautiful gradients, and clean typography this site looks *beautiful*.

For the curious, here's Thirdweb's description:

*Build web3 apps easily. Implement web3 features with powerful SDKs for developers. Drop NFTs with no code. — Ethereum, Polygon, Avalanche, & more.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/default.jpeg)

### [daisyUI](https://daisyui.com/?ref=tailwindweekly.com)

Here's another Tailwind CSS component library for you! This one is a bit different, it works as a Tailwind plugin and comes with already created classes like btn and card , which you can further customize with Tailwind's utility classes.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Become a Pro at building components & layouts with CSS Flexbox and Grid with the** [**Complete Guide to CSS Flex and Grid**](https://tailwindweekly.link/flexbox-grid-book?ref=tailwindweekly.ongloat.com)ebook by [Shruti Balasa](https://x.com/shrutibalasa?ref=tailwindweekly.ongloat.com). I actually read this book and LOVED IT. I have been using flexbox and CSS grid for years and I still learned quite a few things from the book.

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

[**PixelSnap 2**](https://tailwindweekly.link/pixelsnap-2?ref=tailwindweekly.ongloat.com) **is the fastest tool for measuring anything on your screen**. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

## ✌️ Partners

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-7.jpg)
### Tailwind Weekly #88: an upcoming pro course + the usual 😄
URL: https://tailwindweekly.com/issue-88/
Last updated: 2025-09-23T09:58:23.000Z
Hello folks!

Our friend [Simon](https://x.com/simonswiss?ref=tailwindweekly.ongloat.com) has been cooking something pretty awesome for the Tailwind ecosystem and just announced it this week, be sure to check out the news section for more details!

Now onto our usual content 😉.

⭐ We're thinking of adding job postings in future issues so if you're looking for talented Tailwind CSS developers, [here's the info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 🌟 News

There's lots of educational content for Tailwind but not a lot of full-fledged courses so I was pretty excited by Simon's announcement!

He's working on an upcoming course called Pro Tailwind and it looks awesome, check out a sneak peek at the tweet below:

An early sneak peek at my upcoming [@ProTailwind](https://x.com/ProTailwind?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) course on [@tailwindcss](https://x.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 👀🍿🎬 [pic.twitter.com/U0hbTN323N](https://x.com/simonswiss/status/1544999668610113537/video/1?ref=tailwindweekly.com)— Simon Vrachliotis 🇨🇭🇦🇺🏀🏄‍♂️🏂💻 (@simonswiss) [July 7, 2022](https://x.com/simonswiss/status/1544999668610113537?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/use-case-card-2.jpg)

### [Spacing in CSS](https://ishadeed.com/article/spacing-in-css/?ref=tailwindweekly.com)

Another great primer from [Ahmad](https://x.com/shadeed9?ref=tailwindweekly.ongloat.com), this one is a bit old but still holds true. It details all the spacing options you have available when working with CSS and when is best to use each. 

### [Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property](https://www.bram.us/2021/07/23/prevent-unwanted-layout-shifts-caused-by-scrollbars-with-the-scrollbar-gutter-css-property/?ref=tailwindweekly.com)

This one is short and sweet, the title is pretty self-explanatory. It's a very unique and quirky problem to have but the post explains it very well and its concise.

### [How to add custom breakpoints to TailwindCSS](https://design2tailwind.com/blog/tailwindcss-breakpoints-custom?ref=tailwindweekly.com)

Written but yours truly! With this post, you'll learn how to add breakpoints of any size and at any position (smaller, bigger, or in the middle). The middle one took me a bit to figure out but I'm proud of the solution!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/twitter-card.jpg)

### [IndiePaper](https://7401.cn.com/?ref=tailwindweekly.com)

This site has one of the best 3D animations I have seen on a website in *years*, it looks so freaking cool! While the typography is kind of generic and the layout is pretty simple, the choice of colors, the beautiful icons and the 3D stuff really make it shine!

For the curious here's IndiePaper's official description:

*IndiePaper is a place for authors to write, edit, publish and sell their books. Just write and we'll take care of the rest, taking your manuscript to beautiful self-published books to the hands of your readers.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/og-image-2.jpg)

### [Flowbite](https://flowbite.com/blocks/?ref=tailwindweekly.com)

I decided to start featuring component libraries made with Tailwind CSS and wanted to start with Flowbite! They recently launched a Flowbite Blocks library and it looks very nice. I wouldn't call it Tailwind UI level but they have some nice variety. It currently only has blocks for Marketing UI but I expect that to change soon. 

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Polypane**](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) is a great tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

If you want the latest crypto news but you don't want it to be dry and confusing, join the 60,000 people who read [**the CoinSnacks weekly newsletter**](https://www.coinsnacks.com/?ref=tailwindweekly.com) for free every week. It’s what you need to know… without the fluff.

## ✌️ Partners

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**TypeScript Weekly**](https://typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](https://ecmascript.news/?ref=tailwindweekly.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-8.jpg)
### Tailwind Weekly #87: templates are here baby 😎!
URL: https://tailwindweekly.com/issue-87/
Last updated: 2025-09-24T04:57:52.000Z
Hello folks!

The templates update for Tailwind UI is here and it's awesome 🤩. I particularly love the podcast website design, I think it would also look good as a blog.

Read the news section for more details on the rest!

Now onto our usual content 😉.

⭐ We're thinking of adding job postings in future issues so if you're looking for talented Tailwind CSS developers, [here's the info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 🌟 News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/69735989-a6d2-4fdc-aa09-6c179fbd10fc/card.4504188e1d68bd278e2dd9bf6d0c3102.jpg?t=1738083321)

This week the Tailwind Labs team released a special update for Tailwind UI, 5 new template designs made with Next.js and coded like a production website, here's the list:

- [Syntax](https://syntax.tailwindui.com/?ref=tailwindweekly.ongloat.com) — a documentation site template powered by Stripe’s new [Markdoc](https://markdoc.io/?ref=tailwindweekly.ongloat.com) library that’s perfect for things like open-source projects or product documentation.
- [Primer](https://primer.tailwindui.com/?ref=tailwindweekly.ongloat.com) — a landing page template for ebooks and courses that bakes in a lot of the best practices we’ve learned releasing our own info products.
- [Salient](https://salient.tailwindui.com/?ref=tailwindweekly.ongloat.com) — a stunning but simple SaaS marketing website you can quickly adapt for your next idea without burning time you wish you were spending on the actual product.
- [Keynote](https://keynote.tailwindui.com/?ref=tailwindweekly.ongloat.com) — a beautiful conference website design that works just as well for small local gatherings as it does for international events.
- [Transmit](https://transmit.tailwindui.com/?ref=tailwindweekly.ongloat.com) — an awesome podcasting template with a custom persistent audio player that you can wire up to your own RSS feed in no time.

They cost $99 each but you can get all of them plus all the other Tailwind UI stuff for a single all-access forever price of $299.

Quoting Adam:

"*It’s a one-time purchase of *$299*. No subscription, no upgrade costs — if we add something new to Tailwind UI, it’s yours, forever*"

## 📚 Learning

### [Master the :nth-child() Pseudo-Class](https://www.youtube.com/watch?v=fg7GEN7PbWs&ref=tailwindweekly.com)

Another awesome video from CSS Weekly! With this one, you'll learn all about :nth-child selectors, how they work, what kind of math works with them, and even how to use negative numbers! All packed in a less than 15 minutes video!

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/000e2c4a-30fe-46ed-bcab-6d6588438d01/IDdf5OzuE7lBmH80zwdUpx7MnrMj2O-metaSG93IHRvIHNlbmQgZS1tYWlscyBpbiBMYXJhdmVsIHdpdGggVGFpbHdpbmQgQ1NTLmpwZw---.jpeg?t=1738083322)

### [How to send e-mails in Laravel with Tailwind CSS](https://ralphjsmit.com/laravel-emails-tailwind-css?ref=tailwindweekly.com)

This article really caught my eye because it's such a unique use case. The most interesting thing is that the author doesn't use [Maizzle](https://maizzle.com/?ref=tailwindweekly.ongloat.com) and decided to use his own approach. Long story short he created a separate tailwind config file just for his emails and he's inlining the generated CSS on the email template. Pretty standard stuff but with Tailwind!

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/bfb111af-acb7-4db7-af9f-f4588706c6d4/www.amtec.us.com_-Macbook-Pro-.jpg?t=1738083322)

### [Amtec](https://www.amtec.us.com/?ref=tailwindweekly.com)

Who said a recruitment agency's website has to be boring! This week's showcase has very good-looking real-people shots, elegant typography, and vibrant colors. I love the hero image hover animation, and the whole shapes and lines combination, kudos to the designer!

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/59dab6a5-cba3-4250-8a0c-dbdd41eb0f3f/relevant.png?t=1738083323)

### [Tailwind DX](https://gimli.app/tailwinddx.html?ref=tailwindweekly.com)

This was on my radar a couple of days ago. Tailwind DX is a Chrome Devtools extension for Tailwind CSS developers. I see it as standard devtools but on steroids, you can change values based on tailwind's config and toggle individual classes too. [The video](https://www.youtube.com/watch?v=ObDOU1uYJ1g&t=1s&ref=tailwindweekly.ongloat.com) explains it a lot better. Overall, a very good tool to have on your arsenal. 

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Polypane**](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) is a great tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

If you want the latest crypto news but you don't want it to be dry and confusing, join the 60,000 people who read [**the CoinSnacks weekly newsletter**](https://coinsnacks.com/?ref=tailwindweekly.com) for free every week. It’s what you need to know… without the fluff.

## ✌️ Partners

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-11.jpeg)
### Tailwind Weekly #86: another template sneak peek, rems vs pixels and more icons for you!
URL: https://tailwindweekly.com/issue-86/
Last updated: 2025-09-24T05:04:58.000Z
Hello folks!

No official news this week except for [another sneak peek](https://twitter.com/adamwathan/status/1536702053841616897?ref=tailwindweekly.ongloat.com) of the upcoming templates product for Tailwind UI, really looking forward to seeing them all!

Now onto our usual content 😉.

⭐ We're thinking of adding job postings in future issues so if you're looking for talented Tailwind CSS developers, [here's the info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 📚 Learning

### [A Practical Guide to Aspect Ratio in CSS](https://www.youtube.com/watch?v=tStiWGcnkWI&ref=tailwindweekly.com)

Now that we have official support for the native implementation of the aspect-ratio property (instead of needing [the plugin](https://github.com/tailwindlabs/tailwindcss-aspect-ratio?ref=tailwindweekly.ongloat.com)) I found this video to be a great refresher and learned a few tricks too. Definitely a great watch if you work with aspect ratio and would like to learn more about it.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/fbd86450-9127-41b0-b74e-1b91df1f26d3/og-surprising-truth-about-pixels-and-accessibility.png?t=1738083323)

### [The Surprising Truth About Pixels and Accessibility](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/?ref=tailwindweekly.com)

I have heard the debate about pixels vs rems a lot for the last few years but I like Josh's angle on his article. His main argument is that "*it depends*" but he also explains why and how to develop your intuition to know what to use in every situation. Overall a great read. 

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/cba3cbea-aed9-4de6-baab-7e4e7955ac31/liftoff-1-1.jpeg?t=1738083324)

### [Liftoff Creator Course](https://liftoffcourse.com/?ref=tailwindweekly.com)

This week's showcase, for some reason, reminded me of Guardians of the Galaxy, it's so flashy! Beautiful colors, even more beautiful gradients, and the whole space theme and real-life pictures really make it shine. The subtle hover animations are a very nice touch.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7aad05a7-77bb-4391-8df5-73e1b2f741ae/og-image-1.png?t=1738083324)

### [Basicons](https://basicons.xyz/?ref=tailwindweekly.com)

This set of icons has a very *minimalistic* vibe but I love it! It includes social icons and you can also customize the stroke, and size and can copy the SVG code directly, no need to download files if you don't want to. [Heroicons](https://heroicons.com/?ref=tailwindweekly.ongloat.com) is my favorite but these really serve as a great alternative.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Polypane**](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) is a great tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

If you want the latest crypto news but you don't want it to be dry and confusing, join the 60,000 people who read [**the CoinSnacks weekly newsletter**](https://coinsnacks.com/?ref=tailwindweekly.com) for free every week. It’s what you need to know… without the fluff.

## ✌️ Partners

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b2f44348-c030-4e60-8e44-96b225bb5c08/coffee.png?t=1738083324)
### Tailwind Weekly #85: the long-awaited v3.1 is out folks 🚀
URL: https://tailwindweekly.com/issue-85/
Last updated: 2025-09-24T05:12:55.000Z
Hello folks!

v3.1 was just released a few days ago and it's packed with small but powerful improvements. I'm pretty excited about the "Arbitrary Variants" feature, I think it will be a game-changer for more complex sites. Check out the news section for more details!

Now onto our usual content 😉.

⭐ We're thinking of adding job postings in future issues so if you're looking for talented Tailwind CSS developers, [here's the info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 🌟 News

With v3.1 being out, Adam recorded a video showing the highlights and it's hilarious 😂, but be sure to check [the official blog post](https://tailwindcss.com/blog/tailwindcss-v3-1?ref=tailwindweekly.com) for more details on the release.

On the community side, we got a few goodies!

Shruti, known for her [youtube videos](https://www.youtube.com/c/Thirus/videos?ref=tailwindweekly.ongloat.com) about Tailwind CSS, tweeted a very cool idea, [a Tailwind Conference](https://twitter.com/shrutibalasa/status/1533794617094979585?ref=tailwindweekly.ongloat.com)!

Then she had the following exchange with Adam:

> Maybe one day! The part that scares me is I just don't have any idea what there is for anyone to talk about 😅— Adam Wathan (@adamwathan) [June 6, 2022](https://twitter.com/adamwathan/status/1533796573225918465?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

I think a Tailwind CSS conference would be pretty exciting! If you have an idea for a talk, be sure to reply to the thread and let Adam know, maybe we can convince him 🤩.

On another note, [Maizzle just hit v4.0](https://twitter.com/cossssmin/status/1534246796100345859?ref=tailwindweekly.ongloat.com)! Maizzle is basically Tailwind CSS for emails, and with this new update, it now supports Tailwind 3.0 and added some cool features like new variants for targeting specific email clients.

## 📚 Learning

Another video for you! This one is about setting up Tailwind on the popular static site generator [Astro](https://astro.build/?ref=tailwindweekly.ongloat.com). Astro has been getting some traction recently because, while it embraces popular JS frameworks, it also focuses a lot on generating fast websites with clean markup.

### [CSS Grids Simplified](https://laracasts.com/series/css-grids-simplified?utm%5Fcampaign=tailwind-weekly-85&ref=tailwindweekly.com)

Another goodie from Shruti, this one is a course on [Laracasts](https://laracasts.com/?ref=tailwindweekly.ongloat.com) about CSS grids. If you still feel a bit intimidated while working with CSS grid then this video series will be great for you. Even though it doesn't use Tailwind, a lot of the concepts can be replicated with Tailwind CSS utility classes. 

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/f5908605-ef8e-42c9-83b6-869694b4d67a/hyperdocs.netlify.app_-Macbook-Pro-.png?t=1738083325)

### [Hyperdocs](https://hyperdocs.netlify.app/?ref=tailwindweekly.com)

This week's showcase is Hyperdoc's landing page. I have to say that this homepage is gorgeous 😍.

Even though it uses a common font for Tailwind websites (Inter) they really made it shine with the different colors and weights. And its use of beautiful gradients and elegant shadows make for an incredible combination.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/795df139-eed4-4bd3-89fd-986b384fcb3b/og-image.png?t=1738083326)

### [Gust](https://www.getgust.com/?ref=tailwindweekly.com)

Gust is a WordPress Theme starter made with Tailwind CSS. Even tho it's a paid product I think it has some great features that justify it. It has Woocommerce support, is speed optimized, and offers a library of components and templates you can use out of the box.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Polypane**](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) is a great tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?ref=tailwindweekly.com)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

If you want the latest crypto news but you don't want it to be dry and confusing, join the 60,000 people who read [**the CoinSnacks weekly newsletter**](https://coinsnacks.com/?ref=tailwindweekly.com) for free every week. It’s what you need to know… without the fluff.

## ✌️ Partners

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/911b78fb-2936-49ed-acc2-e70e04f8ed87/coffee.png?t=1738083326)
### Tailwind Weekly #84: new Headless UI update, VS Code language mode and upcoming variant grouping support!
URL: https://tailwindweekly.com/issue-84/
Last updated: 2025-09-24T05:28:47.000Z
Hello folks!

The Tailwind corner is as lively as ever! We got a few official updates plus some sneak peeks of upcoming stuff.

Even a bonus from Adam: if you find it annoying that you can't use the dev tools color picker when working with Tailwind CSS, [here's how to make it work](https://twitter.com/adamwathan/status/1529596984235118595?ref=tailwindweekly.ongloat.com)!

Now, onto our usual menu 😉.

## 🌟 News

We got a [big official blog post](https://tailwindcss.com/blog/2022-05-23-headless-ui-v1-6-tailwind-ui-team-management?ref=tailwindweekly.ongloat.com) on the Tailwind Blog, here's the TL;DR:

1. Headless UI v1.6 is out. Includes multi-select support, better HTML form support, and better focus trapping
2. Tailwind UI now has better team management. No more sharing passwords with your coworkers, now your company can buy licenses for each of your teammates.
3. Vue examples in Tailwind UI now use <script setup>. A small but powerful change for Vue 3 users.
4. We now got our own language mode for VS Code! No more squiggly error lines in your CSS files, now you can set your CSS files to Tailwind CSS language mode!
5. Tailwind CSS templates, the upcoming new product category for Tailwind UI, is coming soon, *possibly* this month.

We also got another tidbit from Adam. There's [upcoming experimental support for variant grouping](https://github.com/tailwindlabs/tailwindcss/pull/8405?ref=tailwindweekly.ongloat.com), imagine being able to write your classes like this:

Some people prefer it this way and have been requesting it for ages now, it'll possibly be released on the upcoming 3.1 update so stay tuned!

## 📚 Learning

Another great code-along video from Simon, I love watching Simon's videos because he explains *why* he uses some classes, and not just shows you how to use them. I always end up learning something new!

### [How to set up Tailwind in Yew](https://blog.vomkonstant.in/blog/tailwind-with-webassembly-yew?ref=tailwindweekly.com)

Yew is a front-end framework for WebAssembly in Rust, this article shows how to add Tailwind CSS to a Yew project using wasm-pack, which is like webpack but for Web Assembly. Honestly, I was surprised at how easy its to add it, I thought it was going to be a bit more convoluted. 

### [How to work with background images in Tailwind CSS](https://redpixelthemes.com/blog/tailwindcss-background-image/?ref=tailwindweekly.ongloat.com)

Here's another tailwind-specific tutorial for you, written by yours truly! This time, I wrote about 3 ways to use background images in Tailwind CSS and with some additional tips for hero images and using them on different breakpoints.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a062f1a1-147d-4331-9159-24e5120df38e/vapor.laravel.com_-Macbook-Pro-.png?t=1738083322)

### [Laravel Vapor](https://vapor.laravel.com/?ref=tailwindweekly.com)

This week I bring you an incredible landing page, the Laravel Vapor homepage. Great typography, clean design, beautiful color combinations, and pretty shapes everywhere. And the copy and structure, while a mix of traditional and modern, looks and sounds powerful!

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a6da6ff3-5d3d-4143-91b7-99990aa6d5c2/tailwindcss-plugin-starter.png?t=1738083323)

### [tailwindcss-plugin-starter](https://github.com/cossssmin/tailwindcss-plugin-starter?ref=tailwindweekly.ongloat.com)

Ever wanted to create your own Tailwind CSS plugin? This plugin starter is what you need! Includes examples of the Tailwind's API, tests with Jest, and even code formatting with prettier. Made by Cosmin, the author of [Maizzle](https://maizzle.com/?ref=tailwindweekly.ongloat.com) and various other plugins for Tailwind CSS.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Polypane**](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) is a great tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

**There's a reason over 2.6 million people start their day with** [**Morning Brew**](https://www.morningbrew.com/daily/subscribe?utm%5Fsource=tailwind-weekly)— the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.

---

If you want the latest crypto news but you don't want it to be dry and confusing, join the 60,000 people who read [**the CoinSnacks weekly newsletter**](https://coinsnacks.com/?ref=tailwindweekly.com) for free every week. It’s what you need to know… without the fluff.

## ✌️ Partners

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/72118598-a81c-4e7f-a174-e1c9cf515e8a/coffee.png?t=1738083323)
### Tailwind Weekly #83: 100MM downloads milestone, upcoming templates product + more!
URL: https://tailwindweekly.com/issue-83/
Last updated: 2025-09-24T05:38:11.000Z
Hello folks!

Guess what, Tailwind CSS hit a pretty big milestone last week, it got to [100 MILLION downloads](https://twitter.com/adamwathan/status/1527964040240283648?ref=tailwindweekly.ongloat.com) 🎉 🥳.

I still remember when I started using Tailwind, back at the v0.5 release, it feels ages ago and the framework has come such a long way, let's hope to get it to 1 billion 🚀!

Now onto our usual content 😉.

⭐ We're thinking of adding job postings in future issues so if you're looking for talented Tailwind CSS developers, [here's the info](https://tailwindweekly.ongloat.com/advertise/?ref=tailwindweekly.com).

## 🌟 News

> For the past couple of months we've been working hard on a bunch of complete website templates to offer as part of Tailwind UI 🤩

> Here's a sneak peek at a documentation template we've been working on, built with Next.js and Markdoc 🫣 [pic.twitter.com/1nBdup5OOv](https://t.co/1nBdup5OOv?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [May 18, 2022](https://twitter.com/adamwathan/status/1526925883625328641?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

That's right, we got a preview from Adam about the upcoming new product category for Tailwind UI, web templates! I'm really excited about that one since we'll have no-constraints designs that will be great starting points for all kinds of full-page designs. No more mix and matching snippets, now you'll have the full page design available!

## 📚 Learning

This week I bring you two videos, I usually just feature 1 video or link but these are so good I just had to feature them!

Recently I had a project where accessibility was *very* important and I had to develop a keyboard accessible accordion component for some FAQs the client wanted to display. Let me tell you, using the [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details?ref=tailwindweekly.ongloat.com) element along with the open modifier you'll learn how to use in this video made everything *a lot* easier than coding it in JS from scratch. I definitely recommend you check it out for the next time you need to mess around with accordions!

Man, this video gave me so many ideas for adding interactivity to Tailwind UI components, Sam has such a knack for breaking down intimidating concepts and teaching them well. This time he uses the recently released Calendar snippets and makes them interactive for his specific use case. A perfect watch if you regularly adapt Tailwind UI stuff at the functionality level, not just the style level.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a3876483-8401-4865-a942-80582ebd3a93/jacksleight.dev.jpg?t=1738083323)

### [Jack Sleight](https://jacksleight.dev/?ref=tailwindweekly.com)

Another personal site! This one is more of a blog and looks very minimal at first glance, but it has some nice tiny interactions, beautiful typography (especially for a tech blog), and great color choices. I particularly love that pink 🎨.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/438b21a7-0a08-4838-8a31-297a86b24623/tailwind-grid-auto-fit.png?t=1738083323)

### [tailwind-grid-auto-fit](https://github.com/ThirusOfficial/tailwind-grid-auto-fit?ref=tailwindweekly.com)

This one is a great plugin from [Shruti](https://twitter.com/shrutibalasa?ref=tailwindweekly.ongloat.com). It helps you create a responsive grid layout without using media queries by using auto-fit . Don't know what that is or why it's cool to have it? [This article](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/?ref=tailwindweekly.ongloat.com) explains it much better than I ever could.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Polypane**](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) is a great tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

[**PixelSnap 2**](https://tailwindweekly.link/pixelsnap-2?ref=tailwindweekly.ongloat.com) **is the fastest tool for measuring anything on your screen**. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

---

**Hate using git on the command line? I do too, that's why I use** [**Tower**](https://tailwindweekly.link/tower-git-client?ref=tailwindweekly.ongloat.com), which is the best git client I have *ever* used, and trust me, I have tried them all. Tower has helped me stop fearing git and I cannot imagine going back. Yes, it's that good!

## ✌️ Partners

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/87f99641-90c3-414a-acf0-5d4519aec727/coffee.png?t=1738083324)
### Tailwind Weekly #82: upcoming arbitrary variant support, great :has() video, and cool plugin for email development!
URL: https://tailwindweekly.com/issue-82/
Last updated: 2025-09-24T05:58:18.000Z
Hello folks!

We got a nice new exciting feature coming up, check the news sections for more details. And of course, the usual menu. I really love this week's showcase, I'm a huge fan of minimal sites, and this one is just *elegant.* 

Now onto our usual 😉

## 🌟 News

On the official side, we got [a preview](https://twitter.com/adamwathan/status/1523345746421985281?ref=tailwindweekly.ongloat.com) of an [upcoming feature](https://github.com/tailwindlabs/tailwindcss/pull/8299?ref=tailwindweekly.ongloat.com), now we'll have arbitrary variant support in Tailwind CSS 🥳. This is huge because now we'll be able to easily create our own variants instead of relying only on plugins.

Imagine being able to write this kind of syntax into your markup:

And have all the li children get an underline. With just one single class and no custom CSS at all, mind-blowing 🤯.

This new feature will be released in the upcoming 3.1 update so stay tuned!

Now, on the community side we have:

- Termwind, a tool that helps you create command-line tools with Tailwind CSS and PHP just got a [new release](https://twitter.com/xiCO2k/status/1521407211636858881?ref=tailwindweekly.ongloat.com). Now you can use the justify-center and hidden classes.
- Shruti Balasa, which you may know from [her videos on tailwind](https://www.youtube.com/c/Thirus/videos?ref=tailwindweekly.ongloat.com), is conducting a full-day in-person workshop on Tailwind CSS in Amsterdam on June 13th at [React Summit](https://twitter.com/ReactSummit?ref=tailwindweekly.ongloat.com).

## 📚 Learning

### [Practical Use Cases for :has() Pseudo-Class](https://www.youtube.com/watch?v=ljD%5FENTYuB8&ref=tailwindweekly.ongloat.com)

I have been hearing about the :has() selector for a while now and everybody is talking about how much of a game-changer it will be. Well, this video really opened my eyes to it and yes, it IS a game-changer I have been waiting for something like this for YEARS 🚀.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/image.png)

### [Dominik Sobe](https://dominiksobe.com/?ref=tailwindweekly.com)

This week I bring you another personal site, from [Dominik Sobe](https://twitter.com/sobedominik?ref=tailwindweekly.ongloat.com), an indie hacker building [HelpKit](https://twitter.com/HelpkitHQ?ref=tailwindweekly.ongloat.com).

I love how minimalist it is and it uses just a few colors and lots of spacing to denote visual hierarchy. The typography is beautiful and I dig the use of Japanese for some of the links, it's a very nice touch.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/image-1.png)

### [tailwindcss-email-variants](https://github.com/maizzle/tailwindcss-email-variants?ref=tailwindweekly.ongloat.com)

This is another great plugin from [cossssmin](https://twitter.com/cossssmin?ref=tailwindweekly.ongloat.com), who's building [Maizzle](https://twitter.com/maizzlejs?ref=tailwindweekly.ongloat.com). I have featured it a few times but for the new folks, Maizzle helps you create email templates with Tailwind CSS. This plugin integrates very well with it.

It basically helps you add variants to add code for specific email clients, think Gmail, Outlook, etc. It's as simple as: <div class="gmail:hidden">...</div>

Definitely a must-have if you're working with emails and Tailwind CSS.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Polypane**](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) is a great tool for **testing your project’s responsive design and accessibility**. The best thing about it is that it helps me catch visual bugs in seconds rather than hours. Definitely worth the money for the time I have saved.

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use the coupon code TAILWIND15 for 15% off the annual plan.

---

[**PixelSnap 2**](https://tailwindweekly.link/pixelsnap-2?ref=tailwindweekly.ongloat.com) **is the fastest tool for measuring anything on your screen**. I use it as part of my front-end development workflow to make sure I'm translating screens as close as possible to the design.

---

**Hate using git on the command line? I do too, that's why I use** [**Tower**](https://tailwindweekly.link/tower-git-client?ref=tailwindweekly.ongloat.com), which is the best git client I have *ever* used, and trust me, I have tried them all. Tower has helped me stop fearing git and I cannot imagine going back. Yes, it's that good!

## ✌️ Partners

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**TypeScript Weekly**](https://www.typescript-weekly.com/?ref=tailwindweekly.ongloat.com): the best TypeScript links every week, right in your inbox.

---

[**ES.next News**](http://esnextnews.com/?ref=tailwindweekly.ongloat.com): learn about the latest in JavaScript and cross-platform tools

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/image-2.png)
### Tailwind Weekly #81: a Tailwind CSS game, a fancy shape tool, and some food for thought!
URL: https://tailwindweekly.com/issue-81/
Last updated: 2025-09-24T08:34:35.000Z
Hello folks!

In this issue, I got all of you a pretty fun Tailwind CSS game, a fancy shape tool generator, a gorgeous bank website, and an article that makes you think deeply about how you write your markup.

Bon appetite 😉.

## 🌟 News

No official news this week but I do have a fun tidbit for you, the company behind popular Tailwind CSS tools like [Windy](https://usewindy.com/?ref=tailwindweekly.ongloat.com) and [DevTools for Tailwind](https://devtoolsfortailwind.com/?ref=tailwindweekly.ongloat.com) built [a web-based game](https://knightsoftheflexboxtable.com/?ref=tailwindweekly.ongloat.com) to learn flexbox using tailwind classes.

It's a very simple game but the creativity is astounding, even the cursor is a little sword that you "wave around" 😂 .

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/363745.jpeg)

### [Write HTML, the HTML Way (Not the XHTML Way)](https://css-tricks.com/write-html-the-html-way-not-the-xhtml-way/?ref=tailwindweekly.com)

This article might not be very CSS related but I can say it fundamentally changed how I write my HTML now. I used to be very rigid about how I wrote my markup since have been coding HTML for so long now but this article explains that yes, back then, it had to be rigid but it doesn't have to be that way anymore and we have a lot more flexibility with our markup than we thought.

Just some food for thought 🙂.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/column-og.jpg)

### [Column Bank](https://column.com/?ref=tailwindweekly.com)

Adam [tweeted](https://x.com/adamwathan/status/1517174861105401858?ref=tailwindweekly.ongloat.com) about this site last week and I must say it looks gorgeous, who thought a bank website could look this modern and aesthetically pleasing 😍. The typography is top-notch, the colors are varied but very professional and the animations are beautiful to see. Overall, a very nice-looking website.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/9elements.github.io_fancy-border-radius_-Macbook-Pro-.jpg)

### [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/?ref=tailwindweekly.com)

This week I have another useful tool for you! This one is about doing fancy stuff with border-radius.

A lot of people add shapes to their design using clip-path but it can sometimes be a pain in the butt to deal with it. For those times, and if the shape I want to create allows it, I use this tool to create the shape using border radius instead. After I get my values I just put in my tailwind config, use the class and that's it!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Polypane is a great tool for **testing your project’s responsive design and accessibility**. I use this daily for my frontend work and its 👌. Check it out [here](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com).

---

**I highly recommend** [**LambdaTest**](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) **as your cross-browser testing tool**, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

[**Get console errors right on your page.**](https://tailwindweekly.link/toastlog?ref=tailwindweekly.ongloat.com) Be aware of errors that are happening on your website without having to open the browser's console. See logs in a toast notification format and find out bugs you didn't know existed!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-9.jpg)
### Tailwind Weekly #80: create PDFs and WP themes with Tailwind CSS + more!
URL: https://tailwindweekly.com/issue-80/
Last updated: 2025-09-24T08:41:30.000Z
Hello folks!

Another quiet week on the news front but I do have a tid bit for you all.

Our favorite screencaster [Simon](https://x.com/simonswiss?ref=tailwindweekly.ongloat.com) is launching a Tailwind CSS course soon, called Pro Tailwind, you can sign up for updates [here](https://www.protailwind.com/?ref=tailwindweekly.ongloat.com), definitely check it out!

Now, onto our usual menu 😉.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/364880.jpeg)

### [Adding Tailwind CSS to New and Existing WordPress Themes](https://css-tricks.com/adding-tailwind-css-to-wordpress-themes/?ref=tailwindweekly.com)

Loved this article, it explains the instrincasies of working with Wordpress themes and the new WordPress editor, it also promotes a new theme generator based on the author's recommendations. If you do WordPress development and love Tailwind CSS then you'll love this article.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/OgCard-908fa90639d24677a186c1178a9c3a44.jpg)

### [Artificial](https://artificial.io/?ref=tailwindweekly.com)

That bg video and hero combination looks *soooo* cool! You wouldn't think this was an insurance startup at a first glance. The colors, the gradients, the clear visual flow, this is a top notch landing page that understands it audience, wants to *wow* them and *succeeds*.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwindpdf.com_-Macbook-Pro-.jpg)

### [TailwindPDF](https://tailwindpdf.com/?ref=tailwindweekly.com)

This one popped into my feed this week and I found it super handy! Imagine being able to code your CV using Tailwind CSS, pasting the code here and getting a pristine PDF you can share, wild I tell you!

Another cool thing is its export options, you're not limited to PDF, there's PNG, JPG and WEBP too. Overall a very handy tool to have on your arsenal.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Design2Tailwind**](https://design2tailwind.com/?ref=tailwindweekly.ongloat.com) **\- We convert your design to Tailwind CSS.** Focus on your business logic. Leave the markup code in our capable hands.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

Polypane is a great tool for **testing your project’s responsive design and accessibility**. I use this daily for my frontend work and its 👌. Check it out [here](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com).

---

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-10.jpg)
### Tailwind Weekly #79: learn SVG favicons, animate tailwind + more!
URL: https://tailwindweekly.com/issue-79/
Last updated: 2025-09-24T08:46:59.000Z
Hello folks!

It's been a quiet week on the tailwind front so no news this time but, as always, I have some interesting links to share with you.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/HTML-Blog-Cover.jpg)

### [OMG, SVG Favicons FTW!](https://austingil.com/svg-favicons/?ref=tailwindweekly.com)

Yet another favicon article but this one blew my mind recently! Ever wonder how websites could change their favicons based on specific actions you took on the site? Well, guess what, they're probably using SVG! And this article shows you how to use them, create them, and even how to do a dark mode version. Pretty useful! 

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/kandji-default-og-image.jpg)

### [Kandji](https://www.kandji.io/?ref=tailwindweekly.com)

Kandji's landing page is a great example of what you can achieve with a basic but tried and true layout, simple yet great contrasting colors, data-driven copy, and some nice screenshots. Remember folks, simple and clear it's better than fancy but confusing!

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwindcss-animate.jpg)

### [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate?ref=tailwindweekly.ongloat.com)

You probably know that Tailwind CSS ships with some basic animation classes and even a few keyframe animations. They're good enough to get you started but this plugin gets you to the next level!

With this plugin, you'll be able to manipulate your keyframe animations however you want. Imagine changing the animation direction, iteration count, and even the animation play state with just utility classes, surreal!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Design2Tailwind**](https://design2tailwind.com/?ref=tailwindweekly.ongloat.com) **\- We convert your design to Tailwind CSS.** Focus on your business logic. Leave the markup code in our capable hands.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**Designing on your own and want fancy icons?** [**Check out Iconfinder**](https://www.iconfinder.com/?ref=vivgui), they have the biggest and best selection of icons I have ever seen and at very affordable prices.

---

[**This Week In React**](https://www.iconfinder.com/?ref=vivgui): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-11.jpg)
### Tailwind Weekly #78: learn the origins of Tailwind CSS + more!
URL: https://tailwindweekly.com/issue-78/
Last updated: 2025-09-24T08:54:43.000Z
Hello folks!

What a nostalgic week! We got a video about the origins of our favorite CSS framework and also got a new marketing site for the book that started it all.

For all of you that have been using Tailwind CSS and following Adam and Steve's journey from the beginning, it's been quite a ride, isn't it?

Let's hope for more years to come ❤️.

## 🌟 News

Offerzen released a documentary about Laravel a few weeks ago and its turns out they also recorded this bit about Tailwind CSS and decided to release it this week, it's awesome!

On a side note, I know this is not directly related to Tailwind but this book is so good I had to mention it:

> Same book but the Refactoring UI website got a fresh coat of paint 💅🏻

> Really happy with how this turned out 😍

> Check it out 👉🏻[https://t.co/RGozsnhg0H](https://x.com/steveschoger/status/1512150373917761551/photo/1?ref=tailwindweekly.com) [pic.twitter.com/fRFOmDoGKQ](https://t.co/fRFOmDoGKQ?ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-78-learn-the-origins-of-tailwind-css-more)— Steve Schoger (@steveschoger) [April 7, 2022](https://x.com/steveschoger/status/1512150373917761551?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

A few years ago Adam and Steve wrote an incredible book called "Refactoring UI", about designing good interfaces, this week they released a new website for the book and while the good is excellent, the marketing website is on another level! Do check it out!

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/og-understanding-layout-algorithms-1.jpg)

### [Understanding Layout Algorithms](https://www.joshwcomeau.com/css/understanding-layout-algorithms/?ref=tailwindweekly.com)

This is an *incredible article* and will seriously change how you think about CSS layout features like positioning, flexbox, CSS grid, tables, etc. This is an article I wish I had read years ago, yes, it's that good. If you work with CSS on a daily basis you *have* to read it.

### [How to customize the container component in Tailwind CSS](https://design2tailwind.com/blog/tailwindcss-container-component/?ref=tailwindweekly.ongloat.com)

This one is written by yours truly! I wanted to document some things I learned while using the container component and also decided to share it with you all 😄.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/www.usmanasifdev.com.jpg)

### [Usman Asif](https://usmanasifdev.com/?ref=tailwindweekly.com)

This is a beautiful portfolio site, it uses a lot of Tailwind's default colors but the layout and design make it very unique and aesthetically pleasing. I love its use of background patterns, its varied shapes, and the custom icons. Overall it's a great example of a good-looking portfolio site 🧑‍🎨. 

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/www.transition.style.jpg)

### [transition.css](https://www.transition.style/?ref=tailwindweekly.com)

Who doesn't love animations! This is another library that does CSS transitions and does it very simple, you just import a CSS file and it set the animations via data attributes in your HTML, its as simple as:

<div transition-style="in:wipe:up"></div>

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Design2Tailwind**](https://design2tailwind.com/?ref=tailwindweekly.ongloat.com) **\- We convert your design to Tailwind CSS.** Focus on your business logic. Leave the markup code in our capable hands.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**Designing on your own and want fancy icons?** [**Check out Iconfinder**](https://www.iconfinder.com/?ref=vivgui), they have the biggest and best selection of icons I have ever seen. All from highly talented designers from around the world.

---

[**This Week In React**](https://thisweekinreact.com/?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-12.jpg)
### Tailwind Weekly #77: improvements to Tailwind Play and an upcoming new product!
URL: https://tailwindweekly.com/issue-77/
Last updated: 2025-09-24T09:03:15.000Z
Hello folks!

What an exciting week! We got an update to Tailwind Play and a new product category sneak peek for Tailwind UI.

If you do want to hear the behind-the-scenes story behind the new product the Tailwind Labs team is cooking I recommend you listen to [this podcast episode](https://artofproductpodcast.com/episode-205?ref=tailwindweekly.ongloat.com) from "The Art of Product" where Adam is very candid about it.

Now, onto our usual menu 😉.

## 🌟 News

First things first!

Steve made a very exciting announcement this week, regarding a new future project from the Tailwind Labs team. It seems the next product will be full-blown templates, instead of just component snippets.

Overall, I think it's a great move for the team and I, as someone who uses Tailwind UI components quite a lot, am *very* excited to see what designs they come up with. This will definitely be a must-buy for me 💸.

> ✨ New exciting things happening at [@tailwindlabs](https://x.com/tailwindlabs?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com).

> Over the last few weeks, [@jamesm](https://x.com/jamesm?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) and I have been designing a collection of official Tailwind CSS templates.

> Here's a little peek. Stay tuned for more 👀 [pic.twitter.com/wMnOeo9iKo](https://x.com/steveschoger/status/1509176397855694854/photo/1?ref=tailwindweekly.com)— Steve Schoger (@steveschoger) [March 30, 2022](https://x.com/steveschoger/status/1509176397855694854?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Second, Tailwind Play got a [very big update](https://x.com/adamwathan/status/1509947138498875393?ref=tailwindweekly.ongloat.com) with lots of features, including automatic code formatting, a new "Generated CSS" panel, and a new "Copy" button on the code editor, among other things.

We also got a[ very cool announcement](https://x.com/marcelpociot/status/1509551764210700298?ref=tailwindweekly.ongloat.com) from the creators of Windy and our very own sponsor Devtools for Tailwind, they launched a free tool that generates style guides automatically from your Tailwind config files.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/343613.jpeg)

### [Using the Specificity of :where() as a CSS Reset](https://css-tricks.com/using-the-specificity-of-where-as-a-css-reset/?ref=tailwindweekly.com)

I kept hearing about the new :where pseudo-class a few months ago and didn't think much of it until I read this article. Now I understand why the Tailwind CSS team used to achieve the [not-prose component reset feature](https://github.com/tailwindlabs/tailwindcss-typography?ref=tailwindweekly.ongloat.com), :where() works beautifully for resets and for carefully managing the specificity of your custom CSS. While I don't think it's a feature that you'll use often, I think it's valuable to have it in your arsenal. 

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/opengraph.badd26a5809e46a1369012f7452af02f.jpg)

### [Charlie Joseph](https://charlie.sh/?ref=tailwindweekly.com)

First of all, that logo is *beautiful* 😍!

This week's showcase is a personal site and while the design is very simple I find it clean, very well structured, and I love the typography too (Inter ftw!). Oh, and it's also fast as hell 🚀.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/771d3140-f0ee-4b5c-8a8d-63b6806395f4-cover.jpg)

### [TailwindCSS V3 Design System](https://www.figma.com/community/file/1052575036916494414/tailwindcss-v4-1-6-design-system?ref=tailwindweekly.com)

Do you love working with Figma *and* with Tailwind CSS? Then you'll love this week's resource. It's basically "*an unofficial design system tokens for Tailwind CSS".* Great as a nice starting point when designing a website and wanting to stick to Tailwind CSS defaults.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

[**Design2Tailwind**](https://design2tailwind.com/?ref=tailwindweekly.ongloat.com) **\- We convert your design to Tailwind CSS.** Focus on your business logic. Leave the markup code in our capable hands.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**Designing on your own and want fancy icons?** [**Check out Iconfinder**](https://www.iconfinder.com/?ref=vivgui), they have the biggest and best selection of icons I have ever seen. All from highly talented designers from around the world.

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-13.jpg)
### Tailwind Weekly #76: new Tailwind UI update and upcoming VSCode themes!
URL: https://tailwindweekly.com/issue-76/
Last updated: 2025-09-24T09:11:57.000Z
Hello folks!

Last week we got the BEST Tailwind UI update ever! Why? Because we have [13 new ](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/tables?ref=tailwindweekly.com)[*table*](https://tailwindui.com/components/application-ui/lists/tables?ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-76-new-tailwind-ui-update-and-upcoming-vscode-themes)[ designs,](https://tailwindui.com/components/application-ui/lists/tables?ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-76-new-tailwind-ui-update-and-upcoming-vscode-themes) that's why 😍. And all responsive to boot.

Adam also teased us this week with a [VSCode theme preview](https://x.com/adamwathan/status/1503807346195279881?ref=tailwindweekly.ongloat.com), made with the Tailwind CSS colors and it's supposedly upcoming soon! Can't wait to try them out.

Now, on to the usual 😉.

P.S. The Ukraine conflict is still ongoing. If you want to support Ukraine, here's [a great resource](https://ukrainewar.carrd.co/?ref=tailwindweekly.ongloat.com) on how to help and the best non-profits to donate to.

## 🌟 News

The latest Tailwind UI update was *all* about tables!

They got a new [sticky header](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/tables?ref=tailwindweekly.com#component-6e8d7d4ca9657a86da779b7af9a1de2c) table, a table with [grouped rows](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/tables?ref=tailwindweekly.com#component-3fc4f58b97988d00656bc99fbd1a81ae), a table with [sortable headings](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/tables?ref=tailwindweekly.com#component-7b5a46e74e475708d966ca31716f1771), a table [with checkboxes](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/tables?ref=tailwindweekly.com#component-390db22a862687fe88b313692989ffaf) for bulk editing, a table for any scenario you can think of!

![](https://tailwindweekly.com/content/images/2025/09/with-checkboxes.jpg)

On another note, I always like to highlight community work and ecosystem contributions, and this week I noticed that my favorite Vue.js form library, [FormKit](https://formkit.com/?ref=tailwindweekly.ongloat.com), not only uses Tailwind CSS but also allows you to create [your own theme for your forms](https://formkit.com/guides/create-a-tailwind-theme?ref=tailwindweekly.ongloat.com) using Tailwind CSS.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/twitter-card.jpeg)

### [Less Absolute Positioning With Modern CSS](https://ishadeed.com/article/less-absolute-positioning-modern-css/?ref=tailwindweekly.com)

Ahmad always amazes me with the ingenuity of his articles. This one is no exception. You'll learn how to code layouts that, were previously only doable with absolute positioning but now can be done with newer techniques like with CSS Grid.

Imagine doing a hero with lots of elements and no position: absolute, it's amazing! 

### [How to use the TailwindCSS Typography plugin](https://design2tailwind.com/blog/tailwindcss-typography-plugin/?ref=tailwindweekly.com)

This one was written by yours truly. The Tailwind team made a great update to this plugin recently and after working with it since launch, I found a few quirks that you need to take into account when styling user-generated content with it. I hope you find it useful ☺️.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/firewards-preview.jpg)

### [Firewards](https://www.firewards.com/?ref=tailwindweekly.com)

Who's to say that a landing page with a simple color combination, simple icon designs, and a simple layout can't be catchy and attractive? That's exactly what Firewards does!

Sometimes all you need is great copy, minimal colors, and a good enough layout to get your point across 😄. 

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/www.tailwindshades.com_-Macbook-Pro-.jpg)

### [Tailwind Shades](https://www.tailwindshades.com/?ref=tailwindweekly.com)

Yes, it's another color tool but you'll love this one too! Tailwind Shades allows you to create an entire color palette that is compatible with Tailwind's color conventions (50-900 shades) and it even gives you the JSON code to use on your Tailwind config.

You just have to pick an initial color and tweak the rest of the shades to your liking with all their customization options 🎨. It even suggests a name for your new color set!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We got a new template over at Red Pixel Themes! **Say hi to "**[**Podcast**](https://redpixelthemes.com/templates/podcast/?ref=tailwindweekly.ongloat.com)**",** our new podcast template. We think it's perfect for when you want something more custom & modern for your podcast site. **You can get 30% off for the next 3 weeks using the code podcast.**

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

**Designing on your own and want fancy icons?** [**Check out Iconfinder**](https://www.iconfinder.com/?ref=vivgui), they have the biggest and best selection of icons I have ever seen. All from highly talented designers from around the world.

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-14.jpg)
### Tailwind Weekly 75: learn more about aspect ratio and creating emails with Tailwind CSS!
URL: https://tailwindweekly.com/issue-75/
Last updated: 2025-09-24T09:18:19.000Z
Hello folks!

No big news this week, but I wanted to resurface a few topics which I think are pretty cool, things like having a native aspect-ratio CSS property and being able to code emails with Tailwind CSS 😄. Both were impossible years ago and now are a reality, which is so awesome 🚀

Now, on to the usual 😉

P.S. Like last week, I want to keep the Ukraine conflict in your mind. It's easy to get detached and think of it as "just how life is," but we must not succumb to that and do everything we can to aid Ukraine. If you want to support Ukraine, here's [a great resource](https://ukrainewar.carrd.co/?ref=tailwindweekly.ongloat.com) on how to help and the best non-profits to donate to.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/social_1200x630.jpg)

### [Aspect Ratio is Great](https://css-irl.info/aspect-ratio-is-great/?ref=tailwindweekly.com)

I know, I know, yet another aspect ratio article 😅. I have a personal strategy that when I want to learn a topic thoroughly, I read multiple articles/videos about it, and it works! So I'm doing that with you guys this week. I liked this particular one because it explains the "hack" we all had to do before getting the glorious aspect-ratio property.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/socialcard.jpg)

### [Laravel Shopper](https://laravelshopper.io/?ref=tailwindweekly.com)

This week's showcase is another great example of how to use Tailwind UI as a base for your marketing site and still make it look unique and on-brand. I love the use of custom icons, vibrant gradients (I love those blues!), and cool screenshots; I think they really make the page stand out.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/maizzle-card.jpeg)

### [Maizzle - Framework for Rapid Email Prototyping](https://maizzle.com/?ref=tailwindweekly.com)

Maizzle not only lets you code emails using Tailwind CSS, but it also has a lot of features that enhance the DX when working with emails (which, if you have done it in the past, know how dreadful it can be 🤦‍♀️).I talked about Maizzle ages ago, but I wanted to mention it again because it has matured A LOT. The docs are great, and even some templates you can use to get started.If you work with emails a lot, then definitely check it out!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. Check it out [here](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com).

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-15.jpg)
### Tailwind Weekly #74: new Tailwind UI and Headless UI updates!
URL: https://tailwindweekly.com/issue-74/
Last updated: 2025-09-25T08:36:33.000Z
Hello folks!

We got a new Tailwind UI update and a Headless UI update, this time about "Comboboxes", check out the News section to learn more about it but I gotta tell you, they're 💅. 

P.S. I couldn't send the newsletter without talking a bit about what's happening in Ukraine right now. We just barely got over a plague and now there's a war, it's honestly surreal. If you want to support Ukraine here's [a great resource](https://ukrainewar.carrd.co/?ref=tailwindweekly.ongloat.com) on how to help and the best non-profits to donate to.

## 🌟 News

With the new Tailwind UI and Headless UI updates we now have what the Tailwind team calls "Comboboxes" components, some people would also call them "Autocomplete" components.

![](https://tailwindweekly.com/content/images/2025/09/image-2.jpg)

You can check out the new Comboboxes designs [here](https://tailwindcss.com/plus/ui-blocks/application-ui/forms/comboboxes?ref=tailwindweekly.com) and the new Headless UI Combobox component [here](https://headlessui.com/react/combobox?ref=tailwindweekly.ongloat.com).

To top it all off, the team also released a video of Simon coding a Combobox from scratch using the Headless UI component. It's a bit long (38m) but it's sooo worth it.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/css-radial-conic-gradient.jpeg)

### [A Deep CSS Dive Into Radial And Conic Gradients](https://www.smashingmagazine.com/2022/01/css-radial-conic-gradient/?ref=tailwindweekly.com)

When I was first learning about CSS gradients years ago I quickly ignored Radial and Conic gradients are being hard to do with not many uses cases. This article completely destroyed that notion and I think it will do that to you too!

Ahmad once again delivers a great intro to a complicated CSS topic and makes it child's play, definitely give it a read!

### [How to style HTML tables with Tailwind CSS](https://design2tailwind.com/blog/tailwindcss-tables/?ref=tailwindweekly.com)

Ever had to style an HTML table with Tailwind CSS and felt at a loss? Our latest tutorial at Red Pixel Themes can fix that! We show you how to style a table from scratch and add things like headers in different colors, hover effects, striped rows, etc.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/logo-awake-16-9.jpeg)

### [Awake Security](https://www.arista.com/en/solutions/security?ref=tailwindweekly.com)

Subtle on load animations, seamless background videos, angled backgrounds, beautiful hover button animations, and vibrant colors, what's not to love? Also, they definitely know how to make a great seamless hero background video, that neural network video is 👌.

For the curious, here's Awake Security's description:

*Get a security solution built on an AI platform that acts like the human brain to sense, detect, and respond to threats you may not even know exist.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/www.conic.style_-Macbook-Pro-.jpg)

### [Conic.css](https://www.conic.style/?ref=tailwindweekly.com)

Following the same idea of this week's top learning resource, I also wanted to show you some cool conic gradients and this week's resource does exactly that. Conic.css is a compilation of beautiful conic gradients you can use on your future projects. Just click on the one you like and the CSS will be copied to your clipboard. 

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. Check it out [here](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com).

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-16.jpg)
### Tailwind Weekly #73: learn how to favicon in 2022 + more!
URL: https://tailwindweekly.com/issue-73/
Last updated: 2025-09-25T08:46:13.000Z
Hello folks!

Another quiet week on the Tailwind CSS front, nothing major to report. But I did want to mention that Tailwind has gotten a few [minor updates](https://github.com/tailwindlabs/tailwindcss/releases?ref=tailwindweekly.ongloat.com) over the past few weeks, lots of cleaning and optimizing, making your favorite framework the best ever 💕.

Now, on to the usual 😉.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/cover-c265476-1.jpg)

### [How to Favicon in 2022: Six files that fit most needs](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs?ref=tailwindweekly.com)

If you're the type to use a favicon generator for your projects, no need for that anymore! You just need 6 files for maximum compatibility, read this week's article to learn which 6 and how to generate them fast and reliably.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/spartner.software.jpg)

### [Spartner Software](https://spartner.software/?ref=tailwindweekly.com)

This week we're going back to solid and modern and Spartner's website is the perfect example for that. It's not fancy or a work of art like previous week's links, but it looks sharp, the typography is excellent and the chosen colors are a great combination. It's a great design for an agency's website 👩‍🎨.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/social-1.jpg)

### [Xtend UI](https://xtendui.github.io/xtendui/?ref=tailwindweekly.com)

It's not every day that you find a component framework that emphasizes animation and does it well. That's exactly what Xtend UI does! Not only that but they use GSAP, which is industry standard for great and performant animations. And of course, all done with Tailwind CSS 😁. 

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-17.jpg)
### Tailwind Weekly #72: new Tailwind UI update!
URL: https://tailwindweekly.com/issue-72/
Last updated: 2025-09-25T08:55:56.000Z
Hello folks!

It's been a quiet week on the Tailwind CSS ecosystem but we did get a very nice Tailwind UI update, which you'll find incredibly useful if you do any UI work related to time. We also got the promise of some specific upcoming updates too!

Now, onto our usual menu 😉.

## 🌟 News

Tailwind UI got a very nice update, it now has the [Calendar](https://tailwindcss.com/plus/ui-blocks/application-ui/data-display/calendars?ref=tailwindweekly.com) category and it looks *beautiful.*

![](https://tailwindweekly.com/content/images/2025/09/image-1.jpg)

Adam also promised some upcoming updates including [command palettes](https://x.com/jamesm/status/1488887326805831690?ref=tailwindweekly.ongloat.com) and new [responsive table designs](https://x.com/jamesm/status/1486801824673935368?ref=tailwindweekly.ongloat.com). Really looking forward to those!

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/practical-uses-of-css-math-functions-calc-clamp-min-max.jpg)

### [Practical Uses of CSS Math Functions: calc, clamp, min, max](https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/?ref=tailwindweekly.ongloat.com)

I was mind blown the other day while learning about clamp, min and max and I just had to share it! The kind of things you can do with clamp were *extremely tricky* just a few years ago and now you can do it with just 1 property 🤯.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/og-preview.jpeg)

### [WOWC](https://wowc.io/?ref=tailwindweekly.ongloat.com)

I'm not a big fan of NFT, to be honest, but I have to admit their websites tend to be *incredibly designed*. This week's showcase is no exception. With stunning scrollable animations and vibrant colors, this website looks like a work of art. I'm honestly more impressed by the website than by what they're selling 😂.

For the curious, here's WOWC's description:

*WOWC is a community based NFT project combining art, tech and finance.*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/alfred-tailwindcss-docs.jpg)

### [Tailwind CSS Docs Workflow for Alfred](https://github.com/techouse/alfred-tailwindcss-docs?ref=tailwindweekly.ongloat.com)

This is the kind of resource that is *incredibly* niche but *incredibly* useful! If you're on macOS, you use [Alfred](https://www.alfredapp.com/?ref=tailwindweekly.ongloat.com) (a very powerful spotlight alternative) and you find yourself opening the Tailwind CSS docs every few minutes then this Alfred Workflow is definitely for you.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), blog, and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-18.jpg)
### Tailwind Weekly #71: new prettier plugin for automatic class sorting + more!
URL: https://tailwindweekly.com/issue-71/
Last updated: 2025-09-25T09:03:39.000Z
Hello folks!

We got a new tooling announcement this week that got me very excited! I have been dying to find a way to automatically sort my tailwind classes for a while now and the Tailwind Labs team delivered a great solution, [a prettier plugin](https://x.com/tailwindcss/status/1485692591484157952?ref=tailwindweekly.ongloat.com)! Check out the news section for more info 😉.

Also, and I must admit I'm VERY guilty 😅, Adam clarified how to write Tailwind CSS properly, check it out:

> Just for the record — it's "Tailwind CSS", not "TailwindCSS".

> It's killing me to keep seeing it without the space 🥵— Adam Wathan (@adamwathan) [February 3, 2022](https://x.com/adamwathan/status/1489245425265692679?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

## 🌟 News

Say hello to the prettier-plugin-tailwindcss plugin, an official Prettier plugin for automatically sorting your Tailwind classes, here's the [blog post](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier?ref=tailwindweekly.ongloat.com) about it.

Even better, we also got a video showcasing how to install it, how to use it and how to format your entire project with it if you want, I'm definitely trying this on a couple of projects this weekend 😄.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/og-make-beautiful-gradients.jpg)

### [Make Beautiful Gradients](https://www.joshwcomeau.com/css/make-beautiful-gradients/?ref=tailwindweekly.ongloat.com)

I know I know, I have been posting a lot of articles from Josh lately but they're so freakin good! This one is about *what* makes a good gradient and how to *properly* create them using CSS. It also touches on some topics about color and color formats, definitely a great read!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/socialcard-1.jpg)

### [Laracon Online](https://laracon.net/?ref=tailwindweekly.ongloat.com)

This year's Laracon Online website is made by Tailwind CSS and it has quite a unique design! Lots of bright colors on a dark background and illustrations that kind of remind me of Rick and Morty characters, also that mini-game at the end of the page is hilarious 😂.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/og-alwane.jpg)

### [Alwane - Extract/Regroup/Order Colors from any Website](https://alwane.io/?ref=tailwindweekly.ongloat.com)

If you like CSS and colors then I think you'll love this tool. It extracts all the colors from any URL you give it and then formats them nicely to use as CSS properties. With a bit of editing, you could format that code to use the colors inside your Tailwind config. Definitely a great tool to have in your arsenal!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-19.jpg)
### Tailwind Weekly #70: TailwindCSS just broke 2 MILLION downloads + a new video on how to upgrade to v3!
URL: https://tailwindweekly.com/issue-70/
Last updated: 2025-09-25T09:12:03.000Z
Hello folks!

Tailwind hit a huge milestone this week, it just broke [2 MILLION downloads](https://x.com/adamwathan/status/1483187325043720196?ref=tailwindweekly.ongloat.com) *per week*, that's insane 🤯. I still remember the days when all we had was a just JSON file with all the default values and comments everywhere 😄, Tailwind sure has come a long way!

On another note, I think you'll all love our new sponsor, I spent most of the week testing it before launch, and it's 👌.

Now, onto the usual 😉.

## 🌟 News

Besides the big 2 million milestone I mentioned above, we got another treat for you. Simon blessed us with another awesome video, this time about [upgrading to TailwindCSS v3](https://www.youtube.com/watch?v=waoOK5s9ypc&ref=tailwindweekly.ongloat.com). I know we already have the official docs but the video shows you some great examples of what to take into account when upgrading and makes it very painless. It's just 15m so you should definitely watch it.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/5qwb9zm7a8o0imyc6aw2.jpg)

### [How to use TailwindCSS 3.0 without external NPM scripts, just Hugo pipes](https://dev.to/jonas%5Fduri/how-to-use-tailwindcss-30-without-external-npm-scripts-just-hugo-pipes-2lg9?ref=tailwindweekly.ongloat.com)

I'm a huge fan of [Hugo](https://gohugo.io/?ref=tailwindweekly.ongloat.com), it was the first static site generator I ever tried and because of its speed, I was hooked. Hugo pipes is a very cool feature that lets you do assets processing without external scripts so you would have very few dependencies.

Like the title says, this article shows you how you can use Tailwind 3 with just Hugo pipes. I must admit it's pretty niche but it definitely shows you the power and flexibility of Hugo. I think at the very least it can broaden one's horizon 🙂. 

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/phantom-lady-header-bg.jpg)

### [Christina Lane](https://www.authorchristinalane.com/?ref=tailwindweekly.ongloat.com)

With TailwindCSS just getting better and better, you literally can build *any* site you want, and this week's showcase is a prime example of that. It's an author's website and with its very black and white colors (which remind me about the pages of a book) and serif typography, it shows. The subtle hover animations give it a very nice touch.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/chartscss.org_-MBP-.jpg)

### [Charts.css](https://chartscss.org/?ref=tailwindweekly.ongloat.com)

If you have dealt with charts before you know there are TONs of libraries out there, but the majority of them are JS-based. But what if you could do charts with CSS? This week's resource can help you do just that. Of course, they're pretty simple charts, but why import a heavy JS library if you just want a chart or two? Definitely worth a look!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-20.jpg)
### Tailwind Weekly #69: learn to create beautiful shadows with this week's article!
URL: https://tailwindweekly.com/issue-69/
Last updated: 2025-09-25T09:19:18.000Z
Hello folks!

It's been a quiet week on the TailwindCSS front, but Adam gave us a [sneak peek](https://x.com/adamwathan/status/1481693841426112513?ref=tailwindweekly.ongloat.com) of something they're working on. It sounds like it'll be a prettier plugin to sort tailwind classes.

What I loved about it is that it seems it will sort the classes by media queries, think something like text-base md:text-lg lg:text-2xl, which is something I have been wanting forever. Can't wait for the release!

Now, onto our usual menu 😉.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/og-designing-shadows.jpg)

### [Designing Beautiful Shadows in CSS](https://www.joshwcomeau.com/css/designing-shadows/?ref=tailwindweekly.ongloat.com)

A few issues ago I shared a free tool for building beautiful shadows with CSS, then a few days ago I realized forgot to share the accompanying blog post 😅. Better late than never!

Overall, this is a great primer on how to understand the theory behind beautiful CSS shadows and how you can build your own. If you want to level up your CSS game, then this is a great start.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/default-open-graph-image_3OPt7EXEwC3.jpg)

### [Himalayas](https://himalayas.app/?ref=tailwindweekly.ongloat.com)

It's not every day that you find a job board that is both functional and beautiful, I think this week's showcase is both and more. Its beautiful typography, great use of white space, and beautiful accent colors really make it stand out from the crowd. I love how they truly embraced the purple color, it's everywhere but it's also never too much.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwindcss-radix.jpg)

### [tailwindcss-radix](https://github.com/ecklf/tailwindcss-radix?ref=tailwindweekly.ongloat.com)

My friend [Florentin](https://x.com/ecklflorentin?ref=tailwindweekly.ongloat.com) recently released a very useful TailwindCSS plugin for folks using [Radix UI](https://www.radix-ui.com/?ref=tailwindweekly.ongloat.com). It basically helps you style the different states of the UI components. Check out [the demo](https://tailwindcss-radix.vercel.app/?ref=tailwindweekly.ongloat.com) for a more practical example.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-21.jpg)
### Tailwind Weekly #68: New docs and plugins update and new standalone CLI!
URL: https://tailwindweekly.com/issue-68/
Last updated: 2025-09-25T09:27:10.000Z
First issue of the year folks!

We got a couple of updates from the Tailwind Labs team and v3 is better than ever. Can't wait to see what the team will do this year 💪 .

Also, I think you all will love this week's resource 😉. 

P.S.: I hope you all had a good time during the holidays, I know Omnicon is wreaking havoc right now so stay safe!

## 🌟 News

You may have seen these updates in December but we still wanted to mention them as a refresher 😄.

- The official TailwindCSS docs now have [dark mode](https://x.com/tailwindcss/status/1472945416035520519?ref=tailwindweekly.ongloat.com) and it looks awesome
- We got a big update for the official [typography plugin](https://tailwindcss.com/blog/tailwindcss-typography-v0-5?ref=tailwindweekly.ongloat.com), now you can customize it from the parent element instead of the tailwind config and it even includes a beautiful dark mode out of the box!
- TailwindCSS now has a [standalone CLI](https://tailwindcss.com/blog/standalone-cli?ref=tailwindweekly.ongloat.com), no need to add Node to your non-js project just to use tailwind, the Ruby on Rails folks are loving this

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/twitter-card-1.jpg)

### [Defensive CSS](https://ishadeed.com/article/defensive-css/?ref=tailwindweekly.ongloat.com)

This is an incredibly useful article from our friend Ahmad Shadeed, about writing CSS while accounting for all kinds of edge cases you might see while working on your project. Think overflowing grids, words that are too long and break the layout, etc, Ahmad teaches you how to code for those scenarios in advance.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/thumb-ctnicholas-2x1_2x.jpg)

### [CTNicholas](https://chrisnicholas.dev/?ref=tailwindweekly.ongloat.com)

This is one of the best personal sites I have seen in a while! While it's obvious that the site optimizes for readability I have to admit I love the hero animation, it really adds some color to it. The site overall is elegant and it even allows you to change the font from serif to sans-serif, very clever and useful!

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/og-image.jpg)

### [Tailwind CSS Cheat Sheet](https://flowbite.com/tools/tailwind-cheat-sheet/?ref=tailwindweekly.ongloat.com)

TailwindCSS has become a powerhouse for developing all kinds of interfaces, it basically gives you an API for CSS properties, but sometimes you may forget the exact name of the class you're looking for. This is where this cheat sheet comes in, it has the majority and most common classes you'll be using so you can have it open on the side if you don't want to use the docs when coding. It even has a dark mode which looks very fancy 💅!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-22.jpg)
### Tailwind Weekly #67: v3 is out baby 🚀
URL: https://tailwindweekly.com/issue-67/
Last updated: 2025-09-25T08:35:58.000Z
Hello folks!

FINALLY, v3 of TailwindCSS was just released a few days ago, and it's AMAZING! We got so much new stuff it feels like an early Christmas present 🎅.

Even better, the [Tailwind Playground](https://play.tailwindcss.com/?ref=tailwindweekly.ongloat.com) was updated as well so you can start tinkering with it without leaving your browser, how cool is that 😃!

PS: We're experimenting with secondary sponsors starting this issue. Polypane has matured so much and introduced such new cool features we just had to feature it somehow 😄.

## 🌟 News

v3 HAS LANDED! We got a cool trailer (see video above), a [summary blog post](https://tailwindcss.com/blog/tailwindcss-v3?ref=tailwindweekly.ongloat.com) with all the important bits, a "What's new" [video](https://www.youtube.com/watch?v=mSC6GwizOag&ref=tailwindweekly.ongloat.com) with Simon showing all the cool new stuff, and brand-new[ docs](https://tailwindcss.com/?ref=tailwindweekly.ongloat.com) with the easiest [upgrade guide](https://tailwindcss.com/docs/upgrade-guide?ref=tailwindweekly.ongloat.com) ever.

Honestly, I think this has been the best release ever, with almost no breaking changes and so much new stuff its mind-blowing 🤯. I'm reading the entire docs all over again this weekend and it feels like TailwindCSS has come such a long way 😊.

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/cfa6d92e-0ea6-458b-82db-dbd6b387528d/cover-2000-8da9ae9a.jpeg?t=1738083333)

### [A user’s guide to CSS variables](https://increment.com/frontend/a-users-guide-to-css-variables/?ref=tailwindweekly.ongloat.com)

With the new v3 update we can now update CSS variables right there on our classes so what better than a great article on the topic to refresh your memory! This one is very comprehensive and even has code examples, definitely a great read.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/520f9f32-78b6-498a-8b26-99d6db9ac6ff/og-thefullstack-1.png?t=1738083333)

### [thefullstack](https://thefullstack.network/?ref=tailwindweekly.ongloat.com)

The fullstack's marketing page is another awesome example of how to take Tailwind UI's components and make them your own. Their colorful gradients, extensive use of images, and beautiful typography make it seem very professional and unique.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/671c63be-79f1-49e2-bcb1-6b8a2efa5408/google-webfonts-helper.herokuapp.com_fonts-MBP-.png?t=1738083334)

### [google-webfonts-helper](https://google-webfonts-helper.herokuapp.com/fonts?ref=tailwindweekly.ongloat.com)

These days with performance and page speed being such an important topic, I think squeezing every bit of speed you can from your site is a must-do, this includes self-hosting your own fonts (if possible). Luckily if you use google fonts, this week's handy resource helps you download any google font you want and also download only the weights you're using for maximum optimization. 

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d35ccaac-9a3c-4c32-98da-3e3ac602c6a1/coffee.png?t=1738083334)
### Tailwind Weekly #66: happy thanksgiving weekend!
URL: https://tailwindweekly.com/issue-66/
Last updated: 2025-09-25T08:41:21.000Z
Hello folks!

For those of you in the United States, Happy Thanksgiving weekend 🦃, I hope you had a great time with your family this past Thursday ❤️.

For the rest of us, happy Black Friday week 😂, I hope you got a good deal on anything you bought, and if you didn't see it, I posted a great list about good deals I thought would be useful for TailwindCSS devs, you can check it [here](https://tailwindweekly.ongloat.com/black-friday-2021-tailwindcss-community/?ref=tailwindweekly.com).

Also folks, no major news this week, everybody is busy either eating turkey or checking Black Friday deals so we'll skip that section this week 😌.

Now, let's move on to what you really came for, the usual menu 😉.

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7b2451e8-05e5-4939-b04c-6deb0dcdda5b/close-up-man-writing-code-laptop-1.jpg?t=1738083332)

### [Why we use Tailwind CSS as our primary framework](https://cleancommit.io/blog/why-we-use-tailwind-css-as-our-primary-framework/?ref=tailwindweekly.ongloat.com)

This is a great post detailing the thought process of a tech company that decided to move to TailwindCSS. I loved the "Getting the team onboard" section, especially this paragraph:

> Switching to Tailwind is unintuitive at first. The biggest question is when to use Tailwind, and when should I use custom classes? After some experimentation, we decided to componentise as much as we could and use Tailwind classes except for couple of edge cases.

If you're still on the fence about moving to TailwindCSS at your company, this article might help you, overall its a great read.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0eccc8dd-6291-4e63-ad75-91e3757ea4e5/og-1.png?t=1738083333)

### [Reel](https://reel.so/?ref=tailwindweekly.ongloat.com)

Excellent marketing page from the team at Reel, you can see some resemblance to Tailwind UI components but the site looks very clean, the typography is beautiful and the subtle shadows and gradients really make it stand out. Also, that dark mode is 👌.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d7f772af-e838-4485-9dd6-c5b9db257408/og-announcing-shadow-palette-generator.png?t=1738083333)

### [CSS Shadow Palette Generator](https://www.joshwcomeau.com/shadow-palette/?ref=tailwindweekly.ongloat.com)

Another great resource from Josh, this time we get an awesome CSS shadow generator. Forget Material Design shadows, with this tool you can make your shadows look very realistic, a la "Refactoring UI" style.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Red Pixel Themes is having a Black Friday sale**! Use coupon code BFSALE to get 50% off any of our templates. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Polypane**, a browser for developers who want to build responsive, accessible, and performant websites, **is having a** [**Black Friday sale**](https://tailwindweekly.link/polypane-bfsale?ref=tailwindweekly.ongloat.com) offering 30% off any plan. If you build responsive websites, this is a must-have tool.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/31f4cf77-01c9-4c7e-a34f-3c07c1b3d2c0/coffee.png?t=1738083334)
### Tailwind Weekly #65: New video, new Tailwind UI update, v3 on the horizon 🤩
URL: https://tailwindweekly.com/issue-65/
Last updated: 2025-09-25T08:47:00.000Z
Hello folks!

It's been a busy few weeks for the Tailwind Labs team! We got a new video, a new Tailwind UI update, and the likely release date of TailwindCSS v3! Keep reading to get the details.

We also got our usual weekly menu, let's get to it 😉.

## 🌟 News

We got an incredible video from Simon about [customizing TailwindCSS](https://www.youtube.com/watch?v=cZc4Jn5nK3k&ref=tailwindweekly.ongloat.com) to meet your design's specific needs.

We got a new Tailwind UI update. Here's what's they added:

- A brand new [Textareas](https://tailwindui.com/components/application-ui/forms/textareas?ref=tailwindweekly.ongloat.com) category to the Application UI package
- [9 new Radio Group](https://tailwindui.com/components/application-ui/forms/radio-groups?ref=tailwindweekly.ongloat.com) examples
- A [new Step example](https://tailwindui.com/components/application-ui/navigation/steps?ref=tailwindweekly.ongloat.com)
- A [new FAQ example](https://tailwindui.com/components/marketing/sections/faq-sections?ref=tailwindweekly.ongloat.com).

And last but not least we got a tentative V3 release date, quoting Adam:

We're aiming to release v3.0 in the first week of December, so start playing with the alpha release and let us know if you find any issues!

It looks like v3 will also come with new and improved docs based on the ton of sneak peek tweets from [@steveschoger](https://twitter.com/steveschoger/status/1453820638041419777?ref=tailwindweekly.ongloat.com).

Let's hope they're able to meet their deadline, it'll be an awesome early Christmas present 🎅!

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/12db367d-99ea-4571-a7a2-c40a2b02555d/object-fit-background-size-css.jpg?t=1738083333)

### [A Deep Dive Into object-fit And background-size In CSS](https://www.smashingmagazine.com/2021/10/object-fit-background-size-css/?ref=tailwindweekly.ongloat.com)

I must admit I first saw the use of object-fit in one of the many code-along videos from Adam and I was awed and surprised I didn't hear it sooner, it made working with images so much easier!

But if you're like me you probably only know to use object-cover and don't know much of what the other values do, this article can help you fix that. I found it very informative and I now finally have a better understanding of background-size too!

### [How to use the TailwindCSS Aspect Ratio plugin](https://redpixelthemes.com/blog/use-aspect-ratio-plugin-tailwindcss/?ref=tailwindweekly.ongloat.com)

We at Red Pixel Themes have been brainstorming new blog posts ideas related to TailwindCSS and this week I want to feature our latest article, learn how to use the Aspect Ratio plugin to its fullest. You'll learn what "aspect ratio" really is, what are the most common ones and how to customize the plugin if you want to add new values. 

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d55efeff-e6ef-4c5e-ba55-fffac85b71d5/home-27cfd66a4633a0be5fae063adcd3e8ff.png?t=1738083333)

### [SavvyCal](https://savvycal.com/home?ref=tailwindweekly.ongloat.com)

SavvyCal is a great alternative to Calendly that makes scheduling between multiple people more personal, they recently redid their marketing page and now they're using Tailwind!

I think it looks great! Very colorful, clean, and straight to the point, you'll know how SavvyCal can meet your needs in just a few seconds. 

For the curious, here's what SavvyCal does, straight from their description:

> SavvyCal is scheduling software that helps people to find a time to meet instantly.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/433f1858-be47-499c-89d6-5ca8e1113152/tailwindcss-first-line.png?t=1738083333)

### [tailwindcss-first-line](https://github.com/netlify/tailwindcss-first-line?ref=tailwindweekly.ongloat.com)

This one is short a sweet, it's a Tailwind plugin to customize the :first-line pseudo-element, you can learn more about it [here](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line?ref=tailwindweekly.ongloat.com). If you work a lot with text and want to make the first line of your content more elegant or colorful then you'll love this plugin.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

**Red Pixel Themes is having a Black Friday sale**! Use coupon code BFSALE to get 50% off any of our templates. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

[**This Week In React**](https://www.getrevue.co/profile/thisweekinreact?ref=tailwindweekly.ongloat.com): the best of React & React-Native news. Sebastien filters the noise, and you save time!

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6b6cddb1-b842-49e6-957f-b36df58fb656/coffee.png?t=1738083333)
### Tailwind Weekly #64: the new Just-in-Time CDN is 🤯!
URL: https://tailwindweekly.com/issue-64/
Last updated: 2025-09-25T08:51:22.000Z
Hello folks!

No major news this week but still got a few updates! Be sure to check out the video of the new Just-in-Time CDN, I think it will be a game-changer for quick prototyping.

Now, on to the usual 😉.

## 🌟 News

It seems the team is hard at work redoing the official documentation, Steve shared a [sneak peek](https://twitter.com/steveschoger/status/1453820638041419777?ref=tailwindweekly.ongloat.com) this week and it looks 👌.

I also got a couple of videos for you:

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/06dce2f1-41cf-4c03-aae6-fe4a03f279ea/favicon_144x144.png?t=1738083333)

Honestly, this is so 🤯, magical even!

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a91c698a-c92d-499b-baf6-24cb5d96ae45/favicon_144x144.png?t=1738083333)

And another great video from Fireship, very to the point!

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a6bcbe89-e5f8-4f57-8fe8-9b14bf408e4b/thumb.jpg?t=1738083334)

### [RTL Styling 101](https://rtlstyling.com/?ref=tailwindweekly.ongloat.com)

If you're working on a multilanguage site then adding support for Right to Left languages should be on your list. This primer from [Ahmad Shadeed](https://twitter.com/shadeed9?ref=tailwindweekly.ongloat.com) is a great starting point, it will teach you all you need to know about styling RTL languages with CSS.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/65ba83c3-1632-4d77-bc22-539a1a20590c/open-graph.png?t=1738083334)

### [Stray Forth Craft Hard Seltzer](https://www.strayforth.com/?ref=tailwindweekly.ongloat.com) 

This site is so unique! It's basically a landing page showcasing a product but wow do they make it look fancy. The bright color changes, the smooth animations, the illustrations that look like paintings, the bold and unique typography, this site is a work of art 💅.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8b9e4891-a182-44a9-9b01-8c7c15827e95/og2.png?t=1738083335)

### [CSS Icons](https://css.gg/?ref=tailwindweekly.ongloat.com)

That's right, this site gives you icons made entirely with CSS! No need to deal with icon fonts or even image files. Here's an example of a [left arrow](https://css.gg/arrow-left?ref=tailwindweekly.ongloat.com). All you need to do is copy the code snippet and you're good to go.

If you don't want to add custom CSS to your site then you can use their SVG and TSX versions too.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Want to learn how to improve your debugging CSS skills and reduce the time you spend on CSS bugs? Then you really need to read [Debugging CSS](https://debuggingcss.com/?ref=tailwindweekly.ongloat.com)! **You can use coupon code tailwindweekly for a 15% discount ✌.**

---

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/73c007f0-4f8c-4c12-b78e-bf0d4a915b72/coffee-1.png?t=1738083335)
### Tailwind Weekly #63: learn more about CSS custom properties and find great free illustrations for your next project!
URL: https://tailwindweekly.com/issue-63/
Last updated: 2025-09-25T08:56:29.000Z
Hello folks!

It's been a bit quiet on Tailwind land this week, nothing official to report yet but just wanted to remind you that [V3.0 alpha 1](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.1?ref=tailwindweekly.ongloat.com) is out and you should go play it and report bugs! I think they'll be launching it as a finished product by end of next month, fingers crossed 🤞.

Also, see anything different? I moved the newsletter to Ghost! I was thinking about it for a while now and decided to migrate over the last week, we only have a few old posts up but we'll be migrating all older issues over the coming weeks. I'm pretty excited about it, Ghost is so easy to use!

Now that we're on a new platform we'll be experimenting a bit with layouts in future issues, stay tuned!

## 🌟 News

It was kind of a slow week but we still got some tidbits for you!

- Jonathan Reinink [shared](https://twitter.com/reinink/status/1450570325360513026?ref=tailwindweekly.ongloat.com) a great tip on how to add print styles to your site, pretty handy!
- I talked about [Wicked Blocks](https://wickedblocks.dev/?ref=tailwindweekly.ongloat.com) a while back and found it pretty cool, now they just [released a V2](https://michaelandreuzzavega.medium.com/wicked-blocks-v2-ready-made-tailwind-css-blocks-for-your-next-project-86ec3bf46a3e?ref=tailwindweekly.ongloat.com) which includes new component designs and Alpine.js support for some components, definitely check it out!

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1067b3a3-e0aa-4310-b0c5-4a08d9ec0eeb/piccalil.li_tutorial_getting-started-with-css-custom-properties_-MBP--1.png?t=1738083334)

### [Getting started with CSS Custom Properties](https://piccalil.li/tutorial/getting-started-with-css-custom-properties/?ref=tailwindweekly.ongloat.com)

I know I have talked a lot about CSS Custom Properties before and shared articles about it but it's just such a powerful feature that I can't help but emphasize it again and again. So this week's learning piece is another great primer on it, this time from the great Piccalilli, definitely a great read!

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c3ea6ef5-098e-4b4e-91b4-484d357f516f/DanielBlogPost-1.jpg?t=1738083334)

### [Cyral - Data Security and Governance](https://cyral.com/?ref=tailwindweekly.ongloat.com)

Cyral's marketing website is clean, sober, and kind of "enterprise" looking, all while also being friendly and very readable. I think they nailed it with their use of small "interaction" animations, especially the ones that activate when you scroll to a particular section, very nice looking!

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8e421143-1448-4208-a851-2e5c1a413b1d/tailwindcss-aria-attributes-1.png?t=1738083335)

### [tailwindcss-aria-attributes](https://github.com/thoughtbot/tailwindcss-aria-attributes?ref=tailwindweekly.ongloat.com)

I discovered this plugin just this week and it's pretty new but the concept is powerful! It basically a plugin that provides variants for various aria-\* attributes and their supported values.

Imagine doing stuff like:

Powerful stuff 🤯!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Want to learn how to improve your debugging CSS skills and reduce the time you spend on CSS bugs? Then you really need to read [Debugging CSS](https://debuggingcss.com/?ref=tailwindweekly.ongloat.com)! **You can use coupon code tailwindweekly for a 15% discount ✌.**

---

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8c63de8e-d383-4df7-882c-66030fa4a7f3/coffee-2.png?t=1738083335)
### Tailwind Weekly #62: New video and some sneak peeks of what's to come!
URL: https://tailwindweekly.com/issue-62/
Last updated: 2025-09-25T09:01:13.000Z
Hello folks!

It’s been a slow week on the news side but we did get some sneak peeks of what’s to come. I’m particularly excited by [this tweet](https://twitter.com/adamwathan/status/1445699794345680898?ref=tailwindweekly.ongloat.com) showing possible customizations for the tailwind-typography plugin with classes right there on the code. It’s 🤯.

Now, on to the usual!

## 🌟 News

Remember the v3.0 alpha we talked about last week? Well, now you can use it in [Tailwind Play](https://play.tailwindcss.com/?ref=tailwindweekly.ongloat.com) too!

And of course, we got another great video from Simon, [Adding Tailwind CSS to an Existing Project](https://www.youtube.com/watch?v=oG6XPy1t1KA&ref=tailwindweekly.ongloat.com), I loved the preflight: false thing, very useful!

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3681aafd-3671-4914-9f00-054492f5ea9b/334948.jpeg?t=1738083333)

### [The Best Font Loading Strategies and How to Execute Them](https://css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them/?ref=tailwindweekly.ongloat.com)

I have been doing a lot of performance optimization work these past few weeks and noticed how important proper font handling is! This article helped me understand my options and what was best for that particular optimization, definitely a great read.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3ea6a9cb-5f92-423c-b311-ef8f62775727/social-background.png?t=1738083334)

### [Kent C. Dodds](https://kentcdodds.com/?ref=tailwindweekly.ongloat.com)

Kent C. Dodds recently updated his site and it’s now made with TailwindCSS. It has great typography, fancy animations, and koalas, what’s not to love 😍?

If you don’t know Kent, here’s a very famous JS teacher and has a great React course called Epic React.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6c1abd91-c6e6-4c9d-b3a4-200ac65765ce/share-banner.png?t=1738083334)

### [Tailwind Mobile](https://tailwind-mobile.com/?ref=tailwindweekly.ongloat.com)

Now, this one is a treat! Tailwind Mobile is a collection of pixel-perfect mobile UI components built with Tailwind and they’re completely free. They’re meant to be used with a “parent” framework like [Ionic](https://ionicframework.com/?ref=tailwindweekly.ongloat.com) or [Framework7](https://framework7.io/?ref=tailwindweekly.ongloat.com). As of now they only have a React version but it seems the Vue and Svelte versions are coming soon.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Want to learn how to improve your debugging CSS skills and reduce the time you spend on CSS bugs? Then you really need to read Debugging CSS! **You can use coupon code tailwindweekly for a 15% discount ✌.**

---

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

**Inspect Flow - The complete developer tool for Tailwind CSS**. 50% off sale: [inspectflow.io](https://www.inspectflow.io/?ref=tailwindweekly.ongloat.com)

---

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/29aa66e2-eaf8-43ec-bda3-4df990c865a6/coffee.png?t=1738083335)
### Tailwind Weekly #61: 1M weekly downloads, v3.0 alpha and more 🤩!
URL: https://tailwindweekly.com/issue-61/
Last updated: 2025-09-25T09:06:06.000Z
Hello folks!

I know I know, it’s been a while, I was on hiatus for some weeks, dealing with some personal and work stuff but now things are good and I just have been missing writing this so much! So we’re back 😎.

As for news, I’m adding everything that happened ever since the last issue, let me know if you think I missed anything and I’ll include it next week.

Now, let’s get to it, shall we? 😉

## 🌟 News

Here’s what you may have missed since the last issue:

- TailwindCSS recently crossed [1 MILLION weekly downloads](https://twitter.com/adamwathan/status/1443294163160682503?ref=tailwindweekly.ongloat.com) 🥳
- The [first alpha](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.1?ref=tailwindweekly.ongloat.com) of Tailwind’s v3.0 is out. Be sure to test it and report bugs!
- Jonathan Reinink [joined](https://twitter.com/reinink/status/1432381287973724162?ref=tailwindweekly.ongloat.com) the Tailwind Labs team! You might know him as the creator of [Inertia.js](https://inertiajs.com/?ref=tailwindweekly.ongloat.com) and also one of the first contributors to TailwindCSS
- The famous Fireship youtube channel did an “X in 100 seconds” video for Tailwind, check it out!

We also got 3 new videos from the Tailwind Labs team:

- [Glowing Background Gradient Effects with Tailwind CSS](https://www.youtube.com/watch?v=5W6kEP65AH4&ref=tailwindweekly.ongloat.com)
- [Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js](https://www.youtube.com/watch?v=xNMYz74zNHM&ref=tailwindweekly.ongloat.com)
- [Building a YouTube Thumbnail with Tailwind CSS](https://www.youtube.com/watch?v=qyBexrnBz%5FI&ref=tailwindweekly.ongloat.com)

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/e01bf54a-9c1b-40d8-9100-cd1a3bbc3c0c/og-transforms.png?t=1738083336)

### [The World of CSS Transforms](https://www.joshwcomeau.com/css/transforms/?ref=tailwindweekly.ongloat.com)

Another great primer from Josh, this time about CSS transforms. Definitely a great read, I have been enjoying Josh’s content for a while now and speaking like someone who thought she knew CSS like the back of her hand, Josh’s content always teaches me new stuff!

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3d263475-c1ec-4d4b-a30b-155ce1593582/cover-87faec427a1f5c8dd8a240f81a2e41487147fe831cd61c6fb877812ca4543524.png?t=1738083336)

### [Panther | Find out who to trust with your data instantly.](https://pantherscore.com/?ref=tailwindweekly.ongloat.com)

Man, this week’s showcase is so cool-looking! It’s clean, readable, and has color all over the place, reminds me a bit about Stripe’s design, and that’s definitely a compliment!

For the curious, here’s what Panther does:

*Panther tells you who to trust and why instantly. All in a clear, simple way. No matter if you’re just a little worried or if you’re a full-on privacy advocate.*

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/5378d977-5948-4db9-ae89-d32295cc26d7/c6f6eb99-112a-4502-9f30-4732ef89a0ad.png?t=1738083336)

### [tailwindcss-perspective](https://github.com/Kamona-WD/tailwindcss-perspective?ref=tailwindweekly.ongloat.com)

If you’re into fancy 3D CSS transforms and animations then you’ll love this plugin! It adds utility classes for the [perspective](https://css-tricks.com/almanac/properties/p/perspective/?ref=tailwindweekly.ongloat.com) property. Combine that with some rotating classes and you’ll get cool animations really easily.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Want to learn how to improve your debugging CSS skills and reduce the time you spend on CSS bugs? Then you really need to read [Debugging CSS](https://debuggingcss.com/?ref=tailwindweekly.ongloat.com)! **You can use coupon code tailwindweekly for a 15% discount ✌.**

---

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/543d3f1c-9fc1-4280-8361-8b3bc1b0c8e1/coffee.png?t=1738083337)
### Tailwind Weekly #60: new video and new milestone!
URL: https://tailwindweekly.com/issue-60/
Last updated: 2025-09-26T09:22:00.000Z
Hello folks!

It’s been a quiet week on the news front while [Adam](https://x.com/adamwathan/status/1425807439161708547?ref=tailwindweekly.ongloat.com) and the rest of the team take a breather after the release of the Ecommerce package for Tailwind UI. What a launch 🚀.

But don’t fret, as always, we got new stuff for you 😉!

P.D. We also reached a new milestone recently, we now have more than 2k followers on [twitter](https://x.com/TailwindWeekly?ref=tailwindweekly.ongloat.com), thank you all ❤️.

## 🌟 News

The Tailwind Labs team might be taking a breather but Simon gave us another very cool video this week!

It’s [Building a Fancy Responsive Tile Grid with Tailwind CSS](https://www.youtube.com/watch?v=WJDw1J7FZnE&ref=tailwindweekly.ongloat.com). While I use CSS grid very regularly in my daily work I must admit I only used it for simple stuff. This new video shows you how to do a very fancy and somewhat complex grid, with almost no custom CSS whatsoever. Definitely take a look!

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/25-07-2021.jpg)

### [How to use Tailwind CSS in Astro](https://daily-dev-tips.com/posts/how-to-use-tailwind-css-in-astro/?ref=tailwindweekly.ongloat.com)

The new static site generator Astro has been making waves in web dev news recently. If you have been playing with it and want to add tailwind to it then this article is for you. It’s a pretty simple process but a written guide is never hurts!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/card.jpg)

### [Web3Forms](https://web3forms.com/?ref=tailwindweekly.ongloat.com)

This week’s showcase is full of little delightful details! Things like a subtle light effect on the main CTA button, hand-written text images to highlight important info sections, and clever use of color gradients, it really shows care for the design. A very good source of inspiration if you’re going for a simple but effective landing page.

For the curious, here’s what Web3forms does:

*Receive form submissions directly in your email inbox without any server or back-end code. Its free!*

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/blobmaker-cover-703617855c36334d464a0690d71f7a75.jpg)

### [Blobmaker](https://www.blobmaker.app/?ref=tailwindweekly.ongloat.com)

You know I’m a huge fan of blobs and shapes in design but I must admit I have a hard time doing myself. That’s how I discovered this week’s resource!

Meet Blobmaker, a web tool that helps you make organic SVG shapes for your next design. You can modify the complexity, contrast, and color of your shpae to generate unique SVG blobs every time.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

---

Want to learn how to improve your debugging CSS skills and reduce the time you spend on CSS bugs? Then you really need to read [Debugging CSS](https://debuggingcss.com/?ref=tailwindweekly.ongloat.com)! **You can use coupon code tailwindweekly for a 15% discount ✌.**

---

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-23.jpg)
### Tailwind Weekly #59: Tailwind UI Ecommerce is out baby 😎!
URL: https://tailwindweekly.com/tailwind-weekly-59-tailwind-ui-ecommerce-is-out-baby/
Last updated: 2025-09-26T09:28:45.000Z
Hello folks!

We took a break for a few weeks to chill but we’re back as usual now.

In the meantime, we got a [brand new Tailwind UI package](https://x.com/adamwathan/status/1425542046195109888?ref=tailwindweekly.ongloat.com) and a Headless UI update, the Tailwind Labs team sure has been busy!

I also wanted to mention that we recently reached 1500 subscribers 🥳. Thank you all for reading our issues every week, it’s been an absolute pleasure to write to you about a topic I love so much!

Now, let’s get on with the issue 😉.

## 🌟 News

![](https://tailwindweekly.com/content/images/2025/09/image-1-1.jpg)

[Tailwind UI Ecommerce](https://tailwindcss.com/plus?ref=tailwindweekly.com#product-ecommerce) is out baby 😎! The package has everything section and component you can think of that you’ll need for a modern ecommerce website. If you work with Shopify or Woocommerce or the like then this is a great buy, even more, if you already have the Application and Marketing packages, go get it!

We also got a [new update](https://tailwindcss.com/blog/headless-ui-v1-4?ref=tailwindweekly.ongloat.com) for Headless UI, now we have tabs!

## 📚 Learning

### [Exploring JIT mode in Tailwind CSS](https://blog.logrocket.com/exploring-jit-mode-tailwind-css/?ref=tailwindweekly.ongloat.com)

If you somehow missed the JIT announcement and/or want to find out what’s new between the release and now then this article is a great overview. It comes with code examples and everything.

### [How to use custom fonts with TailwindCSS](https://design2tailwind.com/blog/use-custom-fonts-tailwindcss/?ref=tailwindweekly.ongloat.com)

Shameless plug! We started writing content at the Red Pixel Themes blog and here’s our first tutorial post! We know the Tailwind Labs team released a video of this a few weeks ago but we think its also good to have it in writing. Expect more posts in the future!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/localedata_og.jpg)

This week I bring you a clean and very readable landing page for a boring but incredibly useful SaaS app. This one focuses more on clean typography and good informational structure. For the folks who don’t do fancy designs but still want a good landing page, this would be a great inspiration.

For the curious:

> Rails translation management platform, which can help you collaborate on your translations even with your non-tech teammates.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/54448a54-9ca6-45b5-82d4-bf070042ff97.jpg)

### tailwind-merge

Oh man, this week’s resource is so cool! It’s kind of a solution to a very annoying problem you’ll probably come across if you use Tailwind with Vue or React.

The main issue is that, depending on how you handle your props on your app, you may end up with duplicated properties, something like this: border rounded px-2 py-1 p-3 which could have unintended side effects.

Tailwind Merge solves this issue for you, and it works as a utility function. . It supports Tailwind v2.0 up to v2.2, and it’s fully typed. Definitely check it out!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Want to learn how to improve your debugging CSS skills and reduce the time you spend on CSS bugs? Then you really need to read [Debugging CSS](https://debuggingcss.com/?ref=tailwindweekly.ongloat.com)! **You can use coupon code tailwindweekly for a 15% discount ✌.**

---

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-24.jpg)
### Tailwind Weekly #58: Learn to hide content the right way and get inspired by 84 more buttons!
URL: https://tailwindweekly.com/issue-58/
Last updated: 2025-09-26T09:35:12.000Z
Hello folks!

It’s been a quiet week in the Tailwind ecosystem since the Tailwind Labs team is busy working on the upcoming [Ecommerce package](https://tailwindcss.com/blog/tailwind-ui-ecommerce?ref=tailwindweekly.ongloat.com) but don’t worry, I’m still bringing you the usual menu 😉.

We got a great accessibility article, a beautiful showcase website, and a very useful resource for you. Let’s get to it!

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/kittygiraudel.com_2021_02_17_hiding-content-responsibly_-MBP-.jpg)

### [Hiding Content Responsibly](https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/?ref=tailwindweekly.ongloat.com)

These days I’m learning more and more about accessibility and I found this very useful article. Just like the title says, it shows the various techniques to hide an element and highlights which are accessible and which should be avoided. You might be surprised to know that display: none; is very bad accessibility-wise 😅.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/share-card-d40de818081cc36c9412dd86861b75bf95b5cd1565c0f2d97f9f2511a4b48274.jpg)

### [Tembo: The Smart Way To Get On The Property Ladder](https://www.tembomoney.com/?ref=tailwindweekly.ongloat.com)

Great typography? ✅

Beautiful hand-drawn illustrations? ✅

Aesthetically pleasing color palette? ✅

This site is lovely. This definitely was made with care and it shows. If you’re working on a marketing page and want to do it the semi-traditional but still feels modern way then definitely check this one out.

For the curious, here’s what Tembo does:

> At Tembo we’re making home ownership more accessible and affordable for a new generation of first-time buyers.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/og-image-1.jpg)

### [84 Beautiful CSS buttons examples](https://getcssscan.com/css-buttons-examples?ref=tailwindweekly.ongloat.com)

Last week I showed you some tailwind buttons, now I bring you even more! These examples are from other websites but they serve as a great source of inspiration for your own buttons.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-25.jpg)
### Tailwind Weekly #57: New Tailwind UI update, new stream and new videos!
URL: https://tailwindweekly.com/issue-57/
Last updated: 2025-09-26T09:43:22.000Z
Hello folks!

We got another packed issue ready for you to dig in! We have a Tailwind UI update, a new live coding stream from Adam, and very cool videos from [Simon](https://x.com/simonswiss?ref=tailwindweekly.ongloat.com). Let’s get started!

PD: Sorry I missed last week, I got pretty sick and had to rest for a few days, all good now!

## 🌟 News

Lot’s news in this issue, let’s unpack:

- Adam did a new stream! It’s been a while since Adam did one but [this one](https://www.youtube.com/watch?v=qKRq-tFixWE&ref=tailwindweekly.ongloat.com) is awesome. He’s building empty states for Tailwind UI (which you can check below).
- We got *another* stream but from [David](https://x.com/david%5Fluhr?ref=tailwindweekly.ongloat.com), he’s building some components for the upcoming Ecommerce package.
- Simon made 2 incredible videos, one for [Floating Labels with TailwindCSS](https://www.youtube.com/watch?v=nJzKi6oIvBA&ref=tailwindweekly.com) and one about [Rebuilding iOS 15 with Tailwind CSS](https://www.youtube.com/watch?v=eSzNNYk7nVU&ref=tailwindweekly.com), both are excellent ways to learn how to use the newer features of tailwind

We also got a new Tailwind UI update! Here’s what’s new:

- [404 pages](https://tailwindcss.com/plus/ui-blocks/marketing/feedback/404-pages?ref=tailwindweekly.com)
- [Empty states](https://tailwindcss.com/plus/ui-blocks/application-ui/feedback/empty-states?ref=tailwindweekly.com)
- [Checkboxes](https://tailwindcss.com/plus/ui-blocks/application-ui/forms/checkboxes?ref=tailwindweekly.com)
- [Input groups](https://tailwindcss.com/plus/ui-blocks/application-ui/forms/input-groups?ref=tailwindweekly.com#component-85e0087460af7ce9f5160485832f72b2)

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/bFO3SPdt1bPIB8EylsB7.jpg)

### [New CSS functional pseudo-class selectors :is() and :where()](https://web.dev/articles/css-is-and-where?ref=tailwindweekly.ongloat.com)

Guess what? We got new CSS selectors this year and they’re awesome! And they have [great](https://caniuse.com/?search=%3Ais%28%29&ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-57-new-tailwind-ui-update-new-stream-and-new-videos) [support](https://caniuse.com/?search=%3Awhere%28%29&ref=tailwindweekly.com) too. Check out this article from the folks at web.dev to learn more about them.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/thenpingme-sharing-lg.jpg)

### [thenping.me](https://thenping.me/?ref=tailwindweekly.ongloat.com)

Do you like subtle gradients? And seeing creative uses of Tailwind UI? Then you’ll definitely love this week’s showcase. I must admit I really love the logo, simple but memorable.

For the curious:

> Don’t let your Laravel scheduled tasks go missing. Ship with confidence knowing your most critical jobs are running on time.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwindcss-buttons1.jpg)

### [TailwindCSS Buttons](https://devdojo.com/tailwindcss/buttons?ref=tailwindweekly.com)

I discovered this a few days ago and just HAD to share it! The folks at Dev Dojo released a collection of unique button designs made with TailwindCSS and you can copy and paste any of them with just a click. I must say some of the designs are very creative so I really recommend you check it out.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

We rebranded! Tailwind Made is now Red Pixel Themes 🥳! Check out our [official blog post](https://redpixelthemes.com/blog/rebranding/?ref=tailwindweekly.ongloat.com) about the move. Our templates stay the same. We have [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) templates if you’re interested.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-26.jpg)
### Tailwind Weekly #56: The E-commerce update is coming!
URL: https://tailwindweekly.com/issue-56/
Last updated: 2025-09-26T09:49:11.000Z
Hello folks!

We’re finally getting the e-commerce update for Tailwind UI 🥳. See the news section for more details.

We also got a very requested video too, about custom fonts, definitely worth checking it out.

Plus, you know, the usual 😉.

## 🌟 News

After a lot of teasers, the Tailwind Labs team finally released a landing page for the upcoming e-commerce update for Tailwind UI. You can sign up [here](https://tailwindcss.com/blog/tailwind-ui-ecommerce?ref=tailwindweekly.ongloat.com) for updates. This will be the biggest update since their initial launch, so exciting!

There also was a new video this week, this time about a topic long requested, its about using custom fonts with Tailwind, be it from Google fonts or your own font files. See the video [here](https://www.youtube.com/watch?v=sOnBG2wUm1s&ref=tailwindweekly.com).

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/twitter-card-1-1.jpg)

### [Let's Learn About Aspect Ratio In CSS](https://ishadeed.com/article/css-aspect-ratio/?ref=tailwindweekly.ongloat.com)

Another great article from our friend Ahmad. If you use the aspect ratio plugin from the Tailwind Labs team and want a more in-depth explanation of what is aspect ratio in the context of images and how and why it works then this article is definitely for you.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/openemu.org__utm_campaign-Tailwind-20Weekly-utm_medium-email-utm_source-Revue-20newsletter-MBP-.jpg)

### [OpenEmu - Multiple video game system](https://openemu.org/?ref=tailwindweekly.ongloat.com)

What a nostalgic site! I don’t know about you but I was deep into playing emulated games when I was younger and I still play a couple on my phone. Been a fan of pokemon for ages!

This week I discovered that the website of a very popular emulator for macOS, OpenEmu, was made with TailwindCSS and they decided to go for a full retro look. The website is very simple (just a landing page basically) but there are some small animations that make it “pop” in my opinion.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/latex-tailwind.vercel.app__utm_campaign-Tailwind-20Weekly-utm_medium-email-utm_source-Revue-20newsletter-MBP-.jpg)

### LaTeX Tailwind

Ever heard of [LaTex](https://www.latex-project.org/?ref=tailwindweekly.ongloat.com)? It’s basically a document preparation system, very heavily used in academia and its design is very standard.

Well, with this plugin now you can make a LaTex looking document with Tailwind! One cool thing about it is that it’s mostly class-less so you just have to write your HTML in a semantic way and it’ll look good!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we launched our newest template, [Masterclass](https://redpixelthemes.com/templates/masterclass/?ref=tailwindweekly.ongloat.com)! Masterclass is a premium template with a beautiful design, tailored specifically for online courses but can be used for digital products in general. We also have a [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) template if you’re interested.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-27.jpg)
### Tailwind Weekly #55: It's been a quiet week on the news front but we got our usual menu 😁!
URL: https://tailwindweekly.com/issue-55/
Last updated: 2025-09-26T09:55:29.000Z
Hello folks!

No news this week. After the big launch of v2.2 it’s been a quiet week for the Tailwind Labs team, probably gearing up for the next awesome 6 weeks 💪.

But as always, we got our usual menu of a learning link, a showcase website, and a useful resource, hope you enjoy it!

## 📚 Learning

### [How to (slowly) migrate your project to Tailwind CSS](https://www.carsonbain.com/writing?ref=tailwindweekly.com)

This one is short and sweet but incredibly useful. If you’re trapped with another CSS framework (like bootstrap or foundation) and you’re planning to upgrade then this 3 step strategy will prove very helpful.

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/homepage.jpg)

### [MattStauffer.com](https://mattstauffer.com/?ref=tailwindweekly.ongloat.com)

Going back to personal website showcases, this one is short and sweet too. With a focus on clean typography and minimal but contrasting colors, Matt’s website is easy to read and consume, which is exactly what you want if you produce content on a regular basis as Matt does.

For the curious:

> Matt Stauffer is a programmer, teacher, and Partner/Technical Director at Tighten

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/tailwindcss-image-rendering.jpg)

This is a niche as it gets! The image rendering CSS property is explained thoroughly in this [CSS tricks article](https://css-tricks.com/almanac/properties/i/image-rendering/?ref=tailwindweekly.ongloat.com) but the TL;DR version is:

> The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions.

For the few of you who wanted this in TailwindCSS, now you can use this plugin 😁.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we launched our newest template, [Masterclass](https://redpixelthemes.com/templates/masterclass/?ref=tailwindweekly.ongloat.com)! Masterclass is a premium template with a beautiful design, tailored specifically for online courses but can be used for digital products in general. We also have a [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.ongloat.com) template if you’re interested.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.ongloat.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-28.jpg)
### Tailwind Weekly #54: v2.2 is out and it's BIG 🚀!
URL: https://tailwindweekly.com/issue-54/
Last updated: 2025-09-26T10:02:49.000Z
Hello folks!

Long time no see! Sorry for the silence folks, a close family member got Covid and had to be hospitalized so the last 2 weeks have been a whirlwind of doctors and helping out in whatever I can. Thankfully she’s all good now so we’re back to business!

I’m happy to report v2.2 just got released and by Adam’s words, it’s one of the biggest updates yet!

## 🌟 News

- [v2.2 just got released this Thursday](https://tailwindcss.com/blog/tailwindcss-2-2?ref=tailwindweekly.ongloat.com) and it packs soo much new stuff it’s insane. I particularly love that we’ll finally have a native way of working with *:before/:after* selectors, I have been wanting that for ages!
- If you’re more of a visual person the team released a video showcasing the most important features of the v2.2 release, you can check it out [here](https://www.youtube.com/watch?v=DxcJbrs6rKk&ref=tailwindweekly.com). I honestly was blown away by the *background origin utilities*, I didn’t know those existed!
- We also got 2 two videos in the last weeks. [One is a code along](https://www.youtube.com/watch?v=Tmkr2kKUEgU&ref=tailwindweekly.com) where they show you how to code a certain layout they found and liked, with TailwindCSS. The [other one](https://www.youtube.com/watch?v=RZ9cWr3tY9w&ref=tailwindweekly.com) is about controlling stacking contexts with new isolation utilities, it’s pretty powerful.

## 📚 Learning

![](https://tailwindweekly.com/content/images/2025/09/css-i18n.jpg)

### [CSS for internationalisation](https://chenhuijing.com/blog/css-for-i18n/?ref=tailwindweekly.ongloat.com)

I must admit internationalisation work has always been like dark magic to me, it involves a lot of changes to the way you architect your code to make it i18n friendly and it has lots of gotchas so I always stayed away from it, but this article Chen Hui Jing is so good it really opened my eyes to it, especially in the CSS side.

If you’re struggling with internationalisation in a project and want a more experienced perspective then this article is for you!

## 💅 Showcase

![](https://tailwindweekly.com/content/images/2025/09/2021-11-08-17_34_17-.jpg)

### [Naz - Your business comfort zone](https://nazadv.com/?ref=tailwindweekly.ongloat.com)

Big and clean typography, animated shapes, and vibrant accent colors, what’s not to love? This advertising agency’s website has some very nice SVG animations and while the colors are a bit similar to Tailwind’s official palette they add a nice touch to the minimalistic background.

For the curious:

> We tackle issues that every business encounters on every scale, And we believe in the results we deliver for our growing base of customers.

## 🎁 Resource

![](https://tailwindweekly.com/content/images/2025/09/CleanShot-2021-11-20-at-16.55.01-1.jpg)

### [Tailwind CSS Jobs - find a job using Tailwind CSS](https://jobs.tailwindcss.com/?ref=tailwindweekly.com)

Finally! We have a tailwind job board! I discovered it recently and just had to mention it. It’s made by the community and there’s a nice quantity of job posts already there, be sure to check it out!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we launched our newest template, [Masterclass](https://redpixelthemes.com/templates/masterclass/?ref=tailwindweekly.ongloat.com)! Masterclass is a premium template with a beautiful design, tailored specifically for online courses but can be used for digital products in general. We also have a [portfolio](https://redpixelthemes.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.ongloat.com), [blog](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.ongloat.com), and [e-commerce](https://tailwindmade.com/templates/elyssi?ref=tailwindweekly.ongloat.com) template if you’re interested.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

From the makers of Windy, comes [Tint](https://tailwindweekly.link/tint?ref=tailwindweekly.ongloat.com), the color picker for TailwindCSS developers. But it’s not like any other color picker out there, no sir, this thing automatically takes the color of whatever you have your cursor on and translates it to the nearest Tailwind CSS color. It’s macOS for now and supports Tailwind v1, v2 and v2 extended color palettes.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-29.jpg)
### Tailwind Weekly #53: TailwindCSS v2.2 is on the horizon!
URL: https://tailwindweekly.com/issue-53/
Last updated: 2025-09-26T08:39:46.000Z
Hello folks!

TailwindCSS is so close we can taste it! If you want to look at the upcoming stuff we got a video for you in the news section. Lots of new features coming!

And as always, we have the usual list of useful links for you 😁.

## 🌟 News

TailwindCSS v2.2 is on the horizon but if you want to play around with the latest unfinished features then [I got a video for you](https://www.youtube.com/watch?v=hoFwUe97Gdc&ref=tailwindweekly.ongloat.com)! It basically shows you how to start using the canary version and showcases some of the upcoming stuff, which is wild!

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8b1401ea-27cc-43a1-a91d-0ccbcf617c5a/guide-supported-modern-css-pseudo-class-selectors.jpg?t=1738083337)

### [A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors](https://www.smashingmagazine.com/2021/04/guide-supported-modern-css-pseudo-class-selectors/?ref=tailwindweekly.ongloat.com)

Now that [we’re getting support for every pseudo-selector](https://github.com/tailwindlabs/tailwindcss/pull/4482?ref=tailwindweekly.ongloat.com) in JIT mode I think this article will come in handy if you want to learn more about what some of the newer selectors do. As always Stephanie delivers a concise and easy-to-read article, definitely a great read!

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/122e8adf-2e67-4a1d-9eb0-879047ba64f3/og.png?t=1738083337)

### [Helpninja - Simple and affordable helpdesk pricing](https://helpninja.com/?ref=tailwindweekly.ongloat.com)

Helpninja’s is a great example of how using clean typography, subtle colors, and screenshots as a main piece of content can create an aesthetically pleasing website. If you have a product and want to go the simple route for your marketing page, Helpninja is a good source of inspiration.

For the curious:

> HelpNinja was created for small businesses that need a simple helpdesk system with affordable pricing.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/64b95032-de94-40fa-80ff-41c891fea52c/tailwindcontentplaceholder.png?t=1738083338)

### [tailwindcontentplaceholder](https://github.com/javisperez/tailwindcontentplaceholder?utm%5Fcampaign=&ref=tailwindweekly.ongloat.com)

This plugin does just one thing but does it very well, it creates content placeholders that are great to use when you want to animate the loading of your content. [Check the demo](https://github.com/javisperez/tailwindcontentplaceholder?ref=tailwindweekly.ongloat.com) and you’ll see exactly what I mean. Best part? It has a ton of options to customize it.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we launched our newest template, [Masterclass](https://tailwindmade.com/templates/masterclass?ref=tailwindweekly.ongloat.com)! Masterclass is a premium template with a beautiful design, tailored specifically for online courses but can be used for digital products in general. We also have a [portfolio](https://tailwindmade.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://tailwindmade.com/templates/thompson?ref=tailwindweekly.ongloat.com), [blog](https://tailwindmade.com/templates/atlas?ref=tailwindweekly.ongloat.com), and [e-commerce](https://tailwindmade.com/templates/elyssi?ref=tailwindweekly.ongloat.com) template if you’re interested.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

From the makers of Windy, comes [Tint](https://tailwindweekly.link/tint?ref=tailwindweekly.ongloat.com), the color picker for TailwindCSS developers. But it’s not like any other color picker out there, no sir, this thing automatically takes the color of whatever you have your cursor on and translates it to the nearest Tailwind CSS color. It’s macOS for now and supports Tailwind v1, v2 and v2 extended color palettes.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9340a6fb-05ae-4170-acaf-6e94964f6dcb/coffee.png?t=1738083338)
### Tailwind Weekly #52: now you can use JIT mode with the CDN + new video!
URL: https://tailwindweekly.com/issue-52/
Last updated: 2025-09-26T08:45:02.000Z
Hello folks!

This week we have a new video, this time about animations in Vue with Headless UI.

We also got an awesome article from [Sara Dayan](https://twitter.com/frontstuff%5Fio?ref=tailwindweekly.ongloat.com). It outlines the best defense I have ever seen against calling TailwindCSS just inline styles. Definitely a good read.

Plus, of course, the usual 😉.

## 🌟 News

We got a couple of important pieces this week.

- Adam [mentioned on Twitter](https://twitter.com/adamwathan/status/1395439258660388867?ref=tailwindweekly.ongloat.com) that v2.2 is coming and it’s looking pretty awesome. You can check out the unreleased stuff so far, [here](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md?ref=tailwindweekly.ongloat.com).
- The people behind Windy and Tint just came up with another cool thing, [now you can use the JIT mode with the CDN](https://beyondco.de/blog/tailwind-jit-compiler-via-cdn?ref=tailwindweekly.ongloat.com). You can even add config to it, it’s 🤯.
- New video! [Orchestrating Nested Transitions in Vue.js with Headless UI and Tailwind CSS](https://www.youtube.com/watch?v=8G-1NW5NqO0&ref=tailwindweekly.ongloat.com)

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8cebb3a6-798d-4988-a064-22d4a1600e82/og--1-.png?t=1738083339)

### [No, Utility Classes Aren't the Same As Inline Styles](https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles?ref=tailwindweekly.com)

If you have been on Twitter lately you probably saw all the drama related to TailwindCSS in the past few weeks. This article addresses some of the biggest criticisms towards tailwind that were the focus of the drama and it does it VERY well. This has become my go-to article whenever I hear the classic “but tailwind is just like inline styles” line.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a8e5fd6a-e4d0-4477-9ffd-03ef7ed32bcb/Seo-Card.jpg?t=1738083339)

### [Granor Farm](https://granorfarm.com/?ref=tailwindweekly.com)

You know I’m a huge fan of shapes for web design but I’m ALSO a big fan of drawings, and this site has A LOT of them. They look very classy and almost pencil-drawn. That, coupled with the pattern backgrounds and the subtle colors gives it a soothing vibe.

For the curious:

> Granor Farm is a certified organic farm located in Three Oaks, Michigan. We grow organic vegetables, flowers, herbs, and grains. Membership in a seasonal…

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/184bcd2e-3483-4df6-838d-1897c74ebc69/social.png?t=1738083340)

### [Hypercolor - Tailwind CSS Gradient Palette](https://hypercolor.dev/?ref=tailwindweekly.com)

Ever since we got gradients in Tailwind I have been playing around with them but I must admit that I sometimes lack creativity and I’m sure you face this too. So many pretty colors but which combination would look good? This site addresses exactly that!

Hypercolor is a curated collection of beautiful premade gradients using default colors from the Tailwind CSS color palette. Definitely check it out!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we launched our newest template, [Masterclass](https://tailwindmade.com/templates/masterclass?ref=tailwindweekly.ongloat.com)! Masterclass is a premium template with a beautiful design, tailored specifically for online courses but can be used for digital products in general. We also have a [portfolio](https://tailwindmade.com/templates/atom/?ref=tailwindweekly.ongloat.com), [business](https://tailwindmade.com/templates/thompson?ref=tailwindweekly.ongloat.com), [blog](https://tailwindmade.com/templates/atlas?ref=tailwindweekly.ongloat.com), and [e-commerce](https://tailwindmade.com/templates/elyssi?ref=tailwindweekly.ongloat.com) template if you’re interested.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

From the makers of Windy, comes [Tint](https://tailwindweekly.link/tint?ref=tailwindweekly.ongloat.com), the color picker for TailwindCSS developers. But it’s not like any other color picker out there, no sir, this thing automatically takes the color of whatever you have your cursor on and translates it to the nearest Tailwind CSS color. It’s macOS for now and supports Tailwind v1, v2 and v2 extended color palettes.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9cfa1783-8737-4952-bc8c-fd11960944ab/coffee.png?t=1738083340)
### Tailwind Weekly #51: More new videos and a new sponsor!
URL: https://tailwindweekly.com/issue-51/
Last updated: 2025-09-26T08:51:03.000Z
Hello folks!

We got 2 new videos and some exciting news for Tailwind Play. I must say, the “*What’s New in Tailwind CSS*” video series is a gold mine for people who are both new and old to tailwind and want to learn (with examples!) all the new stuff.

Besides that, we got the usual stuff but I’m also excited to announce we got a new sponsor!

## 🌟 News

We got 2 new videos this week, one for [Mix & Background Blending Utilities](https://www.youtube.com/watch?v=Z42les2fCRo&ref=tailwindweekly.com) and one for [Box Decoration Break Utilities](https://www.youtube.com/watch?v=C9ccfaIlqD4&ref=tailwindweekly.com). They’re short but they teach you all you need to know to use those utilities.I also wanted to mention the [Filters & Backdrop Filters](https://www.youtube.com/watch?v=qGEZdGMgXL4&ref=tailwindweekly.com) video again, I watched this week and it was just 🤯.On a side note, Tailwind Play finally has [JIT support](https://twitter.com/adamwathan/status/1392925327207325704?ref=tailwindweekly.com)!We also got a new Tailwind UI update! They added:

- 2 new [Pricing Page](https://tailwindui.com/components/marketing/page-examples/pricing-pages?ref=tailwindweekly.com) examples to the Marketing package
- 2 new [Pricing Section](https://tailwindui.com/components/marketing/sections/pricing?ref=tailwindweekly.com) examples to the Marketing package
- 2 new [FAQ](https://tailwindui.com/components/marketing/sections/faq-sections?ref=tailwindweekly.com) examples to the Marketing package
- 1 new [Testimonial](https://tailwindui.com/components/marketing/sections/testimonials?ref=tailwindweekly.com) example to the Marketing package
- 1 new [Header](https://tailwindui.com/components/marketing/elements/headers?ref=tailwindweekly.com) example to the Marketing package

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/39ac66ae-6d40-4fa5-bdde-668af5be27ad/5gdwsfkocj1509ngfu0u.jpg?t=1738083338)

### [Build a Glassmorphic Navbar with TailwindCSS backdrop-filter & backdrop-blur](https://dev.to/braydoncoyer/build-a-glassmorphic-navbar-with-tailwindcss-backdrop-filter-backdrop-blur-386o?ref=tailwindweekly.com)

I find Glassmorphism quite an unique trend, when I first saw it I thought it must be complicated to code sites with it but this week’s tutorial makes it easier than I thought, all thanks to new utilities on v2.1\. If you’re into this new trend and love tailwind then you’ll love this article.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/33e41297-650d-4068-97d1-c3cf963839a6/og-image.png?t=1738083339)

### [Calendso](https://calendso.com/?ref=tailwindweekly.com)

It’s not every day that you discover a good looking open source project website. Calendso is using Tailwind UI as a base but also added their own touch. Also, I lol'ed at the rickrolling joke 😂.

For the curious, Calendso is:

The Open Source Calendly Alternative. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. You are in control of your events and data.

### 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/ae23b1b7-8bea-4c36-b388-e332ff57c809/ogtwitter.png?t=1738083339)

### [Wickedblocks](https://blocks.wickedtemplates.com/?ref=tailwindweekly.com)

This week’s resource is from my friend [@mike\_andreuzza](https://twitter.com/mike%5Fandreuzza?ref=tailwindweekly.com). We’re big proponents of buying Tailwind UI as a way to support TailwindCSS’ development but if you want components with a different look and feel and still made with Tailwind then Wickedblocks is definitely something you should check out.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we launched our first free template, [Atom](https://tailwindmade.com/templates/atom/?ref=tailwindweekly.com)! Atom is also our first portfolio template, perfect for that personal website you wanted to launch, especially if you’re job hunting! We also have a [legal/business](https://tailwindmade.com/templates/thompson/?ref=tailwindweekly.com), [personal blog](https://tailwindmade.com/templates/atlas/?ref=tailwindweekly.com), and an [e-commerce](https://tailwindmade.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.ongloat.com) you’ll get 20% off your subscription applied at checkout.

---

From the makers of Windy, comes [Tint](https://tailwindweekly.link/tint?ref=tailwindweekly.ongloat.com), the color picker for TailwindCSS developers. But it’s not like any other color picker out there, no sir, this thing automatically takes the color of whatever you have your cursor on and translates it to the nearest Tailwind CSS color. It’s macOS for now and supports Tailwind v1, v2 and v2 extended color palettes.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/49fe6b3c-c115-4b85-b43a-66b399187b63/coffee.png?t=1738083339)
### Tailwind Weekly #50: New video + say hello to Tailwind Shifts!
URL: https://tailwindweekly.com/issue-50/
Last updated: 2025-09-26T08:55:04.000Z
Hello folks!

Can’t believe it’s issue #50, time sure flies, let’s hope for 50 issues more!

We got the usual menu so let’s get to it 😄.

## 🌟 News

We got a new official video this week! This time about [filters and backdrop filters](https://www.youtube.com/watch?v=qGEZdGMgXL4&ref=tailwindweekly.com). Very useful if you’re working with images and want to give them a fancy touch.

We also saw the launch of [Tailwind Shifts](https://twitter.com/laravelshift/status/1389244269349777409?ref=tailwindweekly.com), a child project of Laravel Shifts, basically, it’s a way to automatically migrate your project to a different version of tailwind, for example from v0 to v1 or v1 to v2\. It’s a paid service but I think the prices are very affordable ($19 is the most expensive one).

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/54e97331-5434-481b-971b-7bc0a72d6299/social_1200x630.png?t=1738083339)

### [CSS { In Real Life } | Animating Underlines](https://css-irl.info/animating-underlines/?ref=tailwindweekly.com)

Another cool animations post, this time for underlines! It’s very common to use borders instead of underlines for animations since they’re much easier to animate and do fancy stuff, but there’s new stuff coming that will enable animations on *actual* underlines.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/ccd23511-c693-4206-a088-b34e38b88c44/Moxi-Join-the-Health-and-Wellness-Revolution.jpg?t=1738083339)

### [Moxi Health](https://moxihealth.co.uk/?ref=tailwindweekly.com)

I love everything about this site, it’s simple, clean, and colorful, and that typography is 👌. The homepage icons are lovely and the post images are like very aesthetically pleasing splashes of paint. Very 👩‍🎨.

For the curious, here’s Moxi Health’s description:

Moxi, a fun and friendly health & wellbeing platform giving employers real-time wellbeing data to tackle the increasing costs of absence and sickness-related underperformance by keeping the workforce connected, active, and healthy

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6239fe87-6290-4650-952e-b708fced7c61/social-1.png?t=1738083339)

### [Grid.js - Advanced JavaScript table plugin](https://gridjs.io/?ref=tailwindweekly.com)

Besides Headless UI, there are now other JS components that are coming up, one of them is Grid.js. which is basically a responsive table plugin made with TailwindCSS. Check out the demo in the homepage, it works very fast and it has supposed for React, Vue, Angular and, of course, vanilla JS.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we launched our first free template, [Atom](https://tailwindmade.com/templates/atom/?ref=tailwindweekly.com)! Atom is also our first portfolio template, perfect for that personal website you wanted to launch, especially if you’re job hunting! We also have a [legal/business](https://tailwindmade.com/templates/thompson/?ref=tailwindweekly.com), [personal blog](https://tailwindmade.com/templates/atlas/?ref=tailwindweekly.com), and an [e-commerce](https://tailwindmade.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://tailwindweekly.link/windy?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “*TAILWIND15*” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6382d44a-f06d-4b54-b27c-02dea8342961/coffee.png?t=1738083340)
### Tailwind Weekly #49: Fancy VSCode extension for hero icons + more!
URL: https://tailwindweekly.com/issue-49/
Last updated: 2025-09-26T08:58:21.000Z
Hello folks!

Nothing new on the official TailwindCSS horizon but we got a fancy new VSCode extension done by one of our friends in the TailwindCSS discord, check out the resource section at the bottom for more info!

Now, on to the usual stuff 😉

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/efe3436a-4f08-4ced-82a1-1df4bfa0a587/twitter-card-2.jpg?t=1738083339)

### [Practical Use Cases For CSS Variables](https://ishadeed.com/article/practical-css-variables/?ref=tailwindweekly.com)

Another great article from Ahmad, I must admit the RTL examples made me go 🤯. If you thought CSS variables were only good for colors then this article will change your mind!

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/028f2aec-b764-46a8-989e-7caa55e96201/home-scene-alt.jpg?t=1738083339)

### [Curricula - Security Awareness Training for Employees](https://www.curricula.com/?ref=tailwindweekly.com)

I got a fancy one for you this week! Curricula’s website is a mix of simplicity and friendliness. They’re using Tailwind UI on some parts but they definitely gave it a more personal touch.

For the curious:

> Security Awareness Training for employees designed for simple and fun online learning. Gamified Learning Management System software designed to make online training easy.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c90263ab-83a4-4c8c-bd36-7d0f1d0a602e/inline_preview-1.png?t=1738083340)

### [VSCode Heroicons Preview](https://marketplace.visualstudio.com/items?itemName=BButner.heroicons-preview&ref=tailwindweekly.com)

Here it is, the big thing of this week’s issue!

Its as the image shows and the title says, this VSCode extension sees any hero icons you’re using on your code and shows an inline preview, *right there in the editor*. How cool is that!

They have support for the Vue and React libraries right now and also can differentiate between solid and outline icons. If you use VSCode go grab it!

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we launched our first free template, [Atom](https://tailwindmade.com/templates/atom/?ref=tailwindweekly.com)! Atom is also our first portfolio template, perfect for that personal website you wanted to launch, especially if you’re job hunting! We also have a [legal/business](https://tailwindmade.com/templates/thompson/?ref=tailwindweekly.com), [personal blog](https://tailwindmade.com/templates/atlas/?ref=tailwindweekly.com), and an [e-commerce](https://tailwindmade.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://tailwindweekly.link/windy?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/f02fcbf2-943a-4a22-9be4-64179edd40e4/coffee.png?t=1738083340)
### Tailwind Weekly #48: new Headless UI videos + the usual menu 🍭!
URL: https://tailwindweekly.com/issue-48/
Last updated: 2025-09-26T09:02:16.000Z
Hello folks!

After last week’s big launch the ecosystem has been a bit quiet but the Tailwind Labs team is still hard at work! We got a couple of new video tutorials about the most popular Headless UI components and of course, our usual menu.

Let’s get to it!

## 🌟 News

It’s been a quiet week on the news front but the Tailwind Labs team has been busy creating videos for the new Headless UI stuff! Here’s what’s new:

- [Building a Custom Dropdown Menu with Headless UI React and Tailwind CSS](https://www.youtube.com/watch?v=qJnIJa-cF2M&ref=tailwindweekly.com)
- [Building Accessible Switch/Toggle Buttons with Headless UI React and Tailwind CSS](https://www.youtube.com/watch?v=3uzhz0Q%5FvUg&ref=tailwindweekly.com)

I also discovered an extra video I think I haven’t mentioned here, its a few weeks old but still a good one:

- [Theming Tailwind with CSS Variables](https://www.youtube.com/watch?v=MAtaT8BZEAo&ref=tailwindweekly.com)

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c7038833-23e0-4836-8c53-1767e1b7d214/53a096ec-6838-427f-bf43-ede7f659699e.png?t=1738083339)

### [Using TailwindCSS with Sveltekit](https://dev.to/elianvancutsem/using-tailwindcss-with-sveltekit-136k?ref=tailwindweekly.com)

In Tailwind’s plan of world domination, we have a bullet point of being able to use TailwindCSS with everything, this article helps fulfill that. Behold! I bring you a guide on how to use our beloved tailwind with Sveltekit 😄

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8d447827-ce49-446d-a3e1-5778cf1ea579/Final_vmjjma.png?t=1738083340)

### [If you need someone to talk to, you’re at the right place](https://nowandme.com/?ref=tailwindweekly.com)

Vibrant colors? Check. Random shapes? Check. Good typography? Check! Now&Me’s website is definitely an awesome example of customizing tailwind with your own personal style. The colorful graphic design also adds a great touch.

For the curious, here’s Now&Me official description:

> You can share your feelings anonymously on the Now&Me website; which is the #1 trusted online mental health community to talk to strangers for free if you feel lonely and need someone to talk to.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4943a702-83b6-49ef-9cf7-1a87af5cf2c8/tailwind-ink.png?t=1738083340)

### [Tailwind Ink | AI color palette generator for Tailwindcss](https://tailwind.ink/?ref=tailwindweekly.com)

I know I know, you can’t get a perfect color palette with just math, but that doesn’t mean we can try! That’s where this week’s resource helps, Tailwind Ink is “a tool for creating new color shades based on a neural network” and “it’s trained with the TailwindCSS palette”. Definitely, something to play around with if you’re looking to spice up your next project.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://tailwindmade.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://tailwindmade.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://tailwindmade.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://tailwindweekly.link/windy?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/10726dd9-63ee-459c-aeef-5ac3ff175546/coffee.png?t=1738083340)
### Tailwind Weekly #47: v2.1, Headless UI, Heroicons, oh my!
URL: https://tailwindweekly.com/issue-47/
Last updated: 2025-09-26T09:07:54.000Z
Hello folks!

Sorry for the silence, got sick and had to take some time off, all good now!

This issue is definitely packed with all the news we missed since our last email, so go grab some coffee and get cozy because this is a long one.

## 🌟 News

We got a lot of news to unpack! Here’s what we got:

- [Heroicons reached v1.0](https://blog.tailwindcss.com/heroicons-v1?ref=tailwindweekly.com) \- Now it has React and Vue Libraries and a Figma file
- [Headless UI also reached v1.0](https://blog.tailwindcss.com/headless-ui-v1?ref=tailwindweekly.com) \- And comes with 8 components now, also have React and Vue support and great docs
- [We got Tailwind v2.1](https://blog.tailwindcss.com/tailwindcss-2-1?ref=tailwindweekly.com) \- The new JIT engine its now in core, we got native CSS filters and blending mode utilities
- [Tailwind UI now has full Vue and React support](https://blog.tailwindcss.com/tailwind-ui-now-with-react-and-vue-support?ref=tailwindweekly.com) \- Thanks to the new Headless UI update

We also got a new update for Tailwind UI! The team added:

- 2 new [Detail Screen](https://tailwindui.com/components/application-ui/page-examples/detail-screens?ref=tailwindweekly.com) examples to the Application UI package
- 1 new [Settings Screen](https://tailwindui.com/components/application-ui/page-examples/settings-screens?ref=tailwindweekly.com) example to the Application UI package
- 2 new [Multi-Column Layout](https://tailwindui.com/components/application-ui/application-shells/multi-column?ref=tailwindweekly.com) examples to the Application UI package
- 2 new [Page Heading](https://tailwindui.com/components/application-ui/headings/page-headings?ref=tailwindweekly.com) examples to the Application UI package
- 1 new [Grid List](https://tailwindui.com/components/application-ui/lists/grid-lists?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Select Menu](https://tailwindui.com/components/application-ui/forms/select-menus?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Tabs](https://tailwindui.com/components/application-ui/navigation/tabs?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Slide-over](https://tailwindui.com/components/application-ui/overlays/slide-overs?ref=tailwindweekly.com) example to the Application UI package

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/85a886c6-39bc-44d8-87f8-7f276fd9d0e6/www.tatianamac.com_posts_prefers-reduced-motion__utm_campaign-Tailwind-20Weekly-utm_medium-email-utm_source-Revue-20newsletter-MBP-.png?t=1738083340)

### [prefers-reduced-motion: Taking a no-motion-first approach to animations](https://tatianamac.com/posts/prefers-reduced-motion/?ref=tailwindweekly.com)

A great article on the why of using “prefers-reduced-motion” from someone who especially needs it. The author suffers from a condition that makes some animation make her dizzy and she’s also a frontend developer so she’s deeply aware of how and when to use “prefers-reduced-motion”. Definitely a great read.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/caad10da-0701-4399-808f-e805f8abbe42/logo_fb_developer.jpg?t=1738083341)

### Dragit

Another cool example of using Tailwind UI and customizing it with a personal touch. Definitely love the gradients, strong colors, and dark aesthetics.

For the curious:

> Dragit is a professional drag & drop email editor. Make a beautiful responsive emails in a breeze. Use it online or embed in into your SaaS.

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/04f5daea-f273-4476-a840-78cacd3640e2/remixicon.com__utm_campaign-Tailwind-20Weekly-utm_medium-email-utm_source-Revue-20newsletter-MBP-.png?t=1738083341)

### [Remix Icon - Open source icon library](https://remixicon.com/?ref=tailwindweekly.com)

This one is my favorite open source icon library and it’s huge! Whenever I need an icon SVG that is not on Herocions, this is where I go. I also love that they let you export the SVG file and also copy the SVG code.

## 👌 Promoted links

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://tailwindmade.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://tailwindmade.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://tailwindmade.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://tailwindweekly.link/windy?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

---

[Landing Letter](https://www.landingletter.com/?ref=tailwindweekly.com) is a weekly newsletter where I teardown high converting landing pages and talk about copywriting, data flow and placements of elements.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0a74a05a-3056-416c-a98c-4bc0f54f5b5b/coffee.png?t=1738083341)
### Tailwind Weekly #46: new official video + more adoption news!
URL: https://tailwindweekly.com/issue-46/
Last updated: 2025-09-26T09:12:23.000Z
Hello folks!

We got a new official video and some huge adoption news! I think tailwind is, slowly but surely, eating up the web dev world ✌.

Plus, of course, the usual 😉. Let’s get to it!

*Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!*

## 🌟 News

It’s been a quiet week folks, we got [a new video](https://www.youtube.com/watch?v=J0Wy359NJPM&ref=tailwindweekly.com) from the Tailwind Labs team, about the typography plugin and how to use it, I must admit even tho I have been using the official plugins since day one, I always learn something new with these videos, they’re a great resource.

There’s also news on the adoption front! Looks like Netlify is [switching to TailwindCSS](https://twitter.com/devdevcharlie/status/1374415652694355968?ref=tailwindweekly.com). The change is gonna be so big they made a blog post about it (see the “learning” section).

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b3268e60-7af3-4ce1-aecb-c7ecfcf80d40/ed4cafabc1479130ef42556a8d5bb8b68e752b82-1300x683.png?t=1738083340)

### [From semantic CSS to Tailwind - Refactoring the Netlify UI codebase](https://www.netlify.com/blog/2021/03/23/from-semantic-css-to-tailwind-refactoring-the-netlify-ui-codebase/?ref=tailwindweekly.com)

Netlify plans to move away from global CSS to TailwindCSS. The article outlines their reasoning, why they chose tailwind, and their strategy for the migration. Definitely a great article to see how the “big ones” do things.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/072df1e1-f994-45bf-aff4-6a829bcea9df/CleanShot_2021-03-26_at_13.53.55-1.png?t=1738083340)

### [Torch CI](https://torchci.com/?ref=tailwindweekly.com)

This week I bring you another cool site that used Tailwind UI at its core but differentiated enough to have their own personal style. Fron the waves illustrations to the unique typography, Torch CI has a clean, minimalistic but opinionated design.

For the curious, he’s what Torch CI is:

*Simple Continuous Integration platform for PHP. Fine-tuned for Laravel.*

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1a589f28-80ad-4ee0-bb07-3190926cca9d/tailwindcss-capsize-1.png?t=1738083341)

### [tailwindcss-capsize](https://github.com/theMosaad/tailwindcss-capsize?ref=tailwindweekly.com)

Just like last week, I decided to feature another resource that is more or less like a wrapper to something else. This time is for the [Capsize utility](https://seek-oss.github.io/capsize/?ref=tailwindweekly.com), which gives you more granular control over how your typography displays on your website. If you’re big on typography then this plugin and Capsize are definitely for you.

## 🗞 Classifieds

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://tailwindmade.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://tailwindmade.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://tailwindmade.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://tailwindweekly.link/windy?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a5266573-f9d3-4bd3-a0c2-6a7131730250/coffee.png?t=1738083341)
### Tailwind Weekly #45: JIT is the future of TailwindCSS + new official videos!
URL: https://tailwindweekly.com/issue-45/
Last updated: 2025-09-30T08:55:01.000Z
Hello folks!

Sorry I missed next week, had some personal stuff going on, all resolved now!

Now you’ll get 2 weeks of news and let me tell you, it is *packed.*

Let’s get to it!

*Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!*

## 🌟 News

Ok let’s start breaking down these incredibly packed 2 weeks:

- We got a [big reveal](https://www.youtube.com/watch?v=3O%5F3X7InOw8&ref=tailwindweekly.com) on Monday about an upcoming new feature that will become the future of TailwindCSS, Just-In-Time generation! The TL;DR is that we won’t have huge bundle sizes on development anymore, Tailwind will only generate exactly the classes that we’re using!
- We got 2 very instructive videos from the Tailwind Labs team, one about [how to size images and video with aspect ratio](https://www.youtube.com/watch?v=NX%5FNW6bt6%5Fs&ref=tailwindweekly.com) and one about [how to style forms with the official forms plugin](https://www.youtube.com/watch?v=pONeWAzDsQg&ref=tailwindweekly.com)
- The Tailwind Labs theme [got a new member](https://blog.tailwindcss.com/welcoming-james-mcdonald-to-tailwind-labs?ref=tailwindweekly.com)! Go say hello to [James McDonald](https://twitter.com/jamesm?ref=tailwindweekly.com), an incredibly talented designer!

We also got a new Tailwind UI update too! The team:

- Added new [Contact Pages](https://tailwindui.com/components/marketing/page-examples/contact-pages?ref=tailwindweekly.com) to the Marketing package with 4 examples
- Added 1 new [CTA Section](https://tailwindui.com/components/marketing/sections/cta-sections?ref=tailwindweekly.com) example to the Marketing package
- Added 2 new [Header Section](https://tailwindui.com/components/marketing/sections/header?ref=tailwindweekly.com) examples to the Marketing package
- Added 2 new [Newsletter Section](https://tailwindui.com/components/marketing/sections/newsletter-sections?ref=tailwindweekly.com) examples to the Marketing package
- Added 2 new [Contact Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/contact-sections?ref=tailwindweekly.com#component-1a48413a7b6b49af32a9b2a75de4c0e8) examples to the Marketing package

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/77e26234-303d-4635-9067-ca57440389a9/image-3.png?t=1738083340)

### [Create Responsive Image Effects With CSS Gradients And aspect-ratio](https://www.smashingmagazine.com/2021/02/responsive-image-effects-css-gradients-aspect-ratio/?ref=tailwindweekly.com)

Following the whole I-want-you-to-level-up-your-CSS-skills theme, I bring you another great article, this one shows you how to do incredibly cool effects for your images, which can easily be added to complement your Tailwind project. If you work a lot with images, then this is definitely a great read.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0dcf584a-472e-4db2-8991-1b33379833c6/alex--1-.png?t=1738083341)

### [Home – Alex Perronnet](https://alexperronnet.io/?ref=tailwindweekly.com)

Yet another portfolio site, but there’s a catch! You may think this site is a bit simple and minimalistic but the special feature is not the design, *it’s the sound effects.* That’s right, the awesome Alex added sounds effects and subtle animations to the hover and click states of some of the elements. Kind of like discovering some easter eggs, very cool!

For the curious:

*I am Alex Perronnet, a french freelance developer and designer. I am also an open-source contributor and a content creator*

## 🎁 Resource

### [tailwindcss-scroll-snap](https://github.com/innocenzi/tailwindcss-scroll-snap?ref=tailwindweekly.ongloat.com)

If you don’t know what [Scroll Snap](https://css-tricks.com/practical-css-scroll-snapping/?ref=tailwindweekly.com) is you’re missing a great CSS feature that was only previously possible with JS. It is great for scrolling effects and especially useful for sliders/carousels. This little plugin adds that functionality to your tailwind project, pretty handy.

## 🗞 Classifieds

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?status=accepted&expires=1645135460&p%5Fsid=103161&p%5Faid=124142&p%5Flink=3094&p%5Ftok=9c9e340f-f817-47e9-b07b-d4db1c314f07&ref=tailwindweekly.ongloat.com), the tool is still in its early stages but it looks very promising.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/08f02037-0a6b-49dc-9bb1-097953d70dc8/coffee.png?t=1738083341)
### Tailwind Weekly #44: Quiet week but something's brewing 👀!
URL: https://tailwindweekly.com/issue-44/
Last updated: 2025-09-30T08:42:09.000Z
Hello folks!

It was a quiet week on the news front, no official announcements from the Tailwind Labs team, and the ecosystem was uneventful too, maybe something secret and amazing is brewing 👀, we’ll know in due time!

Now, onto the usual menu!

*Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!*

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0eada57b-ba07-4d4b-a9b2-ef1414669f82/image-6.png?t=1738083342)

### [Getting Deep into Shadows](https://css-tricks.com/getting-deep-into-shadows/?ref=tailwindweekly.com)

This week we got another primer! This time about box shadows and from the incredibly useful CSS Tricks blog. This one is a bit long but very insightful, the first part is mostly about the theory behind shadows, light sources etc and the second half is about practical examples of the different shadows you create with CSS. Overall a very good read!

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b0da75ef-a2e9-4fb9-acba-42312395f536/image-7.png?t=1738083343)

### [A simple uptime and SSL monitoring | PingPing](https://pingping.io/?ref=tailwindweekly.com)

I would say PingPing is simple but mighty, they are the classic example of using Tailwind UI components for their landing page but they differ in that they added their own personal touches like the blue highlights, the Twitter wall, and the elaborated screenshots. Like I said, simple but mighty!

For the curious:

*PingPing is a simple to use website and certificate monitoring servic*

## 🎁 Resource

### [tailwindcss-logical](https://github.com/stevecochrane/tailwindcss-logical?ref=tailwindweekly.com)

This is a great plugin to start using CSS logical properties in your code, don’t know what are those? CSS Tricks has [a great article](https://css-tricks.com/css-logical-properties/?ref=tailwindweekly.com) about them.

They’re a bit controversial (some people think they’re not necessary) but they’re very useful when you’re working with non-LTR (left-to-right) languages like Arabic and such so if you’re in that boat, this plugin will work wonders!

## 🗞 Classifieds

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://tailwindmade.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://tailwindmade.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://tailwindmade.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://tailwindweekly.link/windy?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

I highly recommend [LambdaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy-to-use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8967e488-5203-4fbd-8453-b4a5ae0676ba/coffee.png?t=1738083343)
### Tailwind Weekly #43: We got a new "Rebuilding X with TailwindCSS" video + the usual menu!
URL: https://tailwindweekly.com/issue-43/
Last updated: 2025-09-30T08:46:36.000Z
Hello folks!

What an interesting week! We had a new video from the Tailwind Labs team, rebuilding another website with Tailwind, and also discovered the [#30DaysOfTailwindCSS](https://30daysoftailwindcss.com/?ref=tailwindweekly.com) challenge, I particularly liked the Day 27 challenge, just because I love using “*bg-clip-text*”.

And of course, we have our usual menu of one good learning resource, one great showcase website, and one useful plugin or app!

*Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!*

## 🌟 News

From the Tailwind Labs team, we got a new “Rebuilding X with TailwindCSS” video, this time rebuilding the [“Sick Fits” app ](https://www.youtube.com/watch?v=mK-ePxnfcJw&ref=tailwindweekly.com)originally created by Wes Bos and made by Simon. I really missed these!

Also, our friend [Michael Andreuzza](https://twitter.com/Mike%5FAndreuzza?ref=tailwindweekly.com), a fellow TailwindCSS fan, created a few social initiatives for the framework, like [TailwindCSS garden](https://dev.to/michaelandreuzza/tailwind-css-garden-4g05?ref=tailwindweekly.com) (inspired by the famous [CSS Zen Garden](http://www.csszengarden.com/?ref=tailwindweekly.com)) and the[#30DaysOfTailwindCSS](https://30daysoftailwindcss.com/?ref=tailwindweekly.com) challenge. Definitely something to try out on your next free weekend 😁.

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/fc0c7307-a583-4cc7-b290-ad52826f0bb3/image-9.png?t=1738083342)

### [What the heck, z-index??](https://www.joshwcomeau.com/css/stacking-contexts/?ref=tailwindweekly.com)

Another GREAT guide from Josh, this time about z-index. I love the example he used to explain “stacking contexts” and the whole “z-index values are not global” idea. Also, that list of different CSS contexts was 🤯.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8820c926-7cac-43cc-9ef9-48cd479a1a38/image-10.png?t=1738083343)

### [BaseCode - a field guide to writing code that lasts](https://basecodefieldguide.com/?ref=tailwindweekly.com)

I have to say that the minimal look is hard to do right when it comes to courses/books but BaseCode is one of the few that nails it. With a very simple color palette and lots of padding, the site looks clean, and it’s easy to know what the product is about.

For the curious:

*BaseCode - a field guide of simple practices to writing lasting code proven by over 20 years of programming.*

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/dc32ef54-0192-43d7-b43d-bf7e9b79f94a/image-11.png?t=1738083343)

### [tailwindcss-border-gradients](https://github.com/cossssmin/tailwindcss-border-gradients?ref=tailwindweekly.com)

Another great plugin from our friend [Cossssmin](https://twitter.com/cossssmin?ref=tailwindweekly.com), this time for generating border-image gradient classes. Don’t know what those are or have never used them? Check out this [Digital Ocean article](https://www.digitalocean.com/community/tutorials/css-gradient-borders-pure-css?ref=tailwindweekly.com) to see how cool they are.

## 🗞 Classifieds

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?status=accepted&expires=1645135460&p%5Fsid=103161&p%5Faid=124142&p%5Flink=3094&p%5Ftok=9c9e340f-f817-47e9-b07b-d4db1c314f07&ref=tailwindweekly.ongloat.com), the tool is still in its early stages but it looks very promising.

---

Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/dc8e4910-57cb-417c-b06c-198516b7ab56/coffee.png?t=1738083343)
### Tailwind Weekly #42: New Tailwind UI Figma kit + new youtube video series!
URL: https://tailwindweekly.com/issue-42/
Last updated: 2025-09-30T08:59:21.000Z
Hello folks!

This sure was an interesting week, the Tailwind Labs was practically on fire launching stuff 🚀. We also got *so mainstream* we now have a new TailwindCSS compiler, check out the resource section for more details.

P.S. We had a bit of a makeover starting from this issue, I hope you guys like it!

*Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!*

## 🌟 News

We had a week packed with tailwind news! Let’s start with the beginning, we got:

- The official [Figma kit](https://twitter.com/tailwindcss/status/1361797146744393731?ref=tailwindweekly.com) for Tailwind UI, designers rejoice!
- A brand-new youtube course called “From Zero to Production”, I watched it and loved it, it’s a great introduction to the framework and the utility-first way. Check the first video [here](https://www.youtube.com/watch?v=elgqxmdVms8&ref=tailwindweekly.com).
- Remember last week when Steve was giving us a sneak peek of an upcoming landing page? [It’s here](https://tailwindui.com/react-and-vue-support/?ref=tailwindweekly.com). Now you can get notified when Tailwind UI gets support for React and Vue 👌.

## 📚 Learning

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/41d19e9c-74ad-4966-aea6-6446ab87ca38/image-13.png?t=1738083342)

### [How to use TailwindCSS in a Cookiecutter Django project](https://www.boringbackend.dev/using-tailwindcss-cookiecutter-django/?ref=tailwindweekly.com)

I have a confession to make, I don’t do much python these days but I have a soft spot for cookie-cutter django, my first ever open source contribution was to this project back in a djangocon years ago, oh how the time flies!

But enough sentimentality, this tutorial is good! I really like that they switch from gulp to Webpack (more modern) and handhold you the entire time, I know that some python devs frown at JS but if even if you do, the article has very clear steps, and its even funny at times, definitely a good read.

## 💅 Showcase

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/10ae73cd-e005-4ff6-a01c-468eaa92a792/image-14.png?t=1738083343)

### [Blitz.js - The Fullstack React Framework](https://blitzjs.com/?ref=tailwindweekly.com)

This week I bring a new dev-focused site again, this time it’s a very fancy one. Blitz.js website has come [a long way](https://web.archive.org/web/20200228231153/https://blitzjs.com/) ever since it launched. Now it’s colorful and very playful, those hand lines look really cool plus they manage the content-heavy section very nicely.

For the curious, Blitz is:

*a hyper-productive fullstack React framework that’s built on Next.js and features a “Zero-API” data layer.*

## 🎁 Resource

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/99701cf4-1eaa-479d-a6e1-80ec7c234708/image-15.png?t=1738083343)

### [Windi CSS](https://github.com/windicss/windicss?ref=tailwindweekly.com)

Windi CSS is “a next-generation Tailwind CSS compiler”, yep, we’re now so mainstream we got a compiler. If you thought [twin.macro](https://github.com/ben-rogerson/twin.macro?ref=tailwindweekly.com) was fancy Windi CSS has nothing to envy it, check out the [features page](https://windicss.netlify.app/guide/features.html?ref=tailwindweekly.com) and you’ll see. I particularly love the + and - for the screen size utilities, very clever!

## 🗞 Classifieds

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?status=accepted&expires=1645135460&p%5Fsid=103161&p%5Faid=124142&p%5Flink=3094&p%5Ftok=9c9e340f-f817-47e9-b07b-d4db1c314f07&ref=tailwindweekly.ongloat.com), the tool is still in its early stages but it looks very promising.

---

Need to build a quick marketing page for your next project? Then try out [Tails](https://tailwindweekly.link/tails?ref=tailwindweekly.com)! Tails is the ultimate drag'n drop page builder built for TailwindCSS, they have a great selection of components (over 120+), let you export your code, and have very affordable pricing.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b05c65be-a0b2-4ba1-ad40-88331cadbc68/coffee.png?t=1738083344)
### Tailwind Weekly #41: Big news on the adoption side + the usual stuff!
URL: https://tailwindweekly.com/issue-41/
Last updated: 2025-09-30T09:02:43.000Z
Hello folks!

We got some big news on the adoption front, down at the news section, plus the usual menu of the week. I really liked this week’s learning item, it was one of those articles you find every few years that really clicks for you. And don’t forget to check the resource, it’s a great plugin for your next project!

Now, here’s this week’s sponsor, Polypane:

⭐ Polypane is a great tool for testing your project’s responsive design and accessibility. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

## 🌟News

We got some cool things on the adoption front:

First, Angular finally has native support for Tailwind! Now all 3 big frontend frameworks have very good support for TailwindCSS.

Also, Codekit now has full support for Tailwind, the author called this release “the largest update in a decade”, do check it out!

And last but not least, Steve gave us a [sneak peek](https://twitter.com/steveschoger/status/1360340147938689029?ref=tailwindweekly.com) of a new upcoming Tailwind UI landing page, looks like it’ll be coming next week.

## 📚Learning of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/04b10c80-e7f2-4f8c-9dea-d1c6ab0f323c/image-16.png?t=1738083342)

### [CSS transitions and hover animations, an interactive guide](https://www.joshwcomeau.com/animation/css-transitions/?ref=tailwindweekly.com)

This beautiful thing was shared this week. In my opinion, this is THE article on CSS transitions, yes it’s THAT good. I particularly liked the section about the “will-change” property, very useful.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/5f017dbe-fca5-4b63-9f75-70e0ffe8c62a/image-17.jpg?t=1738083342)

### [Hatchet™: Get It Done! - Perth Digital Agency](https://hatchet.com.au/?ref=tailwindweekly.com)

Colorful animations, beautiful images, and good copywriting, what’s not to like? This digital agency sure has a good eye for design. That red hue looks really nice.

For the curious, what’s Hatchet’s description:

*We’re a digital agency that thrives on finding solutions to the diverse digital challenges local companies face as they grow. What’s your latest challenge?*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/db25bb11-8b36-450d-90f2-ecc7da25ea66/image-18.png?t=1738083342)

### [tailwindcss-pseudo-selectors](https://github.com/Microwawe/tailwindcss-pseudo-selectors?ref=tailwindweekly.com)

Have you ever wanted to style “:before” or “:after” pseudo-selectors using tailwind? With this plugin, you can! It supports a big variety like “:read-only” and “:empty” too. Definitely a must-have for your next project.

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?status=accepted&expires=1645135460&p%5Fsid=103161&p%5Faid=124142&p%5Flink=3094&p%5Ftok=9c9e340f-f817-47e9-b07b-d4db1c314f07&ref=tailwindweekly.ongloat.com), the tool is still in its early stages but it looks very promising.

---

Need to build a quick marketing page for your next project? Then try out [Tails](https://tailwindweekly.link/tails?ref=tailwindweekly.com)! Tails is the ultimate drag'n drop page builder built for TailwindCSS, they have a great selection of components (over 120+), let you export your code, and have very affordable pricing.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c58fda4c-f168-476e-9102-7e07163320a8/coffee.png?t=1738083343)
### Tailwind Weekly #40: New Tailwind Labs employee & Tailwind UI update!
URL: https://tailwindweekly.com/issue-40-2/
Last updated: 2025-09-30T09:25:14.000Z
Hello folks!

First off, let’s welcome [David Luhr](https://twitter.com/david%5Fluhr?ref=tailwindweekly.com) to the Tailwind Labs family! Check out the post in the news section for the whole story!

We also got blessed with a Tailwind UI update with 9 new additions, I particularly liked the new “Detail Screen” design, very clean.

Now, here’s this week’s sponsor:

⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

## 🌟News

The Tailwind Labs got a new member of the family! Go say hi to [David Luhr](https://twitter.com/david%5Fluhr?ref=tailwindweekly.com), and be sure to check out [the full story](https://blog.tailwindcss.com/welcoming-david-luhr-to-tailwind-labs?ref=tailwindweekly.com). One spoiler, it’s thanks to him we have the new \`ring\` utility in v2.0!

We also got another Tailwind UI update, here’s what’s new:

- 1 new [Home Screen](https://tailwindui.com/components/application-ui/page-examples/home-screens?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Detail Screen](https://tailwindui.com/components/application-ui/page-examples/detail-screens?ref=tailwindweekly.com) example to the Application UI package
- 2 new [Multi-Column Layout](https://tailwindui.com/components/application-ui/application-shells/multi-column?ref=tailwindweekly.com) examples to the Application UI package
- 1 new [Section Heading](https://tailwindui.com/components/application-ui/headings/section-headings?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Card Heading](https://tailwindui.com/components/application-ui/headings/card-headings?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Stacked List](https://tailwindui.com/components/application-ui/lists/stacked-lists?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Tabs](https://tailwindui.com/components/application-ui/navigation/tabs?ref=tailwindweekly.com) example to the Application UI package
- 1 new [Navbar](https://tailwindui.com/components/application-ui/navigation/navbars?ref=tailwindweekly.com) example to the Application UI package

## 📚Learning of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/32753bea-5ab8-4bb0-abd6-bb746acf165e/image-19.png?t=1738083342)

### [How to install Tailwind CSS v2.0 using Ruby on Rails](https://web-crunch.com/posts/how-to-install-tailwind-css-2-using-ruby-on-rails?ref=tailwindweekly.com)

For the ruby folks, this is an updated guide that uses v2.0, I particularly liked that it gives you the PurgeCSS configuration and shows you how to update your \`layout\` file. Very useful if you’re starting from scratch.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1459e04b-d247-44ba-b36b-3cbd3bc5a799/image-20.jpg?t=1738083343)

### [Campamentos ALYAX 2020](https://alyax.mx/campamentos/?ref=tailwindweekly.com)

I know, its in Spanish but bear with me. This week’s showcase is a website for a camping program for kids. Why am I featuring it? Because it looks awesome! The great use of bright colors, the clean information organization and the images really sold it for me.

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/26ddc602-d9eb-4fe2-83b5-d49034f50d88/image-21.png?t=1738083343)

### [tailwindcss-box-shadow](https://github.com/cossssmin/tailwindcss-box-shadow?ref=tailwindweekly.com)

First plugin recommendation in quite a while eh? This one solved a very particular problem, it generates standard box-shadow utilities, without CSS variables. So if you’re working with emails or even internet explorer, this is for you.

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

At Tailwind Made, we recently launched our latest template, [Atlas](https://redpixelthemes.com/templates/atlas/?ref=tailwindweekly.com)! Atlas is perfect for that personal blog you always wanted to start. It has a dark mode, a configured typography plugin, and it’s fully responsive. We also have a [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and an [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) template if you’re interested.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?status=accepted&expires=1645135460&p%5Fsid=103161&p%5Faid=124142&p%5Flink=3094&p%5Ftok=9c9e340f-f817-47e9-b07b-d4db1c314f07&ref=tailwindweekly.ongloat.com), the tool is still in its early stages but it looks very promising.

---

Need to build a quick marketing page for your next project? Then try out [Tails](https://tailwindweekly.link/tails?ref=tailwindweekly.com)! Tails is the ultimate drag'n drop page builder built for TailwindCSS, they have a great selection of components (over 120+), let you export your code, and have very affordable pricing.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4f5db50c-2f28-4e50-9551-9d217dad3f17/coffee.png?t=1738083343)
### Tailwind Weekly #39: a video, a book and a sneak peek!
URL: https://tailwindweekly.com/issue-39/
Last updated: 2025-09-30T09:29:08.000Z
Hello folks!

This week we got *a video*, on how to use the new line-clamp plugin, *a book*, by the programmatic bookshelf folks, and *a sneak peek*, from Adam, as part of the next Tailwind UI update.

Also, NASA is using Tailwind 👀, we got a primer on the mysterious \`clip-path\` and I bet angular fans will be happy with this week’s resource. I hope you enjoy this week’s goodies!

Now, here’s this week’s sponsor:

⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?utm%5Fcampaign=Tailwind%20Weekly&utm%5Fmedium=email&utm%5Fsource=Revue%20newsletter) you’ll get 20% off your subscription applied at checkout.

## 🌟News

Tailwind is getting so mainstream that we’re getting books about it now, check out The Pragmatic Bookshelf’s [“Modern CSS with Tailwind”](https://pragprog.com/titles/tailwind/modern-css-with-tailwind/?ref=tailwindweekly.com), the book is still in beta and around 75% but judging by the table of contents it looks like it will be very complete.

We mentioned the new official line-clamp plugin back in [issue 36](https://www.getrevue.co/profile/tailwind-weekly/issues/tailwind-weekly-36-happy-new-year-folks-302402?ref=tailwindweekly.com) but this week the Tailwind Labs team gave us [a post ](https://blog.tailwindcss.com/multi-line-truncation-with-tailwindcss-line-clamp?ref=tailwindweekly.com)and [a video](https://www.youtube.com/watch?v=klh-jMTm5PU&ref=tailwindweekly.com) about it detailing more examples.

Adam also teased us with some upcoming[ application home examples](https://twitter.com/adamwathan/status/1354508197244121097?ref=tailwindweekly.com) for Tailwind UI, looks 👌.

## 📚Learning of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/966d13a4-58aa-493a-ad88-fed632c7234c/image-22.png?t=1738083343)

### [Understanding Clip Path in CSS](https://ishadeed.com/article/clip-path/?ref=tailwindweekly.com)

Oh, clip-path, the esoteric CSS tool for doing fancy shapes! Our friend Ahmad wrote quite a primer on it, you’ll walk away knowing exactly how to use it along with real-world use cases on how it’s commonly implemented.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c1406347-7920-4007-9864-1be8cf845eb3/twitter-card--1-.jpg?t=1738083343)

### [NASA Jet Propulsion Laboratory (JPL)](https://www.jpl.nasa.gov/?ref=tailwindweekly.com)

Yep, you read it right, a NASA project is using tailwind! [Adam mentioned](https://twitter.com/adamwathan/status/1352283821954244611?ref=tailwindweekly.com) last week and I just had to check it out.

Like most tailwind showcases, you don’t know its tailwind until you check the source code, the website looks very modern and colorful but its also straight to the point and very content-centric.

For the curious, here’s what the JPL is:

*NASA’s Jet Propulsion Laboratory is the leading center for robotic exploration of the solar system.*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/ca4e2059-8780-4d54-bd69-3d4daf95c1f8/image-23.png?t=1738083343)

### [ngneat/tailwind](https://github.com/ngneat/tailwind?ref=tailwindweekly.com)

Angular fans, I got you! Here I come with [a schematic](https://angular.io/guide/schematics?ref=tailwindweekly.com) (kind of like a code generator) for using Tailwind with Angular. It supports Tailwind v2 (with its official plugins), NxCLI, PurgeCSS, and even some manual steps in case you have a very custom setup.

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Hey there, your favorite newsletter author, Vivian here 👋. Fun fact, I’m also a freelance front-end developer and I have some availability in February. I specialize in Tailwind (duh), Vue.js, and Alpine.js, among other things. If you’re looking for help for your next project I would love to talk. You can email me at vivian (at) redpixel.io.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?status=accepted&expires=1645135460&p%5Fsid=103161&p%5Faid=124142&p%5Flink=3094&p%5Ftok=9c9e340f-f817-47e9-b07b-d4db1c314f07&ref=tailwindweekly.ongloat.com), the tool is still in its early stages but it looks very promising.

---

I highly recommend [LambdaTest](https://www.lambdatest.com/?fp%5Fref=vivian12&ref=tailwindweekly.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy to use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1526f992-bd92-4c43-b19c-029d207f349a/coffee.png?t=1738083344)
### Tailwind Weekly #38: New Tailwind UI update & code-along live stream from Adam!
URL: https://tailwindweekly.com/issue-38/
Last updated: 2025-09-30T17:02:47.000Z
Hello folks!

This week was packed with new stuff in the Tailwind ecosystem. We got a new update from the Tailwind Labs team, a new stream from Adam, and a new app (which is this week’s resource!) from the makers of Windy.

Things are definitely picking up steam this year, really looking forward to all that is coming this year for TailwindCSS!

Now, here’s this week’s sponsor:

⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

## 🌟News

This was no idle week for the Tailwind Labs team, we got another Tailwind UI Update.

Here’s what’s new:

- New [Landing Page](https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/landing-pages?ref=tailwindweekly.com) examples category with 3 examples
- 4 new [Feature Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/feature-sections?ref=tailwindweekly.com#component-fea10362c98dcf74d601fab911a1aee3) examples
- 3 new [Hero Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/heroes?ref=tailwindweekly.com#component-6364cb4174b8dfdfbd7fa71ac72ab862) examples
- 1 new [Content Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/content-sections?ref=tailwindweekly.com#component-f6c39bd93fbb747d288f373cdbc039e3) example
- 1 new [Newsletter Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/newsletter-sections?ref=tailwindweekly.com#component-40876829251fe25b599a14d6ab91ac3a) example
- 1 new [Stat Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/stats-sections?ref=tailwindweekly.com#component-dcac76884a5471d1bbc2b95d1526d7a9) example
- 1 new [Testimonial](https://tailwindcss.com/plus/ui-blocks/marketing/sections/testimonials?ref=tailwindweekly.com#component-c5694e9aacc7edd691e3234d067adc62) example

And one of those landing pages was coded by Adam in [a live stream](https://www.youtube.com/watch?v=oQhVNja7Trw&ref=tailwindweekly.com). Definitely missed those.

## 📚Learning of the week

![](https://tailwindweekly.com/content/images/2025/09/image-24.jpg)

### [Custom Animations in TailwindCSS](https://devdojo.com/post/tnylea/custom-animations-in-tailwindcss?ref=tailwindweekly.com)

Tailwind comes with some animations out of the box and you can add your own too but sometimes we need a little inspiration, that’s what this article is about, it showcases 5 different animations that you can add right now to your tailwind config and customize to whatever you need.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/09/image-25.jpg)

### [Loveboat](https://loveboat.co/?ref=tailwindweekly.com)

Loveboat sure has a unique style. With vibrant colors, lots of images, lovely typography, and subtle animations, the website looks very elegant and alluring. What a pleasant surprise was finding out such a cool website was made with tailwind, the sky’s the limit folks!

For the curious, here’s what Loveboat does:

*Loveboat is a creative production company. Collaborating with a diverse cooperative of directors and interdisciplinary artists. Founded by filmmakers Jeff Baron, Greg Panteix, Nicolas Winding Refn, and Fred Fiore.*

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/09/image-26.jpg)

### [Tint by Beyond Code](https://tailwindweekly.link/tint?ref=tailwindweekly.com)

From the makers of Windy, comes Tint, the color picker for TailwindCSS developers. But it’s not like any other color picker out there, no sir, this thing automatically takes the color of whatever you have your cursor on and translates it to the nearest Tailwind CSS color. How cool is that!

Reminds me a lot of the popular color picker Sip, but made exclusively for tailwind users. It’s macOS for now and supports Tailwind v1, v2, v2 extended color palettes.

If you design in the browser with tailwind, for such a cheap price ($10) this is a no-brainer.

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

On Tailwind Made, we just updated our [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) HTML templates to TailwindCSS v2, among other improvements. Do check them out!

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

I highly recommend [LambdaTest](https://www.lambdatest.com/?ref=tailwindweekly.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy to use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-30.jpg)
### Tailwind Weekly #37: First Tailwind UI update of the year!
URL: https://tailwindweekly.com/issue-37/
Last updated: 2025-09-30T17:11:47.000Z
Hello folks!

This week sure was busy for the Tailwind Labs team, we got the first Tailwind UI update of the year and Adam gave us [a sneak peek](https://x.com/adamwathan/status/1350187263385350145?ref=tailwindweekly.com) for the next update, some complete landing pages are coming next week.

Plus I have something special for you in the resources section, I hope you all like it!

Now, here’s this week’s sponsor:

⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

## 🌟News

Adam announced they’re hiring another designer, if you’re not a designer be sure to spread the word!

> 🎉 Exciting news, we're hiring a Lead Designer to join the Tailwind Labs team!

> Help us build awesome tools that empower developers to create beautiful user interfaces faster, and have more fun doing it 💪

> Fully remote, $125k–$175k USD[https://t.co/8Nt3GvgPvk](https://jobs.tailwindui.com/lead-designer?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [January 14, 2021](https://x.com/adamwathan/status/1349840334981914627?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

We also got the first Tailwind UI update of the year, the team added:

- New [List Containers category](https://tailwindcss.com/plus/ui-blocks/application-ui/layout/list-containers?ref=tailwindweekly.com) to the Application UI package with 7 examples
- New [Dividers category](https://tailwindcss.com/plus/ui-blocks/application-ui/layout/dividers?ref=tailwindweekly.com) to the Application UI package with 8 examples
- 1 new[ Home Screen](https://tailwindcss.com/plus/ui-blocks/application-ui/page-examples/home-screens?ref=tailwindweekly.com#component-a75fa56c99de07250d40ffcf1c70283f) page example to the Application UI package
- 2 new [Stacked List](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/stacked-lists?ref=tailwindweekly.com#component-887cb27d2a36c9d38afe44b19d9a44c5) examples to the Application UI package
- 1 new [Grid List](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/grid-lists?ref=tailwindweekly.com#component-a26a744b444974a4cc73cb5886b8da6a) example to the Application UI package
- 1 new [Page Heading](https://tailwindcss.com/plus/ui-blocks/application-ui/headings/page-headings?ref=tailwindweekly.com#component-9a6c0d01eb626ce1c5a63141be2e5271) example to the Application UI package
- 1 new [Stacked Layout](https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/stacked?ref=tailwindweekly.com#component-d3429709d7862763cc93bbc60777c0fe) application shell example to the Application UI package

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/09/image-27.jpg)

### [How to Use Tailwind With Django](https://d2iq.com/?ref=tailwindweekly.com)

For the folks at python land, this is a great article on how to get started with Tailwind on Django, the post offers 3 options, including a manual install plus some notes on more complicated setups.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/09/image-28--1-.jpg)

### [CEnterprise Kubernetes Platform & Cloud Native Management | D2iQ](https://d2iq.com/?ref=tailwindweekly.com)

This week’s showcase sure looks sharp! The small animations really make it come alive, it looks like they took great care on the animations’ timing, they all feel very smooth. To top it off they even have the old Stripe’s floating menu, which looks awesome.

For the curious, here’s D2iQ description:

*D2iQ offers DevOps teams cloud-native application management software, services, and training, making day 2 operations more manageable than ever before.*

## 🎁Resource of the week

### [Here's a bigger spacing scale for TailwindCSS](https://gist.github.com/vivgui/85fe14842109a2955ab9b32d278c6f00?ref=tailwindweekly.com)

This week’s resource is a special one because it was made by me 🙂. I created an extended spacing scale for Tailwind, following Tailwind’s rule of 4 and it goes up to 200\. You can drop it in the \`extend\` section of your config and you’ll have more available padding/margin/height/width/etc values. I hope you like it!

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

On Tailwind Made, we just updated our [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) HTML templates to TailwindCSS v2, among other improvements. Do check them out!

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

I highly recommend [LambdaTest](https://www.lambdatest.com/?fp%5Fref=vivian12&ref=tailwindweekly.com) as your cross-browser testing tool, with it you can test on IE11, Safari, and most mobile browsers, it also has a very easy to use interface, it’s very fast, and they have a lot of automated testing features too. You can use coupon code “TAILWIND15” for 15% off the annual plan.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-31.jpg)
### Tailwind Weekly #36: Happy new year folks! 🎉
URL: https://tailwindweekly.com/issue-36/
Last updated: 2025-09-30T17:18:08.000Z
Hello folks!

Happy new year to all of you 🎉. Thank you for accompanying me on this journey in 2020, you guys rock!This is the first issue of the year and, like always, I bring you the usual goodies plus some recommendations on our new classified section.

I think 2021 will be even better for TailwindCSS, I expect more adoption, more cool plugins, and more awesome features. I’m really excited for what’s to come!

But before our usual stuff, here’s this week’s sponsor:

⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://tailwindweekly.link/polypane?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

## 🌟News

On the ecosystem we didn’t get much news since our last issue, everybody was getting a well-deserved rest, and the Tailwind Labs team is still working on awesome things to come.

One of which is a new official plugin called [line-clamp](https://github.com/tailwindlabs/tailwindcss-line-clamp?ref=tailwindweekly.com), which gives you more control when truncating text. Want the back story? Check out [this tweet](https://x.com/adamwathan/status/1346901305332281346?ref=tailwindweekly.com)!

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/09/image-29.jpg)

### [6 Tips for Tailwind CSS Development (with resources!)](https://dev.to/joserfelix/6-tips-for-tailwind-css-development-with-resources-33i4?ref=tailwindweekly.com)

Great article with multiple resources to improve your tailwind experience. For me, the “clsx” recommendation takes the cake, the post adds some examples on how to use it and I must say you can write some very clean code with it.

### [How to Use Tailwind With Django | Musings — zanderle](https://zanderle.com/musings/2020/12/how-to-use-tailwind-with-django/?ref=tailwindweekly.com)

![](https://tailwindweekly.com/content/images/2025/09/image-30.jpg)

Senior developer you were looking for. Hi, I’m Žan and I’m a full stack web engineer with a passion for user experience. Read on to see how I can help you.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/09/image-31.jpg)

### [Create. Edit. Publish. | Narration Box](https://narrationbox.com/?ref=tailwindweekly.com)

This week’s showcase is very artsy! Lots of colors, shapes, and illustrations. I love that the screenshots are central to the page and that they have a demo right there on the homepage. Also, that button animation is 👌.

For the curious, here’s what Narration Box does:

*Narration Box is the only tool you need to create and edit voiceovers, narrations, podcasts, audiobooks, audio widgets for your blogs or websites.*

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/09/image-32.jpg)

### [Find the nearest Tailwind Colour](https://find-nearest-tailwind-colour.netlify.app/?ref=tailwindweekly.com)

This resource is 🤯! Just like the title says, the tool lets you get the nearest TailwindCSS color from any hex code color. I think a great use case for this would be translating a design to code using only tailwind’s default colors. I also did some testing and it looks like it supports the full v2 color palette too.

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

On Tailwind Made, we just updated our [legal/business](https://redpixelthemes.com/templates/thompson/?ref=tailwindweekly.com) and [e-commerce](https://redpixelthemes.com/templates/elyssi/?ref=tailwindweekly.com) HTML templates to TailwindCSS v2, among other improvements. Do check them out!

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://usewindy.com/?ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

Are you on a Mac or Linux and are unfortunate enough to have to test on IE11? Or maybe you’re on Windows and need to test on Safari?

To both above, I highly recommend[LambaTest](https://tailwindweekly.link/lambdatest?ref=tailwindweekly.com), this is the cross-browser testing tool I use and I find the interface very easy to use plus they have a lot of automated testing features too.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-32.jpg)
### Tailwind Weekly #35: New Tailwind UI update, support coming to Codekit + more!
URL: https://tailwindweekly.com/issue-35/
Last updated: 2025-09-30T17:29:50.000Z
Hello folks!

Happy holidays to you all, I hope you all enjoy your time with your family and close ones. 2020 is FINALLY coming to an end.

And what best way to end the year than with a big Tailwind UI update! We got lots of updates, the Application UI package sure got some love 😄.

We’re also introducing our *classifieds* section at the bottom, right now I’m featuring some tools which I think will be very beneficial to frontend devs and people working with tailwind.

And last but not least, this is the last issue of 2020, We’ll be taking a 2-week break and we’ll come back in January 😁.

Now I’ll leave you to check this week’s sponsor and the usual goodies.

⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://polypane.app/tailwindcss/?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

## 🌟News

![](https://tailwindweekly.com/content/images/2025/09/detail-screens-preview--1-.jpg)

We got a big Tailwind UI update yesterday! Here’s the new stuff:

- Added new [Details Screens](https://tailwindcss.com/plus/ui-blocks/application-ui/page-examples/detail-screens?ref=tailwindweekly.com) page examples to the Application UI package with 3 examples
- Added new [Multi-Column Layouts](https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/multi-column?ref=tailwindweekly.com) category to the Application UI package with 3 examples
- Added new [Feeds](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/feeds?ref=tailwindweekly.com) category to the Application UI package with 3 examples
- Added new [Media Objects](https://tailwindcss.com/plus/ui-blocks/application-ui/layout/media-objects?ref=tailwindweekly.com) category to the Application UI package with 8 examples
- Added 2 new [Buttons examples](https://tailwindcss.com/plus/ui-blocks/application-ui/layout/media-objects?ref=tailwindweekly.com) to the Application UI package
- Added 1 new [Grid List example](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/grid-lists?ref=tailwindweekly.com#component-08e8555b844010db1f30cbafc8be6222) the Application UI package
- Added 2 new [Page Headings examples](https://tailwindcss.com/plus/ui-blocks/application-ui/headings/page-headings?ref=tailwindweekly.com#component-6fae9e848a855282e0d7fc637cb94791) to the Application UI package
- Added new [Stacked List example](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/stacked-lists?ref=tailwindweekly.com#component-f426e5b090a3887f40863034589d365b) to the Application UI package

The ecosystem is vibrant as ever too. Bryan Jones, the creator of Codekit, [tweeted](https://x.com/bdkjones/status/1338705729033670658?utm%5Fcampaign=Tailwind%20Weekly&ref=tailwindweekly.com) about TailwindCSS support coming for the tool very soon.

For the curious, Codekit is like a task Webpack but with a very good interface and at a very affordable price tag. If you don’t like the command line, you use a Mac and you do frontend work then you’ll probably love it.

And of course, we got new official TailwindCSS videos! From the channel:

- [Extended Spacing Scale](https://www.youtube.com/watch?v=XUGnTPWVL7U&ref=tailwindweekly.com)
- [Extended Font Size Scale](https://www.youtube.com/watch?v=VgUpUdqFWBA&ref=tailwindweekly.com)
- [Upgrading to Tailwind CSS 2.0 – A step by step guide](https://www.youtube.com/watch?v=HH1eloieu2U&ref=tailwindweekly.com)

## 📚Video of the week

TailwindCSS V2 | Dark mode

Dark mode is all the rage these days and TailwindCSS now supports it natively with a few different methods.

But what if you have never implemented it before? This video is exactly what you need. It’s a bit long (\~21m) but it covers the methods mentioned in the docs + a few more like using localstorage.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/09/image-33.jpg)

### [Acer Tree Services - Professional Tree Surgeons in Essex](https://acertreeservices.co.uk/?ref=tailwindweekly.com)

This being the last issue of the year I wanted to show you a website that would make you think a bit, about the possibilities with tailwind.

At first glance, this is just another small business website but it’s so full of attention to detail that I find it fascinating.

From the gradients to the simple but appropriate color palette, to the neat tree icons on the services page, to the images used. This design may not win an award anytime soon but it feels very intentionally designed, which is precisely what you want for small websites like these. A human touch they call it 👌.

For the curious, here’s Acer Tree Services tagline:

*Providing safe, honest and reliable tree work for homeowners and businesses in Essex including Pruning, Felling and Crown maintenance.*

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/09/image-34.jpg)

### [Master the Skill of Debugging CSS - Book](https://debuggingcss.com/?ref=tailwindweekly.com)

I bought this book on black Friday and have been reading it as part of my evening routine, I’m almost halfway through it and I can say it a solid investment if you want to learn more about the dark arts of debugging CSS.

The author is also offering a 15% discount on the book until December 31st so be quick!

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Designing on your own and want fancy icons? [Check out Iconfinder](https//www.iconfinder.com?ref=vivgui), they have the best selection of icons I have ever seen. All from different designers from around the world.

---

Imagine if you could go to any website, find a section/element you like, and get the approximate tailwind values to code it yourself. Like that idea? Then [Windy is for you](https://a.paddle.com/v2/click/103161/124142?link=3094&ref=tailwindweekly.com), the tool is still in its early stages but it looks very promising.

---

Are you on a Mac or Linux and are unfortunate enough to have to test on IE11? Or maybe you’re on Windows and need to test on Safari?

To both above, I highly recommend[ LambaTest](https://www.lambdatest.com/?ref=tailwindweekly.com), this is the cross-browser testing tool I use and I find the interface very easy to use plus they have a lot of automated testing features too.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-33.jpg)
### Tailwind Weekly #34: We got the State of CSS 2020 results + more new videos
URL: https://tailwindweekly.com/issue-34/
Last updated: 2025-09-30T17:37:47.000Z
Hello folks!

It’s been a quiet week in the tailwind ecosystem but we got new new videos for the “*What’s new in Tailwind CSS*” series. These videos are a gold mind for learning about how to use the new features and get around some of tailwind’s gotchas so don’t miss them!

Also, the results of the State of CSS 2020 survey came out recently too and one of the key takeaways is that the awareness of TailwindCSS exploded in 2020 🚀. Here’s the [report on CSS frameworks](https://2020.stateofcss.com/en-US/technologies/css-frameworks/?utm%5Fcampaign=Tailwind%20Weekly&ref=tailwindweekly.com) if you want to take a look.

Now I’ll take the opportunity to get a bit meta:

I’m happy to announce we got more than 1,000 subscribers now 🎉. Thank you to all of you that read our issue every week, writing this newsletter has been a joy 😊.

With that milestone achieved I’m now introducing sponsorships and I’m happy to say we got our first sponsor, Polypane!

⭐ Polypane is a stand-alone browser for web developers and designers that makes you five times as productive and helps you build better websites and apps. I use this daily for my frontend work and its 👌. If you sign up using [this link](https://polypane.app/tailwindcss/?ref=tailwindweekly.com) you’ll get 20% off your subscription applied at checkout.

P.S. We’ll be taking a 2 week after next issue to rest and spend it with the family ❤️.

## 🌟News

It’s been a pretty chill week for the Tailwind Labs team but we still got a few new videos:

- [Using @apply with Complex Classes](https://www.youtube.com/watch?v=Nez7G5sQz0k&ref=tailwindweekly.com)
- [Deep Merging Theme Extensions](https://www.youtube.com/watch?v=2vieAmjZruI&ref=tailwindweekly.com)
- [New Extra-Wide Breakpoint](https://www.youtube.com/watch?v=uPcaxF6ktZY&ref=tailwindweekly.com)

The one about deep merging really got me, I remember I used to do the old technique featured in the video, *all the time*.

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/09/image-35.jpg)

### [Color Theming with CSS Custom Properties and Tailwind](https://css-tricks.com/color-theming-with-css-custom-properties-and-tailwind/?ref=tailwindweekly.com)

This is a great article on how to leverage tailwind’s custom properties to for theming your project. After dark mode became a thing a few years ago people now associate it with theming but that’s not all it can do. Theming can make your site look entirely different by just changing a few property values. And it’s not only related to colors, it can also be used for spacing and even fonts! So definitely a recommended read.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/09/image-36.jpg)

### [Hello, I'm Florentin](https://ecklf.com/?ref=tailwindweekly.com)

Our friend Florentin refreshed his portfolio with tailwind recently and I LOVED the hero animation. While the site has a very clean and simple aesthetic that animation makes it look a lot more sophisticated.

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/09/Screen_Shot_2020-12-12_at_9.17.57_AM--1-.jpg)

### [Colour accessibility test for Tailwind CSS](https://colour-a11y.vercel.app/?ref=tailwindweekly.com)

This is a very useful tool if you use tailwind and do a lot of accessibility work. The site shows you the [WCAG accessibility ratings](https://www.w3.org/TR/WCAG20/?ref=tailwindweekly.com) for all V2 colors. Better yet, you can switch between a white and black background and the scores will change for that background.

## 🗞Classifieds of the week

Note: Some of these links are affiliate links, which means I get compensated in some way if you buy through them but I promise I only recommend products I really like!

Curious about the new section? Now that this newsletter passed 1,000 subscribers I’m experimenting with possible ways on making it profitable, just to pay for the time I spend each week putting it together.

One of the ideas is to create a new section for classified ads at the bottom, same as how [Dense Discovery](https://www.densediscovery.com/issues/358?ref=tailwindweekly.com) (and others newsletters) do it. I’m thinking about offering just 4 slots and see how it goes.

---

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-34.jpg)
### Tailwind Weekly #33: We got new videos & another rebuild with tailwind stream
URL: https://tailwindweekly.com/issue-33/
Last updated: 2025-09-30T17:46:26.000Z
Hello folks!

For our USA friends, I hope you had a great thanksgiving weekend! For the rest of us, I hope you enjoyed this year’s black friday and cyber monday deals 💸.

This week has been full of videos! Between the “*What’s new in Tailwind CSS”* series and Adam making a new “Rebuild X with TailwindCSS” (an e-commerce site this time!) the Tailwind Labs team sure has been busy.

By the way, I’m trying out a new format for the News section folks! I’ll try to make it more conversational and less just a list of links and see what happens 🙂.

## 🌟News

We now have Emmet support on [Tailwind Play](https://x.com/adamwathan/status/1333415854164340738?ref=tailwindweekly.com).

We got new videos from the “*What’s new in Tailwind CSS*” series, showcasing some new features from v2:

- [Dark Mode](https://www.youtube.com/watch?v=umm5pLv0EQw&ref=tailwindweekly.com)
- [Focus Ring Utilities](https://www.youtube.com/watch?v=ZbefZhgq9iQ&ref=tailwindweekly.com)
- [Extending Variants](https://www.youtube.com/watch?v=jevYcOlcUsc&ref=tailwindweekly.com)
- [The All-New Color Palette in Tailwind CSS v2.0](https://www.youtube.com/watch?v=D2O9%5F%5FGxWrU&ref=tailwindweekly.com)
- [Default Line Heights](https://www.youtube.com/watch?v=Jf0A-8%5FpHmo&ref=tailwindweekly.com)

Adam also did a new code along screencast this week, this time, recreating an ecommerce site, [Allbirds.com](https://www.allbirds.com/?ref=tailwindweekly.com). Check out [Part 1](https://www.youtube.com/watch?v=u2jiRjyUbwA&ref=tailwindweekly.com) and [Part 2](https://www.youtube.com/watch?v=oLK%5FcJ114QY&ref=tailwindweekly.com).

As for the ecosystem, this week we got some nice updates.

We now have [official TailwindCSS support](https://x.com/WebStormIDE/status/1333432083587457024?ref=tailwindweekly.com) on the latest version of WebStorm. And a [new color showcase feature](https://x.com/Atinux/status/1334216474815303680?ref=tailwindweekly.com) on the latest version of the [tailwind module for NuxtJS](https://tailwindcss.nuxtjs.org/?ref=tailwindweekly.com).

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/09/image-4--3-.jpg)

### [Simple pie charts with fallback, today – Lea Verou](https://lea.verou.me/blog/2020/11/simple-pie-charts-with-fallback-today/?ref=tailwindweekly.com)

I’m a really big fan of CSS-only solutions to problems we thought could only be solved with some JS magic.

I remember when I discovered I could do same height columns with flexbox, it was 🤯.

Well, guess what, now we can do simple pie charts with only CSS!

This article shows you how to do it using conic-gradients which have [decent support](https://caniuse.com/css-conic-gradients?ref=tailwindweekly.com) across modern browsers but no IE11 support.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/09/2020-12-05_11.44.38_deno.land_5bc160de7923--1-.jpg)

### [Deno - A secure runtime for JavaScript and TypeScript](https://deno.com/?ref=tailwindweekly.com)

I love showcasing all kinds of websites made with TailwindCSS here but its also good to remember that, sometimes, simple and clean can definitely be great too!

Take this week’s showcase, Deno’s website, which is as simple as it gets when it comes to new technology websites. They’re using some of the colors from the default tailwind palette and don’t have a lot of fancy content on the homepage. They go straight to the point on what it is, what it does great, how to install it, etc and start showcasing code right away, in a very minimalistic and easy to understand format.

So if you want to launch something new soon, don’t worry too much about the visuals and focus more on the idea or message you want to convey.

When in doubt, something is better than nothing 😉.

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/09/image-37.jpg)

### [Windy - Transform every element on any website to Tailwind CSS](https://a.paddle.com/v2/click/103161/124142?link=3094&ref=tailwindweekly.com)

The Tailwind ecosystem is evolving extremely fast! We now are getting new tools not just to improve your tailwind code but also to improve your coding experience.

But this week’s resource is kind of special since I believe it solves a very interesting problem. Now, to get to the point:

*Windy is a browser extension for Google Chrome and Firefox that lets you transform HTML elements to Tailwind CSS.*

Sounds cool of course but what problem does that solve?

Well sometimes, when I’m browsing other websites and I see a element or component I want to replicate with Tailwind, there’s a lot of back and forth between their website, my project and my code. With windy, you just install the extension, start clicking around and you’ll get tailwind classes with the closest approximation values from the tailwind config, pasted it to your clipboard.

That’s it, next you paste the code, customize it to your needs and now you just saved 15m. Do that for multiple components in one project and the tools just pays for itself in time saved.

The catch? The tool is still in the “early access” stage so you may find some bugs here and there but I definitely think this is a great tool to have in your arsenal if you do a lot of “designing in the browser” with tailwind.

Between this and [UI Devtools](https://www.ui-devtools.com/?ref=tailwindweekly.com), the market for tailwind coding tools is getting very exciting!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/09/coffee-35.jpg)
### Tailwind Weekly #32: v2.0 is now released folks and it's insanely good 😍!
URL: https://tailwindweekly.com/issue-32/
Last updated: 2025-10-01T13:29:20.000Z
Hello folks!

I’m happy to announce that TailwindCSS v2.0 is finally out!

The TailwindLabs team worked pretty hard on this and they even gave us a few surprises like the [all new site](https://tailwindcss.com/?ref=tailwindweekly.com), official [dark mode support](https://tailwindcss.com/docs/dark-mode?ref=tailwindweekly.com), Tailwind UI’s update to v2.0, plus lots of new stuff.

This update feels like a whole new tailwind, bigger, faster and throughly planned 👌.

## 🌟News

If you thought the teaser was cool, wait until you check out the official trailer video. That thing sure is epic!

![](https://tailwindweekly.com/content/images/2025/10/card.85c0ff9e455da585949ff0aa50981857--1-.jpg)

### [Tailwind CSS v2.0](https://tailwindcss.com/blog/tailwindcss-v2?ref=tailwindweekly.com)

This is the official announcement blog post and its quite packed. I recommend you read it thoroughly, maybe a few times, since we got A LOT of new stuff.

### [Upgrade Guide - Tailwind CSS](https://v2.tailwindcss.com/docs/upgrading-to-v2?ref=tailwindweekly.com)

And of course, we have the upgrade guide, which should be your next stop after the blog post above.

Testament to the team’s goal of consistency, I upgraded a 15+ pages v1.4.6 project to v2 right after launch and it took me around an hour, mostly because I was integrating the new plugins (typography, forms, etc) and refactoring to use tailwind’s new features instead of my custom css.

### [Release v0.3.0 · tailwindlabs/tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography/releases/tag/v0.3.0?ref=tailwindweekly.com)

If you’re currently using the typography plugin and want to update to v2.0 then check out the upgrade guide on the plugin’s latest release. The changes are mostly in the config so should be very easy to do.

> Want to try it out super quick? We just updated Tailwind Play with v2.0 support 🤩[https://t.co/1r1uCCHqD8](https://t.co/1r1uCCHqD8?ref=tailwindweekly.ongloat.com)— Tailwind CSS (@tailwindcss) [November 18, 2020](https://x.com/tailwindcss/status/1329188374930919431?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

And of course, because the TailwindLabs team thought of everything, Tailwind Play now has support for v2.0!

## 📚Video of the week

Our beloved Simon is back again with another code along video, this time showing the new stuff from v2.0\. I honestly was quite delighted at seeing the \`space-x-\*\` and gradient utilities at work. The fact that you ca create such unique designs like this, with just out of the box tailwind its 🤯.

## 💅Showcase of the week

### [I'm Jack McDade and I'm tired of boring websites.](https://jackmcdade.com/?ref=tailwindweekly.com)

### 

![](https://tailwindweekly.com/content/images/2025/10/jack-on-blue--1-.jpg)

In honor of the release of v2.0, I wanted this week’s showcase to be special, so I looked into my backlog for the wildest and most creative website I could find. Meet Jack McDade’s personal website!

Jack sure is quite the artist, every page uses a different color palette and shape designs, it makes you think you’re looking at a graphic design image instead of a coded website, definitely impressed 👏.

For those of you who don’t know Jack, here’s his bio:

*I created Statamic, co-host Full Stack Radio, and am working on Radical Design Course. I was homeschooled, live in Florida, wash dishes, shower often, learn quickly, strive put others first, and live my life for Jesus. I’m a dad, husband, and a kid at heart. I wish I could skateboard.*

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee.jpg)
### Tailwind Weekly #31: TailwindCSS v2.0 finally has a release date 🤩
URL: https://tailwindweekly.com/issue-31/
Last updated: 2025-10-01T13:43:20.000Z
Hello folks!

The release cadence of the Tailwind Labs team has been *brutal* this week. We got multiple alpha releases, 2 new official plugins and even a 30s teaser video for v2.0 (hype 💯).

But the ecosystem wasn’t far off either, we got quite a nice resource recommendation this week for you, it is 🤯.

Plus we got the official v2.0 release date, November 18th, that’s next week! 🤞

## 🌟News

> It's coming. [pic.twitter.com/kvmnBLvgQF](https://x.com/tailwindcss/status/1326963053200543744/video/1?ref=tailwindweekly.com)— Tailwind CSS (@tailwindcss) [November 12, 2020](https://x.com/tailwindcss/status/1326963053200543744?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Tailwind v2.0 teaser video, I find it both epic and hilarious 🤣.

### [tailwindlabs/tailwindcss-forms](https://github.com/tailwindlabs/tailwindcss-forms?ref=tailwindweekly.com)

This is the successor of the [*custom-forms*](https://github.com/tailwindlabs/tailwindcss-custom-forms?ref=tailwindweekly.com)plugin, I think the main difference right now its that now we won’t need to add the \`form-input, form-select\` classes anymore and this is more like sensible default rules than complete global customizations.

You can view the kitchen sink demo [here](https://tailwindcss-forms.vercel.app/?ref=tailwindweekly.com).

### [tailwindlabs/tailwindcss-aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio?ref=tailwindweekly.com)

A handy little plugin for aspect ratio classes, they come real handy when dealing with responsive images and embeds.

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/10/image-39.jpg)

### [How to Style Your React Apps with Less Code Using Tailwind CSS, Styled Components, and Twin Macro](https://www.freecodecamp.org/news/how-to-style-your-react-apps-with-less-code-using-tailwind-css-and-styled-components/?ref=tailwindweekly.com)

This one is an oldie but I wanted to mention it because its one of the few tailwind tutorials who use [twin.macro](https://github.com/ben-rogerson/twin.macro?ref=tailwindweekly.com), which is more like a middleware for making tailwind work with *styled components*. Definitely a good read.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-40.jpg)

### [A static site for your dynamically-generated website - Sitesauce](https://sitesauce.app/?ref=tailwindweekly.com)

Sitesause’s design has gotten even better since launch (back in May). Their aqua blue choice definitely makes the brand stand out but the asymmetrical shapes makes it more memorable in my opinion.

And the best part is that they’re using some components Tailwind UI, but they customized them so much they look unique and more brand like. Kudos to [Miguel](https://x.com/m1guelpf?ref=tailwindweekly.com) for such a cool design!

For the curious:

*Sitesauce converts your dynamic websites into static sites, so you can keep your existing workflow while enjoying all the benefits static sites provide.*

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-41.jpg)

### [UI Devtools for Tailwind CSS](https://www.ui-devtools.com/?ref=tailwindweekly.com)

Man, this tool is just 🤯. It’s basically a mix of a component builder and a browser tool that *also* writes code. Definitely looks promising but it’s only available as [sponsorware](https://calebporzio.com/sponsorware?ref=tailwindweekly.com). Be sure to watch the [demo](https://www.youtube.com/watch?v=5rnxb2XypPE&ref=tailwindweekly.com) or [play with it](https://www.ui-devtools.com/demo?ref=tailwindweekly.com) yourself.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-1.jpg)
### Tailwind Weekly #30: New alpha versions, Tailwind UI updates and more!
URL: https://tailwindweekly.com/issue-30/
Last updated: 2025-10-01T13:52:35.000Z
Hello folks!

It’s been a lively week on the TailwindCSS community, we got a few more alpha versions, new Tailwind UI components and an early access version of tailwind support in WebStorm.

Plus your regular dose of tailwind stuff 😉.

## 🌟News

### [v2.0.0-alpha.8](https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.0.0-alpha.8?ref=tailwindweekly.com)

This is the latest alpha version as of this writing, the team also rolled back the upgrade to PostCSS 8, looks like they’re thinking it over.

![](https://tailwindweekly.com/content/images/2025/10/image-42.jpg)

### [WebStorm 2020.3 EAP #7: Tailwind CSS Support, etc](https://blog.jetbrains.com/webstorm/2020/11/webstorm-2020-3-eap-7/?ref=tailwindweekly.com)

JetBrains just released an early access version of WebStorm, which includes support for TailwindCSS. It looks like it’ll be very similar to the VSCode extension but a bit more limited.

New Tailwind UI Update 🎉

- Added new [Settings Screens category](https://tailwindcss.com/plus/ui-blocks/application-ui/page-examples/settings-screens?ref=tailwindweekly.com) with 4 examples
- Added new [Breadcrumbs category](https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/breadcrumbs?ref=tailwindweekly.com) with 4 examples
- Added 1 new [Stacked Layout example](https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/stacked?ref=tailwindweekly.com#component-2c220920c5e70d33aeaa56deb4df3f0e)
- Added 1 new [Description List example](https://tailwindcss.com/plus/ui-blocks/application-ui/data-display/description-lists?ref=tailwindweekly.com#component-7a07446d5ac240767202f521f7065893)
- Added 1 new [Form Layout example](https://tailwindcss.com/plus/ui-blocks/application-ui/forms/form-layouts?ref=tailwindweekly.com#component-d45285168387e95ed939cc1a91e8e19c)
- Added 2 new [Navbar examples](https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/navbars?ref=tailwindweekly.com#component-031f259ad35e12ad49e6cd45cb512e07)
- Added new [Radio Groups category](https://tailwindcss.com/plus/ui-blocks/application-ui/forms/radio-groups?ref=tailwindweekly.com) with 3 examples
- Added 1 new [Sidebar Layout example](https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/sidebar?ref=tailwindweekly.com#component-966a548c3d7225d9155a443e979057b5)
- Added 2 new [Toggle examples](https://tailwindcss.com/plus/ui-blocks/application-ui/forms/toggles?ref=tailwindweekly.com)
- Added 1 new [Stacked List example](https://tailwindcss.com/plus/ui-blocks/application-ui/lists/stacked-lists?ref=tailwindweekly.com#component-43253d4065559b08c65a0d2918310810)

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/10/8n34xzziy8xvqzrxvort--1-.jpg)

### [Straightforward guide to use TailwindCSS with Sapper](https://dev.to/andrasbacsai/straightforward-guide-to-use-tailwindcss-with-sapper-3dj7?ref=tailwindweekly.com)

I see Sapper/Svelte is getting some traction lately, especially in the esports community so I’m sharing this guide for the folks who are curious and want to take Sapper for a spin using our favorite CSS framework. This is the most up to date tutorial on how to get a fully featured TailwindCSS setup in Sapper. Have fun!

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-43.jpg)

### [Siegrs.GG | Rainbow 6 Siege Team Finder](https://siegrs.gg/?ref=tailwindweekly.com)

Speaking of the esports community, this week we’re featuring a team finder site! Siegrs.gg call itself a *team and player finder for Rainbow Six Siege. Find esports clans for competitive games.*

This one is a good example of a functional web app using mostly tailwind defaults, they do know how to rock that red 👌.

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-44.jpg)

### [TailwindCSS Colors v2.0](https://www.figma.com/community/file/905719775911766776/tailwindcss-colors-v2-0?ref=tailwindweekly.com)

For those of you who don’t know yet, V2.0 of tailwind added a modified color palette to the defaults.

This is figma’s community file with those same colors, for your prototyping delight. So if you’re a figma file be sure to check it out for your next design.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-2.jpg)
### Tailwind Weekly #29: Happy 3 year anniversary to tailwindcss 🥳!
URL: https://tailwindweekly.com/issue-29/
Last updated: 2025-10-01T14:05:55.000Z
Hello folks!

[Join me in wishing a happy 3 year anniversary to TailwindCSS](https://x.com/adamwathan/status/1322275488778342403?ref=tailwindweekly.com)! 🥳

Besides that special date, this week has been pretty moderate on the news front since the team is working on hard on v2.0 but we did get new videos on the “What’s new in Tailwind CSS” series and new alpha versions (latest is alpha.5).

And of course, the usual content!

For the new people since our last issue, we have a menu of learning resources, website showcases and tools/plugins we feature each week. Enjoy 😁.

## 🌟News

> 🚀 We just published three new bite-sized "What's new in Tailwind CSS" screencasts, this time covering some of the stuff that was added in v1.9!

> 🤸 New rotate, skew, and rounded values

> 🤹‍♀️ Shareable presets

> 🧗‍♂️ New grid-auto-rows/columns and span utilities[https://t.co/v5a2wjEG0e](https://www.youtube.com/watch?v=jrJbZYCyMZw&list=PL5f%5Fmz%5FzU5eV0%5F7udNKr3qffGCkJ4Avb%5F&index=14&ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [October 29, 2020](https://x.com/adamwathan/status/1321897724929855489?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

For the busy bunch, the tailwind team has posted new short videos about the new and important stuff they have been releasing, go watch Simon code some markup with new fancy stuff, go go.

If you been checking tech twitter this week you probably heard about Next.js Conf, they launched new stuff for their framework (Next.js) and new features for their deployment service (Vercel) but the coolest thing, in my opinion, was discovering that one of the starter projects they released was made with tailwind!

### [Release v2.0.0-alpha.5 · tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.0.0-alpha.5?ref=tailwindweekly.com)

Slow and steady, the tailwind team has been hard at work finishing up the latest touches for v2.0, we’re down to alpha 5 now, this time, upgrading to PostCSS 8.

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/10/image-45.jpg)

### [Speeding Up Tailwind CSS Builds](https://nystudio107.com/blog/speeding-up-tailwind-css-builds?ref=tailwindweekly.com)

Ever since the tailwind team started growing in size, tailwind’s build times have decreased *substantially*. We’re talking seconds of savings here. To the point where I can now run PurgeCSS on each save, if I want to, on a small site, without impacting dev experience much.

But for the lot of you that do have big sites or less common setups, I think this article can give you pretty good notion of how to identify and optimize compiling speed issues in TailwindCSS.

IMPORTANT NOTE: Folks who use Webpack will get the most value from the article this is the module bundler the author is using.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-46.jpg)

### [HelloSun invests in photovoltaics, for your roof.](https://hellosun.brussels/en/?ref=tailwindweekly.com)

Hello Sun is an elegant and minimalist website that heavily uses illustrations, bright accent colors, and visual hierarchy to portray its message. I find their overuse of white makes for a nice art on canvas effect.

For the curious, here’s what HelloSun is:

*HelloSun is a partnership between you, us and the Brussels Region, helping the city go solar. A win-win partnership. Take part now!*

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/946e31caa258d5af599789218f28638f--1-.jpg)

### [Tailwind Gradient Designer](https://tailwind-gradient-designer.csspost.com/?ref=tailwindweekly.com)

Ever since tailwind added native support gradients, it opened a world of possibilities, especially because it has *such a big* color palette.

For the non-artsy folks who want to play around to find new gradient ideas, this tool is for you!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-3.jpg)
### Tailwind Weekly #28: Special come back issue!
URL: https://tailwindweekly.com/issue-28/
Last updated: 2025-10-01T14:19:16.000Z
Hello folks!

After a 2 months hiatus Tailwind Weekly is back 🎉. Starting next week, every Saturday I’ll grace your inbox with the glory of our ecosystem updates and I’ll also be experimenting with new stuff (like adding new sections) in the future. You know, to spice things up.

But this issue is a special one. You see, right when I put Tailwind Weekly on pause, the Tailwind team started moving at the speed of light and launching new stuff on a cadence never seen before! This email is more or less a summary of those updates since the last issue.

I’ll try to keep it short and sweet, starting with…

## 🌟News

### We got 3 new minor versions

[V1.7.0 gave us:](https://tailwindcss.com/blog/tailwindcss-1-7?ref=tailwindweekly.com)

- Built-in support for background gradients
- New background-clip utilities
- New feature flagging and deprecation system to use new breaking changes stuff today, that will be native in v2.0
- New gap classes names, set under the *removeDeprecatedGapUtilities* flag
- New *contents* display utility
- Default letter-spacing per font-size
- New divide border styles
- \+ other stuff

[V1.8 introduced](https://tailwindcss.com/blog/tailwindcss-1-8?ref=tailwindweekly.com):

- New *font-variant-numeric* utilities
- New *place-items*, *place-content*, *place-self*, *justify-items,* and *justify-self* utilities
- Dark mode variant (experimental)
- \+ other stuff

[V1.9 released:](https://tailwindcss.com/blog/tailwindcss-1-9?ref=tailwindweekly.com)

- New *presets* key that makes it possible to configure a custom “base configuration” for your projects.
- New utilities for grid-auto-columns and grid-auto-rows
- New Focus indicator improvements and configurable outlines
- Extended border radius, rotate, and skew scales
- \+ other stuff

We also got a [v2.0 alpha release](https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.0.0-alpha.1?ref=tailwindweekly.com) packed with A LOT of new stuff, be sure to check it out!

![](https://tailwindweekly.com/content/images/2025/10/play--1-.jpg)

### [Introducing Tailwind Play – Tailwind CSS](https://tailwindcss.com/blog/introducing-tailwind-play?ref=tailwindweekly.com)

Remember [tailwind.run](https://tailwind.run/?ref=tailwindweekly.com)? Well, the tailwind team decided to make their own improved version. I highly recommend you watch their [promo video](https://www.youtube.com/watch?v=eCWhTZ34Hck&ref=tailwindweekly.com), its 🤯.

Here’s the [direct link to the playground](https://play.tailwindcss.com/?ref=tailwindweekly.com), have fun!

![](https://tailwindweekly.com/content/images/2025/10/image-47.jpg)

### [Headless UI – Unstyled, fully accessible UI components](https://headlessui.com/?ref=tailwindweekly.com)

Remember [back in May](https://www.getrevue.co/profile/tailwind-weekly/issues/tailwind-weekly-18-twui-renderless-components-are-coming-251277?ref=tailwindweekly.com) when Adam demoed a new “renderless” component made with Vue? Well, that idea is now a small but growing library called Headless UI.

As of now they have React and Vue versions but Alpine’s is coming soon and they also made new components like [Dropdowns](https://codesandbox.io/s/headlessuivue-menu-example-70br3?file=%2Fsrc%2FApp.vue&ref=tailwindweekly.com) and [Toggles](https://codesandbox.io/p/sandbox/headlessuivue-switch-example-8ycp6?ref=tailwindweekly.com).

![](https://tailwindweekly.com/content/images/2025/10/lap--1-.jpeg)

### [Tailwind got a new youtube channel](https://tailwindcss.com/blog/whats-new-in-tailwindcss-on-youtube?ref=tailwindweekly.com)

The Tailwind team decided to up their youtube game and it’s definitely paying off, Simon (employee #2) is doing an excellent job and I’m really liking the content so far.

![](https://tailwindweekly.com/content/images/2025/10/image-48.jpg)

### [Introducing Heroicons.com](https://tailwindcss.com/blog/introducing-heroicons?ref=tailwindweekly.com)

Heroicons, the icons pack made by Tailwind’s Designer [Steve](https://x.com/steveschoger?ref=tailwindweekly.com), is now an official icons companion for TailwindCSS and has [its own website](https://heroicons.com/?ref=tailwindweekly.com).

So far it’s 226 icons and growing. Definitely a project to keep an eye on in the future.

### Last but not least, Tailwind UI Updates!

- New [Pricing Pages](https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/pricing-pages?ref=tailwindweekly.com) category with 4 examples
- New [Header Sections](https://tailwindcss.com/plus/ui-blocks/marketing/sections/header?ref=tailwindweekly.com) category with 3 examples
- 4 new [Pricing Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/pricing?ref=tailwindweekly.com) examples
- 2 new [CTA Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/cta-sections?ref=tailwindweekly.com) examples
- 3 new [FAQ Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/faq-sections?ref=tailwindweekly.com) examples
- 3 new [Feature Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/footers?ref=tailwindweekly.com) examples
- 2 new [Footer Section](https://tailwindcss.com/plus/ui-blocks/marketing/sections/footers?ref=tailwindweekly.com) examples
- 2 new [Logo Cloud](https://tailwindcss.com/plus/ui-blocks/marketing/sections/logo-clouds?ref=tailwindweekly.com) examples
- New [Team Sections](https://tailwindcss.com/plus/ui-blocks/marketing/sections/team-sections?ref=tailwindweekly.com) category to the Marketing package with 8 examples
- New [Section Headings](https://tailwindcss.com/plus/ui-blocks/application-ui/headings/section-headings?ref=tailwindweekly.com) category to the Application UI package with 9 examples
- New [Steps](https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/progress-bars?ref=tailwindweekly.com) category to the Application UI package with 7 examples
- 5 new [Slide-Over](https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/drawers?ref=tailwindweekly.com) examples to the Application UI package

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-4.jpg)
### Tailwind Weekly #27: New Tailwind Labs employee + more tailwind 2.0 eye candy 🍬
URL: https://tailwindweekly.com/issue-27/
Last updated: 2025-10-01T14:34:42.000Z
Hello folks!

This week we finally met the newest Tailwind Labs employee, Robin Malfait! Robin is a full stack developer from Belgium who loves Laravel and React. Be sure to say hi to him on [twitter](https://x.com/malfaitrobin?ref=tailwindweekly.com) and check his [personal website](https://robinmalfait.com/?ref=tailwindweekly.com). And here’s the post on [how the team decided to hire him](https://tailwindcss.com/blog/from-900-to-1-how-we-hired-robin-malfait?ref=tailwindweekly.com), it’s quite a read!

We also got to see Adam opening a [PR](https://github.com/tailwindlabs/tailwindcss/pull/2159?ref=tailwindweekly.com) for the [oldest and most requested feature](https://github.com/tailwindlabs/tailwindcss/issues/313?ref=tailwindweekly.com) in TailwindCSS.

Also JetBrains made a very exciting announcement, it looks like we’ll be getting Tailwind support in WebStorm later in the year.

No bad for just 1 week 😉.

## 🌟News

> 🎉 Super excited to announce that after almost 900 job applications, dozens of interviews, and hours of pair programming sessions, today is [@malfaitrobin](https://x.com/malfaitrobin?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)'s first day at [@tailwindlabs](https://x.com/tailwindlabs?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)!

> I wrote more about Robin and the process we used to find him here 👉[https://t.co/NJSpWgLh60](https://tailwindcss.com/blog/from-900-to-1-how-we-hired-robin-malfait?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [August 10, 2020](https://x.com/adamwathan/status/1292788782740180995?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

> The improvements to \`@​apply\` in Tailwind 2.0 are gonna blow your fucking mind 😇 [pic.twitter.com/sEbfpRJCKX](https://x.com/adamwathan/status/1293575524254732289?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [August 12, 2020](https://x.com/adamwathan/status/1293575524254732289?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

YeS! @apply will finally support media queries and pseudo selectors like :hover and :focus and it’s coming for V2.0!

![](https://tailwindweekly.com/content/images/2025/10/image-49.jpg)

### [TailwindCSS support is supposedly coming to WebStorm in November](https://blog.jetbrains.com/webstorm/2020/08/webstorm-2020-3-roadmap/?ref=tailwindweekly.com)

*With WebStorm 2020.3 scheduled for the end of November, we’d like to share our plans for the rest of the year.*

*Here are some of the highlights from our roadmap:*

*We’ll do our best to add support for Tailwind, a popular CSS framework.*

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/10/image-50.jpg)

### [Tailwind CSS Tips and Tricks](https://laravel-news.com/tailwind-css-tips-and-tricks?ref=tailwindweekly.com)

This post from our friend [Jason Beggs](https://x.com/jasonlbeggs?ref=tailwindweekly.com) is quite a treat. It’s basically a collection of solutions (using tailwind) to very specific but common scenarios you encounter while working with UI’s like “*How to vertically center a div inside another div”* or the classic “*How to center an SVG/Icon and text inside a button or link”.* Of course, with CSS, there are multiple solutions to those kind of situations but I like that Jason keeps his solutions very simple and easy to remember.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-51.jpg)

### [Curiously Creative Web Design in Bath | Our name is Mud](https://ournameismud.co.uk/?ref=tailwindweekly.com)

This week we get another agency showcase but this one will likely subvert your expectations!

First thing you see is a lovely custom cursor that becomes very iPadOS like on link hover.

Then you check out the pages and see all those subtle animations, like the unique shape opening in each project’s image and the hero background line that you swore it was an image but nope.

And finally, when checking the last page, you get delighted by the off canvas menu that open *to the right*, to show the contact info.

It’s like I could never predict that the website would do next! Very unique and impressive, definitely check it out.

Here’s how “Our Name is Mud” describe their company:

*We build websites, plan digital strategies and create great online results for clients across the UK. Curiously Creative thinking. Great code. A friendly team. Our name is Mud.*

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-52.jpg)

### [variantwind](https://github.com/sibbngheid/variantwind?ref=tailwindweekly.com)

Meet variantwind, a vue directive that lets you write code like this:

*<div v-variantwind class=“w-full bg-red-500 md:{w-1/3 bg-blue-500} lg:{w-¼ bg-yellow-500 hover:bg-yellow-900}”>*

I must admit I really see the appeal, in theory, this would be a more visual way to organize your css classes in your markup. It also has support for other ways of writing it like:

*<div v-variantwind=“‘xl:{w-¼ bg-yellow-500 hover:bg-yellow-900}’”>*

And it has PurgeCSS support!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-5.jpg)
### Tailwind Weekly #26: We got the origin history of tailwind + a bird's view of the upcoming v2.0
URL: https://tailwindweekly.com/issue-26/
Last updated: 2025-10-01T14:40:37.000Z
Hello again folks!

This week was pretty special for the community, we got to learn how TailwindCSS came to be, from an idea burn out of frustration to a multi-million dollar business, it’s quite a story to tell!

We also got a more aerial view of the upcoming v2.0, which it looks like it’ll be packed with all the most request features ever since TailwindCSS was launched, apparently v2.0 will be coming this year, hopefully 🤞!

Now, onto the usual!

## 🌟News

![](https://tailwindweekly.com/content/images/2025/10/image-53.jpg)

### Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business – Adam Wathan

*The story of how a couple of failed SaaS ideas and a bunch of ugly Less stylesheets turned into my life’s work.*

Quite a story indeed, biggest lessons? Working in public can he life-changing!

> Wrote up a big document for the team today outlining our plans and North Star objective for the next 6 months and holy crap I’m so excited that we actually have the resources to do this stuff now 🤩 [pic.twitter.com/e4BCiwdBNZ](https://x.com/adamwathan/status/1291552096685371397/photo/1?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [August 7, 2020](https://x.com/adamwathan/status/1291552096685371397?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Looks like this year will be Tailwind’s best ever!

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/10/image-54.jpg)

### [The complete guide to CSS media queries](https://polypane.app/blog/the-complete-guide-to-css-media-queries/?ref=tailwindweekly.com)

This was released a while ago but I just read it recently and it is VERY good, very “CSS Tricks” style, I learned about media queries that I didn’t even know existed and the post also had a section about upcoming ones, a very good read for any frontend developer!

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-55.jpg)

### [Monitor your websites for technical issues](https://www.hostpapa.com/?ref=tailwindweekly.com)

Here’s another SaaS landing page made with tailwind, very clean and has a nice use of colors, really good inspiration piece for when you want something simple that also looks good.

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-56.jpg)

### [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer?ref=tailwindweekly.com)

*tailwind-config-viewer* is basically a visual renderer of your tailwind config file, you visualize an example of a lot of the tailwind options like colors, font sizes and even line heights.

I think it’s a great tool for building design systems and/or introducing tailwind’s capabilities to designers so they can adapt to tailwind’s intended constraints.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-6.jpg)
### Tailwind Weekly #25: v1.6 is out + a sneak peek at v2.0 👀
URL: https://tailwindweekly.com/issue-25/
Last updated: 2025-10-01T08:27:59.000Z
Hello folks! Sorry for the late issue, [storm Isaias](https://en.wikipedia.org/wiki/Hurricane%5FIsaias?ref=tailwindweekly.com) wrecked a bit of havoc where I’m at, but better late than never!

This week we got a new v1.6 version and a thread from Adam talking about the future v2.0, the most important part was that he said [there’s not gonna be a ](https://twitter.com/adamwathan/status/1289004882419122176?ref=tailwindweekly.com)[**paradigm shift**](https://twitter.com/adamwathan/status/1289004882419122176?utm%5Fcampaign=Tailwind%20Weekly&utm%5Fmedium=email&utm%5Fsource=Revue%20newsletter), Adam is really committed to backward compatibility.

TailwindCSS’s future keeps looking more and more awesome 🥳.

## 🌟News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8854d953-600c-463d-843d-8f04d2cdb00f/image-57.png?t=1738083347)

### [Tailwind CSS v1.6.0](https://blog.tailwindcss.com/tailwindcss-1-6?ref=tailwindweekly.com)

This is the official announcement of Tailwind CSS v1.6.0\. Really looking forward to playing with the new animation support.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/5e7b7163-db36-4b11-8c00-c31a163d8383/image-59.png?t=1738083348)

New Application Home Screen examples (click image for link)

We got an interesting update this week for Tailwind UI, now we have new Application Home Screens, which are more like a mashup of existing TWUI components so you can see how they work together.

Here’s what the Tailwind Labs team said about them:

*The idea behind these examples is to show you what you could make using many of the existing Tailwind UI components. That’s why we’ve used different color palettes for example, to show you what your app could look like if you put together a page with Tailwind UI and tweaked things for your brand.*

> Been doing a bit of planning for Tailwind 2.0 lately, really looking forward to getting started on it this fall.

> Number one priority is to make it the most painless major version upgrade of all time. Only significant “break” is going to be a better color palette 👨🏻‍🎨— Adam Wathan (@adamwathan) [July 31, 2020](https://twitter.com/adamwathan/status/1289004115108990983?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

But the best update of the week was Adam’s thread about the future version 2.0 of tailwind, be sure to check it out, it looks like it’s gonna be awesome ❤️.

## 📚Video of the week

We got a new tailwind video from our friend, Sam Selikoff. This one is more like a heavily edited live stream but it has an incredible trick for managing truncated text on the same line, it’s definitely worth a watch!

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b3e2e56e-572c-41b7-a414-8de45b687dc6/robot--1-.png?t=1738083348)

I’m sooo excited about this week’s showcase, this is not only a website but a *self-hosted web app* made with tailwind. I also found it interesting they used a prefix \`sp-\` for the tailwind classes, probably to avoid conflicts with third party components. Be sure to check out the [demo](https://www.supportpal.com/product/demo?ref=tailwindweekly.com) so you can see a full fledged tailwind web app interface in the wild!

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/dd0d4f9b-0710-4424-ad90-98320205cb9d/vue--1-.png?t=1738083349)

### [VueTailwind - Customizable Vue Components for TailwindCSS](https://www.vue-tailwind.com/?ref=tailwindweekly.com)

Looks like Adam isn’t the only one building reusable JS components with Tailwind. This week I discovered VueTailwind and what they offer, so far they only have a very small set of components but I really could see this becoming something like [Vuetify](https://vuetifyjs.com/en/?ref=tailwindweekly.com) in the long term.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/66ca9b18-6087-4bdf-b3a7-cd50b998b01c/coffee.png?t=1738083349)
### Tailwind Weekly #24: New Tailwind-UI components & welcome employee #2!
URL: https://tailwindweekly.com/issue-24-2/
Last updated: 2025-10-01T13:46:53.000Z
Hello folks! We have another week of cool new stuff, starting with the release of the long-awaited *content sections* components for Tailwind UI and a new addition to the *Tailwind Labs* team! Be sure to send a warm hello to [Simon Vrachliotis](https://twitter.com/simonswiss?ref=tailwindweekly.com) ❤️.

We also got a new stream where Adam prototyped a dark theme for Tailwind, definitely a must watch!

Now, onto the usual 😁.

## 🌟News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9c04adda-7c0e-4ba4-a63e-6bfbbbd92826/simon--1-.jpg?t=1738083348)

### [Simon Vrachliotis Joins Tailwind Labs](https://blog.tailwindcss.com/simon-vrachliotis-joins-tailwind-labs?ref=tailwindweekly.com)

Here’s the official announcement of employee #2, definitely check it out, looks like Simon has been an early adopter and contributor long since anybody else!

We also got New Tailwind UI Components!

One important note tho, right from the announcement:

*It’s important to note that these new content sections *rely on Tailwind CSS >= v1.5.1, and @tailwindcss/ui >= 0.4.0*. Make sure you update those dependencies before trying out these new components in your projects!*

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/219fded2-5891-4a52-b02f-45a7eb7c05fa/new--1-.jpeg?t=1738083348)

New "Content Sections" components (click image for link)

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/99a6511a-fe04-43ca-9951-b506555ed2b6/newa--1-.jpeg?t=1738083348)

New "Sidebar Navigation" components (click image for link)

We also got a new stream! In this one we got to see how to implement dark mode for Tailwind in a very simple but powerful way. [Here’s the code](https://github.com/adamwathan/tailwindcss-dark-mode-prototype?ref=tailwindweekly.com) for the curious, I bet this will be implemented officially on Tailwind very soon.

## 📚Article of the week

### [How I Quit Worrying and Learned to Love TailwindCSS](https://highlandsolutions.com/blog/how-i-quit-worrying-and-learned-to-love-tailwindcss?ref=tailwindweekly.ongloat.com)

Really loved this one! This is a dev who was a die-hard [BEM](http://getbem.com/introduction/?ref=tailwindweekly.com) fan until he used Tailwind, here’s my favorite quote:

*But naming CSS classes is a chore. How do you describe a complex element in two words, while maintaining the flexibility of what that could be? Having to do that over and over is personally a huge bottleneck in my code-writing, and Tailwind eliminates that…*

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/dfe7d885-2cd4-46e7-a4af-6f9913e11125/hwkin--1-.png?t=1738083349)

### [Stephen Hawking's Homage](https://www.hawking.org.uk/?ref=tailwindweekly.com)

We got a visual treat this week! Adam tweeted about the new Stephen Hawking homage website being made with Tailwind and I was impressed with the site. Here you’ll see lots of videos and full bleed images with on point typography and classic colors.

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4392ce81-a234-439b-998c-340a15bad6d9/image-61.png?t=1738083349)

### [Animate.css](https://animate.style/?ref=tailwindweekly.com)

This week Adam got to work on [adding animation support](https://github.com/tailwindlabs/tailwindcss/pull/2068?ref=tailwindweekly.com) for Tailwind, but for the impatient, here’s a very cool library you can use in the meantime. In the author’s words Animate.css is:

*a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.*

Very use to use and it’s practically plug and play. I would recommend not using the CDN tho, so you can take advantage of PurgeCSS.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c9cb8340-f961-4f10-9958-005832364f5d/coffee.png?t=1738083350)
### Tailwind Weekly #23: Lots of new stuff from the tailwind team! 🎁
URL: https://tailwindweekly.com/issue-23/
Last updated: 2025-10-01T13:49:37.000Z
Hello again folks!

This week we have 2 big updates from the Tailwind team, the long-awaited **Typography plugin** and a new version of TailwindCSS, **v1.5,** which is packed with new features like responsive containers and new variants like *checked* and *focus-visible.*

Also, we all have seen the news of the COVID cases ramping up, so this is your friendly reminder to ***stay safe***!

Now, onto the usual!

## 🌟News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9076cff3-cacd-4db2-a0d5-7bcb233e12d1/twcss1.5--1-.jpg?t=1738083349)

### [Tailwind CSS v1.5.0](https://blog.tailwindcss.com/tailwindcss-1-5?ref=tailwindweekly.com)

Some nice updates on this version, but I REALLY REALLY love the new responsive container variants, I have had to use workarounds in the past so I’m happy this is native now and also looking forward to playing around with the new *checked* variant.

Also be sure to install [v1.5.1](https://github.com/tailwindcss/tailwindcss/releases/tag/v1.5.1?ref=tailwindweekly.com), Adam fixed an accidental breaking change there.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9725e3a3-819d-4796-884c-72b25a6ef22f/typogra--1-.jpg?t=1738083349)

### [Introducing Tailwind CSS Typography](https://blog.tailwindcss.com/tailwindcss-typography?ref=tailwindweekly.com)

We now have an official way to style user content! Yay 🎉. I talked a lot about this last week but I really appreciate that the tailwind team made it very simple to use. You just drop a \`*prose\`* class and you’re good to go!

The [customization options](https://github.com/tailwindcss/typography?ref=tailwindweekly.com) also looks very similar to the forms plugin, so you can make your style guide exactly how you want it.

## 📚Article of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/308a2fae-f3a0-46dd-8b00-b0e5342e51a4/image-62.jpg?t=1738083350)

### [Finding My Design Mojo With TailwindCSS](https://www.stephenpopoola.uk/articles/styling-web-pages-tailwindcss/?ref=tailwindweekly.com)

This week I’m happy to feature a new type of article. An old one but still good. This one is from Steve, a Laravel lead dev from the UK who started loving frontend because of tailwind.

What I liked about it is the argument that tailwind code is actually *more understandable* than regular css classes, especially for new developers, because you don’t have to think about the abstractions somebody else decided for you, you just see a *text-green-600* class and you know this element’s text will be green.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1361cc2c-855a-47e8-b99d-2878fa3e61d1/image-63.png?t=1738083350)

### [JIG - Planning & Development](https://jigpd.co.uk/?ref=tailwindweekly.com)

If you have been following the newsletter for a while then you know I always like to feature wildly differing websites each week, to show how tailwind can accommodate virtually any design. This week’s showcase is no exception.

For context, here’s what JIG does:

*We’re a responsive, fleet of foot property company with the primary aim of creating value through the planning process to our developer and landowner clients. For us it is all about performance, integrity, reputation and of course delivery.*

Now, I can say for sure, because of their niche, JIG is as traditional as it gets, but with a few modern twists, they have all sorts of animations for the images and some titles and also feature vertical text in some places, which is very rare to see these days but they made it look sophisticated.

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6dd936ff-7b95-46d9-92f7-c157559c8950/image-64.png?t=1738083351)

### [CopyPalette | Seamless color palette generation](https://copypalette.app/?ref=tailwindweekly.com)

CopyPalette is a pretty nifty tool I discovered on product hunt the other day. They claim they let you *create consistent monochromatic color palettes and export them in a blink,* which I find pretty useful for using in tailwind since you can specify how many variants you want and can even teak the contrast ratio. Overall a pretty cool tool.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/f7318cd8-73dd-44f0-b0cf-74331097e214/coffee.png?t=1738083351)
### Tailwind Weekly #22: Official typography plugin coming soon 📝!
URL: https://tailwindweekly.com/issue-22/
Last updated: 2025-10-01T13:53:01.000Z
Hello again folks!

This week was kind of quiet on the tailwind front, but there’s still some interesting stuff to share!

Adam was kind enough to tease us with the upcoming typography plugin he’s working on, see below why I think that’s a HUGE deal.

And, as always, the usual stuff 😉.

## 🌟News

> 🧐 Fine-tuning the styles for the official Tailwind typography plugin...

> Just add "prose" and ✨ your unstyled text turns into beautiful Schoger-approved perfection 😍

> Multiple sizes out-of-the-box, supports responsive modifiers, and easy to customize too 😎 [pic.twitter.com/bhr6fj4sPa](https://t.co/bhr6fj4sPa?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [July 9, 2020](https://twitter.com/adamwathan/status/1281303162704613378?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

This week Adam teased us with the official typography plugin we ALL have been waiting for 😍!

Why is it so cool and important? Because right now, we have to write our own style guide for *each and every project.* Some of us just had default styles on a starter theme and changed it depending on the project but this always lived as custom CSS, which is not very tailwind-friendly.

Now, same as we do [with forms](https://github.com/tailwindcss/custom-forms?ref=tailwindweekly.com), you’ll be able to define what your markdown/richtext content should look like overall. This is huge!

😍

## 📚Article of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/719ba754-535b-4726-bd0b-f0146f5d43d2/image-67.png?t=1738083349)

### [How to structure a Vue.js app using Atomic Design and TailwindCSS](https://vuedose.tips/how-to-structure-a-vue-js-app-using-atomic-design-and-tailwindcss/?ref=tailwindweekly.com)

Since I’m a heavy Vue user, I’m a huge fan of [Vue Dose Tips](https://vuedose.tips/?ref=tailwindweekly.com) and ready everything they publish. Well this week I was checking their archives and found this gem. This is not our average “here’s how to use tailwind with Vue” post, Alba (the author) really wanted to nail down the theoretical concepts behind Tailwind (atoms, molecules, etc) and how they can be applies to our Vue components. Definitely a great read!

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a2c355e4-7b4c-49ff-a771-eb6fe2d08ef4/ssssssssss--1-.png?t=1738083349)

### [GitHub LabelSync - The best way to sync labels](https://label-sync.com/?ref=tailwindweekly.com)

Today we bring you a SaaS using Tailwind UI for their marketing site but with a twist, you can clearly see the structure of the sections is straight up from Tailwind UI but they added their own personal touches here and there.

From the typing animation to the emojis and icons (that YAML icon looks awesome!) to the lovely green hue, the site has a good balance of defaults and unique personality.

For those curious on what LabelSync does, here’s their official description:

*Meet LabelSync. It’s a GitHub application that helps you sync labels across repositories in your GitHub account. Its main features are centralised reposistory configuration, label chaining, and versatile label renaming. It also posts an overview of every configuration change.*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/053bb698-3dbf-4314-bda8-b7bfe127d43f/image-68.png?t=1738083349)

### [tailwindcss-filters](https://github.com/benface/tailwindcss-filters?ref=tailwindweekly.com)

Yep, another awesome plugin from benface, seriously, the guy is a machine, check out his [repo’s list](https://github.com/benface?tab=repositories&ref=tailwindweekly.com).

This particular one is awesome for integrating CSS filters, think *grayscale*, *blur*, *sepia*, etc into your tailwind config, great for when you’re working with a image heavy project.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/534103a6-74d6-44ea-8657-cdddd5df4dbb/coffee.png?t=1738083349)
### Tailwind Weekly #21: Lots of new stuff from the tailwind team + a special announcement 💫
URL: https://tailwindweekly.com/issue-21/
Last updated: 2025-10-01T13:59:19.000Z
Wow this week was PACKED with news from the Tailwind team, Adam wasn’t kidding when he said things would ramp up with the new employees, it sure has and now we’re enjoying the sweet sweet fruit of their labor!

We got the new TailwindCSS blog, some new TailwindUI components and the announcement of the newly hired employee, who’s still a mystery btw 👀…

And that’s not all… Like the title says, we got a special announcement to make 😊.

But first! Off we go to our usual dose of all things Tailwind.

## 🌟News

> 🚀 We launched a new [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) blog today!

> It's powered by Next.js + MDX (and Tailwind of course!) 💪

> I wrote about how we built it and some of the interesting challenges we ran into here 👉[https://t.co/yxLwMPlxgm](https://t.co/yxLwMPlxgm?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [June 30, 2020](https://twitter.com/adamwathan/status/1278029914181074944?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

That’s right, the TailwindCSS’ team now has an [official blog](https://blog.tailwindcss.com/?ref=tailwindweekly.com)! There’s currently a couple of articles there, one about the [new linter features](https://blog.tailwindcss.com/introducing-linting-for-tailwindcss-intellisense?ref=tailwindweekly.com) in the VSCode plugin and, of course, the obligatory “[how we made this blog](https://blog.tailwindcss.com/building-the-tailwind-blog?ref=tailwindweekly.com)” post. Both very good reads!

I’m so glad the team now has a central place for announcements and ideas they want to announce to the community, you guys rock ❤️.

But that’s not all they did this week 👀…

**We also got new components for Tailwind UI!**

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3db5ef29-1a7f-44b0-8662-fbe7d85f6b25/image-70.png?t=1738083349)

New Grid Sections (click the image to check them out)

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/14f68c87-dcce-4d77-b7d9-6933910db1d6/tw-iu--1-.png?t=1738083349)

New Hero Sections (click the image to check them out)

**We’ll also be getting a new addition to the tailwind team soon!** Feels like the family is growing 🏠.

> Almost 900 applicants, dozens of interviews, and hours of pairing sessions later, we finally offered this role to someone and they accepted! 🥳

> Super excited to talk more about it in a few weeks, and get started building awesome UI tooling together. [https://t.co/2NNyqVO3lM](https://t.co/2NNyqVO3lM?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [June 25, 2020](https://twitter.com/adamwathan/status/1276270274564980747?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

## 📚Article of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/f66df4e0-5a7e-4e60-86cb-071a27c4df1d/image-71.png?t=1738083349)

### [Tailwind + Vue Formulate = ❤️ - DEV](https://dev.to/justinschroeder/tailwind-vue-formulate-24k1?ref=tailwindweekly.com)

Vue fans will definitely love this! I have been following the development of [Vue Formulate](https://vueformulate.com/?ref=tailwindweekly.com), which promises a better experience for working with forms in Vue, and they recently announced support for TailwindCSS for styling. This posts outlines how to get started with it. So proud to see Tailwind’s adoption picking up 🚀.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2c4e1d95-5458-4499-983d-8b8cb84f73d8/555555--1-.png?t=1738083350)

### [Sam Dawson's Blog](https://www.samdawson.dev/?ref=tailwindweekly.com)

This week’s we’re featuring another personal blog. This one is from [Sam Dawson](https://twitter.com/sam%5F%5Fdawson?ref=tailwindweekly.com). I really like the bright colors for the tags and and the use of white space, makes it appealing for reading long-form, which Sam tends to prefer. Take a look at a good example [here](https://www.samdawson.dev/article/svg-graph-testing?ref=tailwindweekly.com). I would increase the line-height a bit but otherwise it looks *sooo good*.

For those of you that don’t know, Sam has been blogging for a year now and is even writing [his own book on testing React](https://www.samdawson.dev/react-component-testing-book/?ref=tailwindweekly.com). Kudos to you man!

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/f631f76a-cec8-4ccd-a847-b30d3308204c/image-72.png?t=1738083350)

### [twin.macro](https://github.com/ben-rogerson/twin.macro?ref=tailwindweekly.com)

Do you work with React and love Tailwind but you NEED to use the css-in-js approach? This resource is just the thing for you!

twin.macro is like a proxy that runs between tailwindcss and popular css-in-js libraries like [👩‍🎤 emotion](https://emotion.sh/docs/introduction?ref=tailwindweekly.com) and [💅 styled‑components](https://styled-components.com/?ref=tailwindweekly.com).

Be sure to to thank [Ben Rogerson](https://github.com/ben-rogerson?ref=tailwindweekly.com) for this cool package!

## Now that I have your attention...

I got a special announcement to make. Remember back on issue #15 I mentioned something about some web templates I was working on? Well…

After months of hard work and lots of learning, I’m finally launching them on my site, [Tailwind Made](https://tailwindmade.com/?ref=tailwindweekly.com)! 🎉

At Tailwind Made, we (my sister and I) develop templates that are mostly ready for production, and you just need to integrate them to your system and customize whatever you want (colors, fonts, etc.), we take all the heavy lifting for you and you can just focus on what you do best, *delivering value to your clients*.

Because of this, we believe we offer the best value to freelancers, web agencies, and small startups who want to get a head start on their projects, don’t have the budget for full web design work, and want to work with Tailwind. Our main goal is to offer them an awesome developer experience and modern and beautiful designs they can use to get started.

We’re starting with the HTML/CSS versions, but we’re planning other versions in the next months like Jekyll, Hugo, NuxtJS, Gridsome, NextJS, Gatsby, WordPress, Ghost, and Shopify (for eCommerce) too!

We want the Tailwind community to grow and more people to see the beauty of the atomic CSS approach, that’s why we’ll be writing regularly about tips and best practices we have learned over the years when working with Tailwind & CSS in general, so stay tuned to [our blog](https://tailwindmade.com/blog?ref=tailwindweekly.com) too.

P.S.: Check out our [announcement tweet](https://twitter.com/tailwindmade/status/1278383649415626753?ref=tailwindweekly.com) if you want to support us and spread the news ❤️.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/411e58e6-6047-4b38-805d-e2f32b5e650d/coffee.png?t=1738083350)
### Tailwind Weekly #20: We got linting now folks 😎!
URL: https://tailwindweekly.com/issue-20/
Last updated: 2025-10-01T14:03:31.000Z
The Tailwind team has been hard at work this past few weeks and now we see its first results. We now get linting on the VS Code extension and even automatic quick fixes with just a few clicks! I’ll finally start using the *problems* tab on the bottom panel for once.

Also, be sure to check the [official repo’s discussion tab](https://github.com/tailwindcss/tailwindcss/discussions?ref=tailwindweekly.com) regularly since it looks like it’ll be one of many announcement channels.

Now onto our regular stuff!

## 🌟News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a4688207-0b14-45e6-8094-f60ede1d5f72/image-74.png?t=1738083350)

### [Introducing Linting for Tailwind CSS IntelliSense](https://github.com/tailwindcss/tailwindcss/discussions/1956?ref=tailwindweekly.com)

Yep, you read that correctly, if you use the VS Code Tailwind extension then you now get linting for your HTML and CSS files! THIS. IS. AWESOME. Just look at that screenshot! Now you don’t have to worry about duplicate classes or even conflicting values, the linting will alert you about it.

Need linting for an unsupported file format? They have an option for adding that too, be sure to checkout the new docs.

> 🚀 Just shipped a new release of the Tailwind CSS IntelliSense plugin for [@code](https://twitter.com/code?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) that adds Tailwind-specific linting for both your markup and CSS!

> It’s also the first release as an official first-party Tailwind CSS project 🥳

> Read more about it here 👉[https://t.co/WnKdQACln9](https://t.co/WnKdQACln9?ref=tailwindweekly.ongloat.com) [pic.twitter.com/h8tj7R0Onf](https://t.co/h8tj7R0Onf?ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-20-we-got-linting-now-folks)— Brad Cornes (@bradlc) [June 23, 2020](https://twitter.com/bradlc/status/1275503532767133701?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

This is the official announcement, be sure to follow [@bradlc](https://twitter.com/bradlc?ref=tailwindweekly.com) for more updates.

## 📚Article of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b7f6ddd5-54a0-4ec4-bccf-04d23e7a12ea/image-75.png?t=1738083350)

### [10 Tailwind CSS tips to boost your productivity](https://blog.logrocket.com/10-tailwind-css-tips-to-boost-your-productivity/?ref=tailwindweekly.com)

Great article showcasing some cool tips to improve your Tailwind experience, I really liked the “**Always know which breakpoint is currently active”** one, didn’t know there was a plugin for that, pretty cool.

One note tho, while the article is dated pretty recently, 2 of the tips are outdated, the one that mentions *preflight* and the one about *flexbox order classes,* everything else is pretty useful tho!

### Overheard on twitter

> There are 100s of things that [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) is doing right! Over the last 3 days, I've been working on the frontend of an app, and have not written a single line of code for css but still am able to achieve a custom design. I am impressed! 💯— Arnob Dada (@iamarnob6543) [June 4, 2020](https://twitter.com/iamarnob6543/status/1268597447401410561?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/fb926c72-38be-4d6c-bb99-dd9e5189c31d/image-77.png?t=1738083350)

### [Mohin Lakdawala | PHP & Laravel developer](https://mohin.dev/?ref=tailwindweekly.com)

This week we get another nice looking portfolio website made with Tailwind. While the website is pretty minimalist, the attention to detail, color use and typography choice is outstanding and very elegant.

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8fb24fdb-169c-4d28-a8c3-7ac09099ff5d/image-78.png?t=1738083351)

### [tailwindcss-gradients](https://github.com/benface/tailwindcss-gradients?ref=tailwindweekly.com)

Believe it or not, tailwind doesn’t have native support for gradient classes but this plugin does it so well I don’t think we need it. I use it on some of my sites and I like its flexibility since it allows you to use the values of your *colors* object and also add your own. It also supports all the popular gradient types like linear, radial and conic.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/ef8f5223-6eef-4a76-823f-fe0529770a9d/coffee.png?t=1738083351)
### Tailwind Weekly #19: We got a new stream + some renderless components + the usual 😊!
URL: https://tailwindweekly.com/issue-19/
Last updated: 2025-10-01T14:09:06.000Z
Hey folks!

After a pause to listen and reflect on the current social situation the US, I feel it’s time to get back on track and and use my (very little) voice to talk about things I care and I think you should too.

Like I said on a [recent tweet](https://twitter.com/TailwindWeekly/status/1269063799300128769?ref=tailwindweekly.com), NOBODY should have to fear the people hired and trained to protect them. Not in the US, nor anywhere. If you want to know more about promoting and supporting the #blacklivesmatter movement then [this post](https://www.diversifytech.co/blog/a-letter-to-non-black-folks?ref=tailwindweekly.com) is a good start. Change needs to happen and it involves all of us. Let’s do our best to improve ourselves as a society and rectify past wrongs ❤️.

The other thing I care a lot about is, of course, TailwindCSS! This week’s issue is pretty packed with news from the Tailwind team, plus the usual showcase website, new article and cool resource.

PS: Btw, if you want a tailwind-related resource to be featured on the newsletter you can submit it [here](https://docs.google.com/forms/u/1/d/e/1FAIpQLSe4ebD1JdmEWXDSDItAAR%5FhLcQRaaYWbHCw2L0Y3JmZiln1OA/viewform?usp=sf%5Flink&ref=tailwindweekly.com).

## 🌟News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/048cc1a1-1169-460b-a3d9-3bd34742fec9/mimimimm--1-.png?t=1738083351)

New "Select Menu" components

We got a new email update a week ago and its so awesome, we get a taste of the potential of renderless components with some new variations of the [Select Menu component](https://tailwindui.com/components/application-ui/forms/select-menus?ref=tailwindweekly.com) we looked at on the last issue!

Also more renderless components are coming!

Straight from the source:

***We’re going to provide production-ready JS versions of each component in the coming months! 🥳***

*We’re working on a set of low-level* [*renderless components*](https://el2.convertkit-mail4.com/c/o8udpzp04maqhozr57cv/krfmh6h9rk028r/aHR0cHM6Ly9hZGFtd2F0aGFuLm1lL3JlbmRlcmxlc3MtY29tcG9uZW50cy1pbi12dWVqcy8=?ref=tailwindweekly.com) *that will make it much easier to build things like these custom select menus, without needing to be an expert in all of the accessibility stuff to make them work.*

*We’re going to start with Vue, React, and Alpine, with plans to add other frameworks in the future. The underlying libraries we are developing are going to be *completely free and open-source*, so you’ll be able to use them on any project you want, even if you’re not using Tailwind or Tailwind UI.*

We got a new stream yesterday, Adam went back to writing typical HTML components and showed us a new Slide-Over Panel component that they just released yesterday. Pretty cool stuff!

> Here’s another preview of the linting feature we’re working on for [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-19-we-got-a-new-stream-some-renderless-components-the-usual) [@code](https://twitter.com/code?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com). Trying to make the messages as helpful as possible, and of course these all come with automatic “quick fixes,” if you’re in to that sort of thing 💡 [pic.twitter.com/zbk0WlcSLR](https://t.co/zbk0WlcSLR?ref=tailwindweekly.ongloat.com)— Brad Cornes (@bradlc) [June 18, 2020](https://twitter.com/bradlc/status/1273638600614334470?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

We also got to watch Brad hard at work, adding features to the VSCode extension he created last year. If you didn’t know, Brad became [employee #1 of the tailwind team](https://twitter.com/bradlc/status/1271209188493012992?ref=tailwindweekly.com) last week and he’s already on fire with new sneak peeks. TailwindCSS’s future keeps looking better and better!

## 📚Article of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/70601fb8-aa94-4962-a0c6-1db0447da3e8/image-79.png?t=1738083351)

### [The Fastest Google Fonts](https://csswizardry.com/2020/05/the-fastest-google-fonts/?ref=tailwindweekly.com)

Do you use Google Fonts on your website? Then YOU GOTTA READ THIS! This article is a gem, it make an analysis on the best techniques to speed up the loading of google fonts and at the end of the article it gives you some snippets. I have already implemented this everywhere I could and it works!

### Overheard on twitter

> So TailwindCSS basically re-invented CSS and responsive web development for me. [#TailwindCSS](https://twitter.com/hashtag/TailwindCSS?src=hash&ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-19-we-got-a-new-stream-some-renderless-components-the-usual) [#FrontEnd](https://twitter.com/hashtag/FrontEnd?src=hash&ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)— Bravi (@virusbot2000) [June 2, 2020](https://twitter.com/virusbot2000/status/1267923642949742594?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b2e1d9bb-1806-4b66-9c4a-41b3fbfa7c31/image-80.jpg?t=1738083351)

### [Bud Agency](https://bud.agency/?ref=tailwindweekly.com)

This is one of the best web agency websites I have ever seen. The attention to detail on the animation is praise-worthy and it looks so unique you wouldn’t believe it used a framework. That’s the beauty of Tailwind folks!

Here’s what Bud agency does:

*A digital marketing agency that partners with you to grow your business step by step. SEO, AdWords, Social, Content. Map a path to your business horizon.*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c323e166-22c5-4669-a024-a5dfd442edf3/image-81.png?t=1738083352)

### [vite-tailwind-starter](https://github.com/posva/vite-tailwind-starter?ref=tailwindweekly.com)

If you’re part of the Vue ecosystem then you probably already heard of [*vite*](https://github.com/vitejs/vite?ref=tailwindweekly.com)*. An opinionated web dev build tool that serves your code via native ES Module imports during dev.* This makes it incredibly fast in dev mode, quite a joy to work with.

Of course, we tailwind lovers don’t waste any time using tailwind everywhere we can so Vue.js Core Team member [Eduardo](https://github.com/posva?ref=tailwindweekly.com) created this starter project. It even has a TailwindUI version. Be sure to check it out!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/032ec270-a35b-42ae-bf8a-91d9df9170f5/coffee.png?t=1738083352)
### Tailwind Weekly #18: TWUI renderless components are coming ✨!
URL: https://tailwindweekly.com/issue-18/
Last updated: 2025-10-03T08:32:20.000Z
Oh man, *oh man.* Renderless component are becoming a reality! I have been dreaming about this ever since I discovered [Adam’s post](https://adamwathan.me/renderless-components-in-vuejs/?ref=tailwindweekly.com).

Now I’m even more convinced that Tailwind UI is a steal at that price. Imagine having all of bootstrap’s components, ready for you to drop in your styles and customize them according to whatever you like, without having to fight with the default styles or override anything. Tabs, accordions, dropdowns, modals, tooltips, etc, all ready to be imported, styles and deployed with *only* the CSS you actually need.

Lean frontend development baby 😎.

Now, onto the goodies 👇!

## 🌟News

Adam [teased us](https://twitter.com/adamwathan/status/1266033105229529092?ref=tailwindweekly.com) mid-week with an example of a prototype of a renderless component he was working on, then on Friday he streaming how to build a select menu that way.

For those of you who don’t know, Adam has been [talking about ](https://adamwathan.me/renderless-components-in-vuejs/?ref=tailwindweekly.com)renderless components for a few years now and now with Tailwind UI, it looks like the team decided now it’s a great time to create them en masse.

Be sure follow the [repo](https://github.com/tailwindui/vue?ref=tailwindweekly.com). In my opinion, this is gonna be HUGE for the ecosystem, since the main downside of using Tailwind is that you either create your components from scratch with it or you heavily modify a third party package with @apply stuff, a la old bootstrap style.

I think that, besides native PurgeCSS support, having a library of very tailwind friendly components that add just the logic and let you style them however you want, will be *monumental* in increasing adoption and developer experience. I think this will finally make tailwind feel “complete”, like some people think Bootstrap is.

## 📚Article of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2c8cbad7-6861-429b-8275-05608b451594/image-82.png?t=1738083351)

### [Building Reusable React Components Using Tailwind](https://www.smashingmagazine.com/2020/05/reusable-react-components-tailwind/?ref=tailwindweekly.com)

This one is a very detailed example on how to effectively use tailwind with react, nothing about getting started with it, this assumed you already know how to do that.

Instead he mentions 3 main methods or approaches. #1 is the most common (using classes for props) but I must admit I have never heard of #2 and was intrigued 🤔. If you work with react this one is definitely a great read.

### Overheard on twitter

> It’s certainly a different paradigm but I’m loving [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) so far. TailwindUI is also helping out tremendously. Really enjoy building on top of it, makes a mostly pure backend guy like me look great.— Vic Cherubini (@vic\_cherubini) [May 19, 2020](https://twitter.com/vic%5Fcherubini/status/1262874933144797184?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/57fbfea5-8433-40a1-9475-9ac104720504/image-83.png?t=1738083352)

### [David Llop](https://davidllop.com/?ref=tailwindweekly.com)

Now, *THIS* is old school. For his blog, David went above and beyond on customizing tailwind and made it look like those computer interfaces you saw on movies in the 80s. Very original!

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c501de99-4b0f-42e1-880a-2ce96b6cd45f/image-85.png?t=1738083352)

### [Maizzle - Framework for Rapid Email Prototyping](https://maizzle.com/?ref=tailwindweekly.com)

Wanna code emails with tailwind, you can with Maizzle!

I have been following Maizzle’s development for a while now and I must say I’m impressed. [Cossmin](https://twitter.com/cossssmin?ref=tailwindweekly.com) (creator) took something incredibly complicated and tedious to do (email template development) and made it very tailwind friendly.

He released [v1.0](https://github.com/maizzle/framework/releases/tag/v1.0.0?ref=tailwindweekly.com) a month ago and you could say it’s ready for prime time ✌. Go check it out!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b8102ffb-c409-43b7-9693-b52bd7e91113/coffee.png?t=1738083352)
### Tailwind Weekly #17: New stream + real life use case from the ConvertKit team
URL: https://tailwindweekly.com/issue-17/
Last updated: 2025-10-03T08:36:06.000Z
Hello again folks! This week we got a new Rebuilding X with Tailwind stream from our beloved BDFL and an article from ConvertKit’s dev team on how they use TailwindCSS with React on their product, plus of course, the usual goodies ✌.

## 🌟News

Adam sure was busy this week streaming his new Rebuilding X with Tailwind video, this time he tried building Vercel’s dashboard (formerly Zeit Now), did a pretty cool job in my opinion.

Now, for the folks who think watching 2 hours of someone coding sounds boring, hear me out, I think these videos are very valuable because:

Adam is not your average developer, not only he’s very skilled with a lot of different technologies and have years of experience, he’s also *very obsessed* with his work. This means that, if you watch his streaming videos, you can actually see how his mind solves problems.

Basically you’re peering into the workflow of a very talented, experienced and versatile developer practically for free. Sure, everybody is streaming anything these days but not everybody is Adam and seeing how he tackles some problems at the HTML/CSS level is very very informative in my opinion. I must say I have learned quite a few tips from videos like this over the years.

Ok, enough fangirling 😅, onto the goodies!

## 📚Article of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a57f1392-f2fc-410c-b2f9-4aeee68223cd/image-86.png?t=1738083352)

### [How We Use Tailwind in Components at ConvertKit](https://dev.to/brendanrc2/how-we-use-tailwind-in-components-f77?ref=tailwindweekly.com)

This is not your average tailwind article, I included this one, even tho is kind of short and its a few months old because *this is how a* [*multi-million dollar company*](https://convertkit.baremetrics.com/?ref=tailwindweekly.com) *with millions of customers uses tailwind on production, at scale.*

And even tho the example is very simple (it shows how they use tailwind on their buttons), they explain their reasoning behind their decisions and you can learn from that too.

### Overheard on twitter

> At Deadhappy we moved away from styled components to [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) and the speed to build things has dramatically increased.

> Huge fan of [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) and it's simplicity saving hours if not days of time at the moment.— David Boyne 🚀 (@boyney123) [May 16, 2020](https://twitter.com/boyney123/status/1261562920913252352?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3b4368d6-e3fb-4b15-b109-723c15d3a69f/image-87.png?t=1738083352)

### [SAAS Adventure - Learn to Create your own SAAS](https://saasadventure.io/?ref=tailwindweekly.com)

This week’s showcase is kind of flashy and cute (pink + purple = 👀 🍭 imho) but I must say I love the simplicity in structure and they didn’t shy away from adding their own custom CSS.

I do find interesting that they didn’t use a custom font and instead relied on system-ui. Nevertheless is a very solid example of a custom website made with Tailwind 👌.

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/225c5f45-9f4b-4ddb-bfae-013a52aefb86/image-88.png?t=1738083352)

### [tailwindcss-spinner: Spinner utility for Tailwind CSS](https://github.com/aniftyco/tailwindcss-spinner?ref=tailwindweekly.com)

Man, I can’t believe I didn’t mention this one sooner! If you work with web apps and/or async stuff, you definitely need a spinner component and this is the *easiest tailwind-centric spinner out there.* It’s literally just plug and play.

Don’t let the latest commit date fool you, this already works with Tailwind v1+, I just used it a few weeks ago on a v1.2+ project and had no issues integrating it.

Be sure to thank [joshmanders](https://github.com/joshmanders?ref=tailwindweekly.com) for this cool plugin!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/067cd805-c13c-487d-bf68-a6edc9d63654/coffee.png?t=1738083353)
### Tailwind Weekly #16: Tailwind UI is hiring + we have a twitter now!
URL: https://tailwindweekly.com/issue-16/
Last updated: 2025-10-03T08:41:18.000Z
Hello folks! We have plenty of new things this week.

First and most important, the TailwindUI team is hiring! Looks like Adam got tired of coding alone and is looking for a coding partner. Be sure to check out [the job post](https://jobs.tailwindui.com/full-stack-developer?ref=tailwindweekly.com) and spread the word!

Second, Tailwind Weekly now has its [own twitter account](https://twitter.com/TailwindWeekly?ref=tailwindweekly.com) 🎉. With new logo to boot 💅! The main idea behind the account will be to not only post the newsletter every Saturday but to also share stuff as it happens, during the week, so see it as an extension of the newsletter, heavily inspired by [Vuejs News](https://twitter.com/vuenewsletter?ref=tailwindweekly.com).

Last, but not least, we got a domain! Now you can easily share the newsletter by passing [tailwindweekly.com](https://tailwindweekly.ongloat.com/?ref=tailwindweekly.com) to your friends and coworkers. For now the domain redirects to the revue profile. And if you want to submit a link for the news letter just go to [tailwindweekly.com/submit](https://tailwindweekly.com/submit) and fill out the form :)

That’s it folks, now on to our regular programming!

## 🌟News

> 🎉 Big news, we're hiring a developer to join the [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) team!

> Me and you would work together super closely, pairing regularly on new ideas to build the future of the company 🙌

> Get all of the details here 👉[https://t.co/s5E181CGu1](https://t.co/s5E181CGu1?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [May 13, 2020](https://twitter.com/adamwathan/status/1260629589803634689?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Here’s the official Tailwind UI job announcement. Wanna be part of shaping TailwindCSS’ future? Go apply!

### Overheard on twitter

> I thought I could never use anything other than Bootstrap because I wasn’t smart enough for Tailwind. Turns out I’m actually not smart enough for Bootstrap and Tailwind is much simpler. Was an important realization. 🔑— Taylor Otwell 🪐 (@taylorotwell) [April 29, 2020](https://twitter.com/taylorotwell/status/1255578229987049473?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Wise words Taylor, wise words. TailwindCSS has been a game changer for a lot of people that have to deal with CSS codebases for a living. We all have felt the pain of being terribly afraid to delete old CSS code or dealing with a CSS architecture that only makes sense in the mind of its creator. Tailwind now has shown us the light, that it is possible to enjoy working with CSS again!

## 📚Tutorial of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/91de3e9e-03ae-4982-88fb-3593104fec80/maxresdefault--1-.jpg?t=1738083352)

### [My VSCode + Tailwind CSS Workflow Tips (Shortcuts and Extensions)](https://www.youtube.com/watch?v=qIHR2wmxy3U&ref=tailwindweekly.com)

Another great video from [Sam Selikoff](https://twitter.com/samselikoff?ref=tailwindweekly.com). This one is incredibly useful for people wanting to improve their current workflow. I was definitely envious of the usability of the Vim mode (once you get used to it of course) and the simple grid use was mind-blowing because I have always seen grid as a solution to hard layout problems, not simple stuff like creating 3 columns.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/40c0a964-2f62-47d8-b3d3-fb3873c2547a/image-89.png?t=1738083352)

### [Good Club: Wholesome food for everyone](https://www.goodclub.co.uk/?ref=tailwindweekly.com)

Good club is a UK grocery store that is a lot like Walmart Grocery or Amazon Pantry but with a twist, they aim to be the *world’s first zero-waste online grocer.* And their *entire website* is made with Tailwind. Their CSS is 18.9kb, gzipped. And this is an eCommerce website that looks *nice.*

It seems like, as an eCommerce company, they’re embracing modern development and business tools. Imagine a grocery store with an Intercom chat, yep, they do have it!

Here’s Good Club tagline:

*Save up to 40% on organic and sustainable groceries delivered free to your door*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c2740360-ade7-4984-a72d-30a8acff675c/image-90.png?t=1738083353)

### [Developing better Tailwind CSS sites with Polypane](https://polypane.app/tailwindcss/?ref=tailwindweekly.com)

Remember Polypane? I talked about it on [issue #6](https://www.getrevue.co/profile/tailwind-weekly/issues/tailwind-weekly-6-v1-2-is-officially-out-the-usual-treats-224608?ref=tailwindweekly.com). And things have improved a lot since! Looks like Polypane’s developer, Kilian, decided that the Tailwind folks were a very good niche so he’s now highlighting features specially useful for us! Here’s the new landing page’s tagline:

*The perfect browser for developing websites with Tailwind CSS. Polypane makes developing Tailwind CSS sites fast, easy and fun.*

Even better, the 20% offer we got last time I mentioned it, is still active, just use coupon *tailwindweekly20* on checkout.

**Disclaimer:** Like last time, I’m not being paid anything for this, I just love Polypane and I see Kilian is doing an excellent job with it. I still use it daily as part of my development workflow and I think you guys should check it out!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1e8a8154-f382-4e44-9d5d-f2f78c6183da/coffee.png?t=1738083353)
### Tailwind Weekly #15: 1st May TailwindUI Update + a call for volunteers!
URL: https://tailwindweekly.com/issue-15/
Last updated: 2025-10-03T08:45:20.000Z
Hello again folks! This week we have a new update for TailwindUI + the usual goodies *and* a special call for volunteers.

I’m also experimenting with a new section called “*Overheard on Twitter*”. I think it helps a lot when other people talk about Tailwind and its impact on their workflow so stay tuned for more tweets to come in the future!

## 🌟News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/25b1487a-42b6-4a8a-9a79-116bc036c54b/121212121--1-.png?t=1738083351)

Marketing Flyouts Promo Image ❤️

We got a brand new update for TailwindUI, the first one of May.

Here’s what’s new:

- Added new [Headers](https://tailwindui.com/components/marketing/elements/headers?ref=tailwindweekly.com) category to the Marketing package, with 4 examples
- Added new [Flyout Menus](https://tailwindui.com/components/marketing/elements/flyout-menus?ref=tailwindweekly.com) category to the Marketing package, with 6 examples

Not bad at all! Also remember that if you want to see what’s coming next, you can check out the [roadmap on trello](https://trello.com/b/Nh6e9w8Q/tailwind-ui-roadmap?ref=tailwindweekly.com).

### Overheard on twitter

> DX of [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) is insane.

> Just installed 1.4.0, added the purge setting to the tailwind config, pointed it to \*\*/\*.svelte, and went from \~250kb to \~11kb.

> 🤯— Bart Veneman (@bartveneman) [May 1, 2020](https://twitter.com/bartveneman/status/1256335763312046081?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

I know Bart, tailwind’s focus on DX is *truly insane*. I don’t think I’ll ever go back to coding a design by writing CSS from scratch ever again 😂.

## 📚Tutorial of the week

### [Adding Tailwind CSS to Phoenix 1.4 and 1.5](https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix?ref=tailwindweekly.com)

Yes, Tailwind is breaking new ground every week and now it reached the Elixir lands. As the title says, this shows you how to add Tailwind to the new latest versions of Phoenix, an Elixir web framework.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3bccbfb5-915c-4a11-b5dd-04afc80e2638/image-91.jpg?t=1738083352)

### [tailwindcss-rtl](https://github.com/20lives/tailwindcss-rtl?ref=tailwindweekly.com)

Aurora Insight is another great example on how to apply Tailwind’s default color palette to a completely custom design, I bet they thought “*why reinvent the wheel? these colors are great”.* The website screams clean minimalism and attention to detail, be sure to check it out!

Here’s what Aurora Insight does:

*We offer accurate, impartial, data-driven insights on the radio spectrum your business depends on, helping you invest with confidence and improving wireless communication for all.*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/73dec3dc-3fce-46c4-8777-39449554fdc9/image-92.png?t=1738083352)

This plugin enables bidirectional language support on TailwindCSS. This is an extremely useful plugin if you work with right-to-left languages like Arabic or Hebrew. Makes supporting them a breeze. Be sure to thank user [20lives](https://github.com/20lives?ref=tailwindweekly.com) for this plugin!

## Call for volunteers

Hey folks, I’m working on a few TailwindCSS templates which I plan to sell and I’m looking for 10 volunteers to get an honest review from, in exchange you’ll get all the templates files and 5 hours of consultation time if you need help setting it up for your project.

You can look at the templates here:

- [Thompson](https://thompson.tailwindmade.com/?ref=tailwindweekly.com) \- Legal/Business Template
- [Elyssi](https://elyssi.tailwindmade.com/?ref=tailwindweekly.com) \- eCommerce Template

If you’re interested please [email me](mailto:vivian@redpixel.io) with the subject “Tailwind Made Volunteer”.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0cdb1e72-f4bf-400f-a9f3-8a6a548663c2/coffee.png?t=1738083352)
### Tailwind Weekly #14: yes, v1.4 is out, Adam was on 🔥 this week!
URL: https://tailwindweekly.com/issue-14/
Last updated: 2025-10-03T08:49:51.000Z
Yes, we got 2 major versions in 2 weeks, you’re not dreaming! Apparently Adam got bored coding so much HTML for Tailwind UI that he switched to TW for some variety.

We love you Adam ❤️, whatever you want to update, we’ll be happy!

Now onto our regular stuff, as always we got some good stuff.

## 🌟News

> 🥳 Tailwind CSS v1.4.0 is here!

> \- Brand new color opacity utilities

> \- Built-in PurgeCSS

> \- IE 11 target mode

> Learn more here 👉[https://t.co/yGDcslMr1b](https://t.co/yGDcslMr1b?ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-14-yes-v1-4-is-out-adam-was-on-this-week) [pic.twitter.com/Tatj8EFIUh](https://t.co/Tatj8EFIUh?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [April 29, 2020](https://twitter.com/adamwathan/status/1255601129267830784?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Here’s the official announcement folks! I think my favorite feature is the “Built-in PurgeCSS” stuff, I hated having to configure that on every third party tailwind implementation I used (like [@nuxtjs/tailwindcss](https://github.com/nuxt-community/tailwindcss-module?ref=tailwindweekly.com)) now its native!

> As somebody who started using CSS when it was first created and used every pattern since then (oocss, BEM, in-line styles, css-in-JS, and more) I have finally found what I’ve wanted all along in tailwind.— Ryan Florence (@ryanflorence) [April 25, 2020](https://twitter.com/ryanflorence/status/1254100715334590465?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

This is something I overheard on twitter this week and resonated with me. I felt the same way after doing my first project with Tailwind, after years and years of manually coding CSS, tailwind’s approach was liberating!

## 📚Tutorial of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/399c148d-d17d-4c88-87d4-297adcaf8e72/maxresdefault--2---1-.jpg?t=1738083352)

### [Tailwind CSS Tips, Tricks & Best Practices](https://www.youtube.com/watch?v=nqNIy8HkEQ8&ref=tailwindweekly.com)

This tutorial comes from our friend [Sam Selikoff](https://twitter.com/samselikoff?ref=tailwindweekly.com) (the guy behind [MirageJS](https://miragejs.com/?ref=tailwindweekly.com)) and this one of the best tips and tricks videos for tailwind I have ever seen, since [Adam’s Laracon 2019 video](https://www.youtube.com/watch?v=J%5F7%5FmnFSLDg&ref=tailwindweekly.com). It’s a bit long to watch on one sitting but trust when I say you’ll learn a thing or two from it!

### [Dark Mode on Tailwind CSS from docs](https://tailwindcss.com/docs/screens?ref=tailwindweekly.com)

Adam just added a good “official” example for adding Dark mode with tailwind, be sure to checkout the link!

**Important note:** due to the way its implemented right now, you can’t do stuff like *md:dark:text-gray-300\.* He says this would change in the future with a release for better dark mode support. If you need a robust plugin for better dark mode I highly recommend the [tailwindcss-theming](https://github.com/hawezo/tailwindcss-theming?ref=tailwindweekly.com) plugin from my friend [hawezo](https://github.com/hawezo?ref=tailwindweekly.com).

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/87320798-6c69-47ff-90fb-b05f545487fb/image-93.png?t=1738083352)

### [LottieFiles - Free animation files built for Lottie, Bodymovin](https://lottiefiles.com/?ref=tailwindweekly.com)

Look at that teal hue 😍. This week’s showcase sure knows how to play with color! The layout structure is simple (white with shades of beige) and they rely on the item’s animations for making the page feel *alive*. Plus the typography is top notch and the site loads FAST.

As always, here’s LottieFiles’ tagline:

*LottieFiles is a collection of animations designed for Lottie and Bodymovin - gone are the days of bugging your developer*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6b6c1c30-83ba-4390-a659-2fff84884547/image-94.png?t=1738083352)

### [rebuild-x-with-tailwind: My playground to learn Tailwind CSS](https://github.com/dsdshcym/rebuild-x-with-tailwind?ref=tailwindweekly.com)

This repo is from the talented [dsdshcym](https://github.com/dsdshcym?ref=tailwindweekly.com). Our friend wanted to learn Tailwind and since practice is the best teacher, he got down and coded a few famous layouts with TW, the list is ever growing so be sure to check every once in a while for new ones.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/8183afd0-f4b6-4dcd-a37f-7856ce4b2871/coffee.png?t=1738083353)
### Tailwind Weekly #13: V1.3 is here folks 🚀!
URL: https://tailwindweekly.com/issue-13/
Last updated: 2025-10-03T08:54:50.000Z
Hello again folks! We had a busy week in Tailwind Land, we had a new official release (V1.3)m got a new update for [tailwind.run](http://tailwind.run/?ref=tailwindweekly.com) (FINALLY) and our pal Steve added 15 new icons to Heroicons!

## 🌟News

> 🚀 Super excited to announce the release of Tailwind CSS v1.3!

> Read up on all new features here👉[https://t.co/436npkhUFL](https://t.co/436npkhUFL?ref=tailwindweekly.ongloat.com)

> No breaking changes (of course), just \`npm install tailwindcss@latest\` and you're ready to go 💪 [pic.twitter.com/UgTagMbfGn](https://t.co/UgTagMbfGn?ref=tailwindweekly.ongloat.com)— Adam Wathan (@adamwathan) [April 21, 2020](https://twitter.com/adamwathan/status/1252572373204811779?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Man, this release sure packed a lot of new stuff! I think my favorite feature is being able to add breakpoint-specific padding for the *container* class, call me old fashioned but I really missed that from my Bootstrap days and usually resorted to adding custom css. No more, now its a native feature baby 🤩!

### [Discussions · tailwindcss/tailwindcss](https://github.com/tailwindcss/tailwindcss/discussions?ref=tailwindweekly.com)

Some of you maybe haven’t noticed but we have a new tab in the tailwind repo, especially for discussions. I think its a good way to keep a written and searchable record for the future, I’m a big fan of the discord server but I must admit its searchability is not very good, so check it out 😁.

> Just added support for Tailwind 1.2 on [https://t.co/BFXWvpaHnv](https://t.co/BFXWvpaHnv?ref=tailwindweekly.ongloat.com). You can also now import the \`@tailwindcss/ui\` plugin! [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com&utm%5Fsource=tailwind-weekly.beehiiv.com&utm%5Fmedium=referral&utm%5Fcampaign=tailwind-weekly-13-v1-3-is-here-folks) [#tailwindcss](https://twitter.com/hashtag/tailwindcss?src=hash&ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) (Bug reports welcome at [https://t.co/v3k7Ye2ooZ](https://t.co/v3k7Ye2ooZ?ref=tailwindweekly.ongloat.com).)— Utkarsh Kukreti (@utkarshkukreti) [April 18, 2020](https://twitter.com/utkarshkukreti/status/1251337122021126147?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

This has been long overdue! For those of you who don’t know, [tailwind.run](http://tailwind.run/?ref=tailwindweekly.com) is like a playground (think codepen, jsfiddle, etc) for testing tailwind markup, it has become quite popular in the discord since its very useful for debugging stuff, the bad thing was that it was stuck at V1.1 but we finally got support for V1.2!

> 🥳 Added 30 new icons (15 in each set) to Herocions this morning. Check them out 👉[https://t.co/6dqSqw3ElF](https://t.co/6dqSqw3ElF?ref=tailwindweekly.ongloat.com)— Steve Schoger (@steveschoger) [April 24, 2020](https://twitter.com/steveschoger/status/1253688245860413443?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

This is more or less a tangent but I do wanted to mention it, I’m loving Heroicons and our friend Steve just added new ones, go check it out!

## 📚Tutorial of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2b386898-ae55-4873-bc07-3b8d4f07e7ed/image-95.png?t=1738083352)

### [How to use tailwindcss with AMP in a Next.js project](https://dev.to/geekplux/how-to-use-tailwindcss-with-amp-in-a-next-js-project-1f97?ref=tailwindweekly.com)

This article is as niche as it gets but I think it’s very useful and can be extrapolated into other technologies.

For those of you who don’t know, [AMP](https://amp.dev/?ref=tailwindweekly.com) is an HTML framework developed by Google to make your website very very fast on mobile. It’s mostly used by news and blog sites and its notorious for being hard to implement.

## 💅Showcase of the week

### [SnowcatCloud: Hosted Snowplow Analytics](https://www.snowcatcloud.com/?ref=tailwindweekly.com)

SnowcatCloud looks like an awesome customized implementation of Tailwind UI. Really digging the bright blue and the tech logos. If you bought Tailwind UI and are not sure how to best customize it, this site will give you some inspiration 👩‍🎨.

Here’s SnowcatCloud’s tagline:

*The most efficient way to run a production-ready Snowplow*

And what is Snowplow?

*Snowplow is an open-source enterprise event-level analytics platform that enables the collection of event-level data from any platform.*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4258ccda-05ae-4ad7-9219-27a3aaf0cbf3/image-96.png?t=1738083353)

### [TailwindAccessibilityConfig](https://github.com/optimizasean/TailwindAccessibilityConfig?ref=tailwindweekly.com)

Accessibility folks will really like this. This project is basically Tailwind but with the official colors replaced by the United States Government standards for accessibility colors, defined [here](https://designsystem.digital.gov/?ref=tailwindweekly.com). So if you ever wanted to use tailwind for government stuff, now you can!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0c3bc936-89fd-41c5-8956-d9c63e7b7595/coffee.png?t=1738083353)
### Tailwind Weekly #12: Aaaaand... we're back 🌟!
URL: https://tailwindweekly.com/issue-12/
Last updated: 2025-10-03T08:58:37.000Z
Hello folks, we’re back!

Long story short, when the whole apocalyptic March thing started happening I somehow got writer’s block and decided to take a break from the newsletter to reset. After some weeks of rest and lots of TLC time I’m back as good as new 😎.

Now, onto our regular programming…

## 🌟News

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/4cffdb6d-37eb-44b2-a0db-7c56761c228f/image-97.png?t=1738083352)

### [Integrating Tailwind UI with JavaScript](https://gist.github.com/adamwathan/06faa4e9ee1571d3eb47cc0349b965cd?ref=tailwindweekly.com)

Some folks were a bit taken aback by the decision to use to use AlpineJS for the interactive demos and lots of them were requesting instructions on how to convert it to Vue/React/Angular.

Well, our BDFL saw our struggle and did just that, this new gist document outlines a format on how the Tailwind UI team will be will be giving instructions on how to make the HTML/CSS elements be more dynamic. If you’re a TUI customer then you definitely need to read it!

### [Tailwind UI Changelog - April 7th](https://www.notion.so/Tailwind-UI-Changelog-3698ab7cba254cd2bbcbcc30d132651d?ref=tailwindweekly.ongloat.com)

We also got new components on Tailwind UI, check it out:

**New additions**

- Added new [Alerts](https://tailwindui.com/components/application-ui/feedback/alerts?ref=tailwindweekly.com) category to the Application UI package, with 6 examples
- Added new [Contact Sections](https://tailwindui.com/components/marketing/sections/contact-sections?ref=tailwindweekly.com) category to the Marketing package, with 6 examples

**Tweaks and fixes**

- Fixed border color above profile section in sidebar of [Branded Nav with Compact White Page Header](https://tailwindui.com/components/application-ui/application-shells/stacked?ref=tailwindweekly.com) stacked layout (from border-gray-700 to border-indigo-800)

### Overheard on twitter

> Jumping back on a projcet I've not touched in a couple of months. So glad I used [@tailwindcss](https://twitter.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) \- I don't have to decipher all the poor naming decisions I would have made months ago - just open the docs and I'm instantly productive. Thanks [@adamwathan](https://twitter.com/adamwathan?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)— Dan Christian Duncan (@danchristians) [March 21, 2020](https://twitter.com/danchristians/status/1241318533952344064?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

I feel you Dan, I dusted off an old Tailwind v0.7 project recently and almost everything was the same, gotta love the consistency ❤️.

## 📚Tutorial of the week

### [Adding TailwindCSS to RedwoodJS](https://mdv.io/tailwindcss-in-redwoodjs/?ref=tailwindweekly.com)

If you haven’t lived under a rock for the past month then you probably heard that [RedwoodJS](https://redwoodjs.com/?ref=tailwindweekly.com) is all the rage these days. Even through the project is still in alpha, the folks in the cutting edge are already playing with it and adapting it to their workflows and thus this article was born, with it you’ll learn how to add Tailwind to a Redwood project.

## 💅Showcase of the week

### [PilotMail - Email Test Tool and Email Builder](https://www.pilotmail.io/?ref=tailwindweekly.com)

This week’s showcase is a prime example on how you can make your SaaS’ landing page modern, playful and very good looking using Tailwind and some basic design notions. Wouldn’t surprise me if the dev read Refactoring UI while coding it. Also, love the orange tint!

Here’s what PilotMail offers:

*Build awesome HTML emails and test them easily on real email clients before sending with PilotMail.*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7cc44be9-1976-471a-8f34-646dff6b5a2f/image-98.png?t=1738083353)

### [Heroicons Directory - Open source icons by the Tailwind CSS team](https://heroicons.dev/?ref=tailwindweekly.ongloat.com)

You probably have heard of Heroicons, they’re an icon set that was included when you bought the Refactoring UI book. Well now the icons were made open source and added to GitHub. But this site takes it to a new level, adding search and auto copying on click, which is *really* handy when you’re coding. Be sure to thank [Zaydek](https://github.com/codex-zaydek?ref=tailwindweekly.com) for creating the site!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1c0db575-b989-4fda-9826-483e72062ecc/coffee.png?t=1738083353)
### Tailwind Weekly #11: What a week... still have goodies & please be safe! ❤️
URL: https://tailwindweekly.com/issue-11/
Last updated: 2025-10-03T09:00:25.000Z
Oh man, this week has been apocalyptical. Just last week we were all chilling, on Sunday things got really serious in Italy and then things just kept escalating until it just got full nuclear 😟. I won’t bore you with more coronavirus stuff but just… stay safe ❤️!

Now onto our regular programming…

## 📚Tutorial of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/febe6dd1-66a2-4c5f-82fa-e77381e5265d/image-99.png?t=1738083354)

### [How to Extend Tailwind CSS – Web-Crunch](https://web-crunch.com/how-to-extend-tailwind-css/?ref=tailwindweekly.com)

This cool article outlines some common approaches of what to do when you need classes that tailwind doesn’t or can’t provide. Things like components or custom transform classes. The approaches might look common to seasoned tailwind developers but if you’re new to tailwind, you’ll learn a thing or two.

## 💅Showcase of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/870b0bba-3e75-4dd4-904c-c029df379743/dashboard--1-.jpg?t=1738083354)

### [Ploi - We make deploying a piece of cake.](https://ploi.io/?ref=tailwindweekly.com)

Now that I gotten off the yellow color fever, this week I bring you a nice cool site and this one is *beautiful* in the details. From custom shaped icons to topographic patterns, this site is minimalistic but shows some nice care for the details.

Here’s Ploi’s pitch:

*Stop the Hassle. Start deploi'ing. Use Ploi.io for easy site deployments. We take all the difficult work out of your hands, so you can focus on doing what you love: developing your application.*

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7a1b74dc-871c-4a02-92ce-38b0cb80e9aa/image-101.png?t=1738083354)

### [tailwind-color-alpha: Automatic alpha variants for your Tailwind CSS colors based on your opacity config](https://github.com/soueuls/tailwind-color-alpha?ref=tailwindweekly.com)

This plugin solves a very specific problem and once you install it and realize its potential then it’ll probably make it into your default list.

How many times you had to create a specific color in tailwind just to add a semi-transparent background color? I know I had done it many many times and this plugin automates all of that for you!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c4e701fe-c889-4b7f-8b3d-9d49dcd95fea/coffee.png?t=1738083354)
### Tailwind Weekly #10: First Tailwind UI Update 🤩
URL: https://tailwindweekly.com/issue-10/
Last updated: 2025-10-03T09:05:20.000Z
Hello folks! More than a week has passed since the launch of Tailwind UI and we now have our first update and a public roadmap of future components 🚀. Courtesy of Friday’s email from Adam.

We also, as usual, have our pick of showcase sites, tutorials and resources fresh for you. Enjoy 🎉.

## 🌟News

### [We now have an official Tailwind UI Roadmap!](https://trello.com/b/Nh6e9w8Q/tailwind-ui-roadmap?ref=tailwindweekly.com)

This is a Trello board that lists what Adam and Steve have planned in the pipeline. Right now it just includes all of the “coming soon” categories we’ve seen at TailwindUI.com, but they’ll be adding new stuff based on suggestions all the time.

### [First Tailwind UI Update! Here's the change-log:](https://www.notion.so/Tailwind-UI-Changelog-3698ab7cba254cd2bbcbcc30d132651d?ref=tailwindweekly.ongloat.com)

**New additions**

- Added new [Action Panels](https://tailwindcss.com/plus/ui-blocks/application-ui/forms/action-panels?ref=tailwindweekly.com) category, with 8 components to start
- Added new [Layout Containers](https://tailwindcss.com/plus/ui-blocks/application-ui/layout/containers?ref=tailwindweekly.com) category, with 4 components to start
- Added new [Layout Panels](https://tailwindcss.com/plus/ui-blocks/application-ui/layout/cards?ref=tailwindweekly.com) category, with 10 components to start
- Added two new [Form Layout](https://tailwindcss.com/plus/ui-blocks/application-ui/forms/form-layouts?ref=tailwindweekly.com) examples *(two-column cards with separate submit actions and two-column in full-width cards)*
- Added a new [“Three-tier with emphasized tier”](https://tailwindcss.com/plus/ui-blocks/marketing/sections/pricing?ref=tailwindweekly.com#component-d91bc5ed1deb87275decb69f70274650) pricing section example

**Fixes**

- Fixed focus/active styles for buttons in [Page Headings](https://tailwindcss.com/plus/ui-blocks/application-ui/headings/page-headings?ref=tailwindweekly.com) and [Card Headings](https://tailwindcss.com/plus/ui-blocks/application-ui/headings/card-headings?ref=tailwindweekly.com) *(these were slightly inconsistent with the button styles we use elsewhere in Tailwind UI)*
- Tweak padding on footer of [Modal with gray footer](https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs?ref=tailwindweekly.com#component-47a5888a08838ad98779d50878d359b3) component *(we had used py-4 initially but py-3 is more consistent)*

### [tailwindui/issues](https://github.com/tailwindui/issues/issues?ref=tailwindweekly.com)

Are you a current Tailwind UI customer and you found a bug? Now you can report it in this repo. This is the official place for tracking bug fixes and feature requests for Tailwind UI.

## 📚Tutorial of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/5e614ce1-7392-4b57-bc30-39f6274f162f/image-102.png?t=1738083354)

### [Building my site with Tailwind CSS by Samantha Ming](https://www.samanthaming.com/blog/building-my-new-site-with-tailwind/?ref=tailwindweekly.com)

We have another tailwind convert! I have been following Samantha for a while now ever since she blogged about migrating her blog from Wordpress. I like her clear writing style and humor, this post is a good example of that.

I really appreciate the fair way she judged tailwind and saw the challenges she had with tailwind as fair since I had have those same issues on my own projects.

[www.samanthaming.com](https://www.samanthaming.com/blog/building-my-new-site-with-tailwind/?ref=tailwindweekly.com)

## 💅Showcase of the week

### [KudosBot: Recognize your best employees directly in Slack. Boost your team culture.](https://trykarl.com/?ref=tailwindweekly.com)

No, I swear I’m not explicitly looking for sites with big bold yellow colors, this was a mere *coincidence* 😝. This week’s showcase is a Slack bot site, the site is simple, minimalistic and to the point. Like a sweet treat 🍬.

Here’s what KudosBot is about:

*KudosBot is a way to add more positivity to your team. Gather praise and reward people that go above and beyond directly in Slack.*

[kudosbot.com](https://kudosbot.com/?ref=tailwindweekly.com)

## 🎁Resource of the week

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9f0be9db-426e-41ec-b8ae-e922139bc042/image-103.png?t=1738083354)

### [react-native-tailwindcss: A react-native style system based on TailwindCSS](https://github.com/TVke/react-native-tailwindcss?ref=tailwindweekly.com)

This week’s resource comes courtesy of [@reinink](https://twitter.com/reinink/status/1235187145943506945?ref=tailwindweekly.com). He’s one of tailwindcss’s creators and he’s currently making a react native app with this package so it looks like its meeting his standards!

Be sure to thank [TVke](https://github.com/TVke?ref=tailwindweekly.com) for making it and spread the love ❤️.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://twitter.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/3b5a71d5-ca05-4839-a928-70d0362147de/coffee.png?t=1738083354)
### Tailwind Weekly #9: Tailwind UI has landed ✈️
URL: https://tailwindweekly.com/issue-9/
Last updated: 2025-10-03T13:28:47.000Z
Well folks, it’s here, FINALLY, after months and months of waiting… and it’s even better than we expected 😍.

## 🌟News

![](https://tailwindweekly.com/content/images/2025/10/image-104.jpg)

### [Beautiful UI components, crafted by the creators of Tailwind CSS.](https://tailwindcss.com/plus?ref=tailwindweekly.com)

Yep, Tailwind UI is live baby 😎. So get over there and give your sweet sweet money to Adam and Steve. Prepare to be impressed!

Still not convinced? Don’t want to part with your hard-earned money yet? Check out our BDFL giving a preview of exactly what you’re going to get and be able to do with it. It’s mind blowing 🤯.

## 📚Tutorial of the week

![](https://tailwindweekly.com/content/images/2025/10/image-105.jpg)

### [Setting Up Tailwind CSS In A React Project — Smashing Magazine](https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/?ref=tailwindweekly.com)

Ok ok, enough about Tailwind UI, let’s get back to our regular programming. This week’s tutorial is probably nothing you haven’t seen before but I believe it has a special significance for the TW community. This is the *first ever* article Smashing Magazine has published about TailwindCSS, and they’re known in the community for having great content and a very wide reach, can’t get any more mainstream than Smashing Magazine folks!

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-106.jpg)

### [Beam - Help a homeless person train and get into work](https://beam.org/?ref=tailwindweekly.com)

I admit it, I’m a sucker for non-profit work, but not only that, I’m also a sucker for a clean and nicely designed website, and beam is both! Being made with tailwind is just the cherry on top.

They do know how to rock a nice yellow color, reminds me a lot about Wes Bos’ stuff 😂.

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-107.jpg)

### [iamcco/coc-tailwindcss: tailwindcss class name completion for (neo)vim](https://github.com/iamcco/coc-tailwindcss?ref=tailwindweekly.com)

This week’s resource might be a bit esoteric but I’m pretty sure we all know (or have known) a developer who *swears* Vim is the best thing *since sliced bread.* And *they* probably know someone who ditched Vim a while ago and it’s in love with neovim (Vim’s younger brother). For *those* folks, I have great news, tailwind auto complete is finally a reality with this plugin!

Be sure to thank [iamcco](https://github.com/iamcco?ref=tailwindweekly.com) for making tailwind more accessible to that userbase!

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-7.jpg)
### Tailwind Weekly #8: The hype is real 🚀
URL: https://tailwindweekly.com/issue-8/
Last updated: 2025-10-03T13:36:13.000Z
This is it folks, we’re one week away from Tailwind UI’s launch and everybody is super excited! I saw folks asking for early access on some slacks chat, trying to get a hold of Adam because they just *need it right freaking now.* Can’t imagine the emails they’re getting, probably a few have offered their first born already 😂.

Just one more week 🤞.

## 🌟News

Adam blessed us this week with another screencast and man, I can’t wait for the launch! I don’t have a particular project in mind I want to use wind UI for but I’ll buy it nevertheless to support Adam and thus, TailwindCSS. Gotta make it more sustainable for Adam so he keeps working on the framework we all love 😄.

## 📚Article of the week

![](https://tailwindweekly.com/content/images/2025/10/image-108.jpg)

### [In Defense of Utility-First CSS | frontstuff](https://frontstuff.io/in-defense-of-utility-first-css?ref=tailwindweekly.com)

While tailwind has been enjoying a lot of popularity these days, there’s are still some devs that bash it to no end for multiple reasons, from it being ugly syntax to being similar to inline styles to *“dude, your HTML looks like a dumpster fire”,* I have heard it all…

When I encounter devs like that I usually refer them to this article. Our BDFL has a [similar article](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/?ref=tailwindweekly.com) but I think frontstuff’s piece covers more counter-arguments. Definitely a good piece to have in your bookmarks for when haters become loud.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-109.jpg)

### [Agendrix - Staff Scheduling Software and Online Time Clock](https://www.agendrix.com/?ref=tailwindweekly.com)

This week’s showcase sure is pretty! *Agendrix is an easy-to-use online staff scheduling and time clock software that simplifies scheduling, timesheets, and employee clock in and clock out.*

I must admit I never thought boring software could be made to look so *appealing* and *trendy.* But of course, they won me over when I saw they’re using tailwind. ❤️

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-110.jpg)

### [jekyll-starter-tailwind](https://github.com/taylorbryant/jekyll-starter-tailwind?ref=tailwindweekly.com)

I admit it, I have a soft spot for Jekyll in my heart. It was the first static site generator I used back when I was learning programming and, while there are more modern solutions on the market, I still reach for it when I want to do something quick and simple. So when I discovered this jekyll-tailwind starter I felt nostalgic!

Make no mistake, this is not your average starter, this thing is robust, regularly updated and very well made. So if you’re a fan of Jekyll and Tailwind, I suggest you fork it, modify it to fit your needs and make it a [*template repository*](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository?ref=tailwindweekly.com)*.* You’ll thank me later 😉.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-8.jpg)
### Tailwind Weekly #7: Peaceful week, full of treats!
URL: https://tailwindweekly.com/issue-7/
Last updated: 2025-10-03T13:49:04.000Z
No big news this week folks, Tailwind v1.2 has been out of a week or so now, people are having a lot of fun with it and Adam’s is coding like mad for Tailwind UI’s upcoming launch later thing month.

Nevertheless, I know you’re here for your usual TW dose, so get ready for the usual treats!

## 📚Tutorial of the week

### [Rebuilding Spotify w/ Tailwind CSS v1.x](https://www.youtube.com/watch?v=SLGb2RLie9w&list=PLEhEHUEU3x5p8cxOJ27w20LffCknp935L&index=19&ref=tailwindweekly.com)

In case you’re not getting enough of Adam’s screencasts, here’s another youtuber you’ll love. This guy takes the same approach as Adam and codes UI’s he likes in tailwind. I really like videos like this because I see how other experienced devs use tailwind and always learn a thing or two from them.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-111.jpg)

### [Vexilo - Mexican Software Development Company](https://www.vexilo.com/?ref=tailwindweekly.com)

Vexilo is a cool Mexican dev shop that *makes software according to their client’s needs*. I really liked their illustration first approach and their nice color palette, you wouldn’t know they’re using tailwind unless you check the markup.

## 🎁Plugin of the week

![](https://tailwindweekly.com/content/images/2025/10/image-112.jpg)

### [tailwindcss-aspect-ratio](https://github.com/webdna/tailwindcss-aspect-ratio?ref=tailwindweekly.com)

This one is short and sweet. Perfect for when you’re dealing with a lot of video embeds and very useful if you need to define some aspect ratio classes and want to keep everything *inside* Tailwind’s config and avoid writing custom CSS.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-9.jpg)
### Tailwind Weekly #6: v1.2 is officially out 🎉 + the usual treats!
URL: https://tailwindweekly.com/issue-6/
Last updated: 2025-10-03T13:58:02.000Z
The hype is real 🤩, v1.2 is finally out! So grab a cup of your favorite beverage and start getting familiar with the features and syntax 🧐.

This week I bring you a very cool tutorial about testing your tailwind plugins (it’s easier than you think!), another nice tailwind site and… a plug… Yep, I’m plugging something this week, a tool that has completely changed my frontend dev workflow for the better and I just had to tell you all about it!

## 🌟News

> 🚀 Tailwind CSS v1.2.0 is now available!

> Includes support for CSS Grid, transitions, transforms, and tons more 😍

> Check out the release notes for all of the details:[https://t.co/Xc9IB2WOSe](https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.2.0?ref=tailwindweekly.com)

> Docs are updated too! [pic.twitter.com/t66kCEksKV](https://x.com/adamwathan/status/1225072439492796421/photo/1?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [February 5, 2020](https://x.com/adamwathan/status/1225072439492796421?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Get ready to upgrade folks, v1.2 is the new reality. Dust off those old tailwind projects, remove the (now) unneeded plugins and use those sweet sweet native tailwind features 🚀.

> PS. If anyone feels like contributing to the docs for any of the new features at all, it would be a big help 🙏🏻 just stubbing out the pages with the class table at the top would be an amazing start.[https://t.co/X1A2GIkiPA](https://github.com/tailwindlabs/tailwindcss.com?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [February 1, 2020](https://x.com/adamwathan/status/1223660222713081858?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

Our BDFL had quite a week writing all the docs for the v1.2 launch so if you want to contribute and help him out a bit feel free to check the docs for any errors, typos or whatever you think can be improved. PRs are very welcome!

## 📚Tutorial of the week

### [Testing Tailwind CSS plugins with Jest](https://www.oliverdavies.uk/blog/testing-tailwind-css-plugins-jest?ref=tailwindweekly.ongloat.com)

I know, I know. I was boring you with so many “Get Started with Tailwind” tutorials, so this week I’m treating you with an old but great article. Interested in writing your own tailwind plugins? Maybe you want to release them on NPM? Then tests are definitely important!

## 💅Showcase of the week

### [Valohai Machine Learning Platform](https://valohai.com/?ref=tailwindweekly.com)

Another week, another cool site made with Tailwind ❤️. Valohai *helps you automate MLOps and offers version control for data, code, hyperparameters and more*. The site looks minimal and clean, very polished. I’m quite a fan of the header font!

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-113.jpg)

### [Polypane - A better Sizzy alternative](https://polypane.app/?ref=tailwindweekly.com)

Now folks, I have a plug to make. Like many of you, I discovered Sizzy when Adam mentioned it on twitter, added it to my dev workflow and even paid for it for a few months but… felt there was something missing.

After doing some more research (AKA “googling”) I came across Polypane. It looked like a cheaper alternative to Sizzy with the same features so I decided to try it for the trial and let me tell you… I was blown away!

This thing is FAST and the synchronized scrolling works amazingly (which was my main pet peeve with Sizzy), to top it off it has a special feature that recognizes the media queries your project is using and automatically creates “panes” based on them so no need to do that manually every time.

Not convinced yet? Polypane recently released their v2 and they added A LOT of new stuff. Feel free to read [the blog post](https://polypane.app/blog/polypane-2-device-emulation-new-modes-and-simulators/?ref=tailwindweekly.com) and prepare to be impressed.

**Now, here’s the best part:** I spoke with the developer and he agreed to give a special 20% discount to the first 100 people who use the code **TAILWINDWEEKLY20** when you sign up 😎.

**Disclaimer:** I’m not being paid anything for this, I just love Polypane and love to share it with anybody I know. This tool fits wonderfully with my tailwind workflow and I think you guys will love it too.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-10.jpg)
### Tailwind Weekly #5: Some sneak peeks on TWUI and more cool goodies!
URL: https://tailwindweekly.com/issue-5/
Last updated: 2025-10-03T14:06:28.000Z
Another week, another Tailwind UI sneak peek. This time looks like Adam is pretty busy coding the meat of the components. Really looking forward to the finished product next month.

We also, as always, have some goodies here for you, all related to tailwind. Some TW appreciation on twitter here, a beautiful looking tutorial there and a retro looking website in-between!

## 🌟News

> .[@tailwindcss](https://x.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) is truly one of those game changers that makes you wonder how you ever got anything done before— Josh Butts (@jimbojsb) [January 26, 2020](https://x.com/jimbojsb/status/1221490875387256832?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

I feel you Josh, that was exactly my experience after finishing my first project with Tailwind, I asked “Where was this 4 years ago?!” and it keeps getting better and better!

![](https://tailwindweekly.com/content/images/2025/10/2323--1-.jpg)

We also got some nice sneak peaks this week on the Tailwind UI’s newsletter 😍. Word is, early launch will be next month. My favorite quote from the email?

*Why is this happening to me.*

😂

Don’t know the context? That’s what happens when you don’t subscribe to our BDFL’s newsletter. Be sure to do so [here](https://tailwindcss.com/plus?ref=tailwindweekly.com) so next time you don’t miss out!

## 📚Tutorial of the week

![](https://tailwindweekly.com/content/images/2025/10/image-114.jpg)

### [Recreate the Tweet Creation Modal with Tailwind CSS ― Scotch.io](https://www.better.dev/recreate-the-tweet-creation-modal-with-tailwind-css?ref=tailwindweekly.ongloat.com)

I’m a sucker for Scotch articles, they just look sooo pretty! And this one is not only pretty but interesting. In the spirit of the original video series from Adam about coding UIs with Tailwind, comes this article about coding Twitter’s Tweet Creating Modal with, yes! Tailwind!

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-115.jpg)

### [devMode.fm // a podcast dedicated to modern web development](https://devmode.fm/?ref=tailwindweekly.com)

Last week I gave you a traditional site made with Tailwind, this time I bring you a *retro* site, from a podcast no less! devMode.fm is a bi-weekly podcast dedicated to the tools, techniques, and technologies used in modern web development. Enjoy the eye candy!

## 🎁Resource of the week

### [Scale — color scale generator](https://hihayk.github.io/scale/?ref=tailwindweekly.com)

A lot of people ask on the Discord chat, how to better create color palettes, and while Adam and Steve said they do it by hand, we peasants need a little help. That’s where *Scale* comes in. I start off with a nice color and play around with the controls until I find some colors I like. Kudos to [Hayk](https://github.com/hihay?ref=tailwindweekly.com) from creating it.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-11.jpg)
### Tailwind Weekly #3: Our BDFL got us a stream this week!
URL: https://tailwindweekly.com/issue-03/
Last updated: 2025-10-03T15:46:33.000Z
It’s been a cool week for TailwindCSS. Lots of people trying out the last canary release and giving feedback, we got another stream of Adam coding stuff for Tailwind UI and some cool tutorials and resources this week.

## 🌟News

Tailwind’s v1.2 canary 5 has been out for more than a week now and it has some positive feedback on twitter, so if you’re on the fence because its a canary release fear not, it’s pretty awesome to use!

> Working on the next version of [@ohdearapp](https://x.com/OhDearApp?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)'s front site. Upgraded to [@tailwindcss](https://x.com/tailwindcss?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) v1.2.0-canary.5, and already making use of:

> \- Transitions

> \- Transforms

> \- CSS grid

> The 1.2 release is gonna be huge 🤯— Sebastian De Deyne (@sebdedeyne) [January 17, 2020](https://x.com/sebdedeyne/status/1218156483810136066?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

This week our Benevolent Dictator for Life (BDFL) graced us with a stream on building more components for Tailwind UI, talk about the hype🔥. I’m adding two videos here because the stream got cut off mid way.

## 📚Tutorial of the week

![](https://tailwindweekly.com/content/images/2025/10/vcw55edsoimy8oiy2urt--1-.jpeg)

### [Get up and running with Tailwind CSS and Next.js - DEV Community 👩‍💻👨‍💻](https://dev.to/notrab/get-up-and-running-with-tailwind-css-and-next-js-3a73?ref=tailwindweekly.com)

Cool tutorial on how to use Tailwind with Next.js, pretty basic stuff but would be a good share for a friend who’s a fan of Next.js and doesn’t know much about Tailwind.

## 💅Showcase of the week

### [Statamic docs](https://statamic.dev/?ref=tailwindweekly.com)

Guess what? Statamic’s docs are made with TailwindCSS in the new beta! They surely took some inspiration from Tailwind’s docs and sprinkled in some cool design choices, you should definitely check it out.

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-118.jpg)

### [eleventail: A running start for JAMstack projects with Eleventy, TailwindCSS and some Netlify goodies](https://github.com/philhawksworth/eleventail?ref=tailwindweekly.com)

For the folks that love eleventy, here’s an awesome resource for you, this is an everything-setup-up-for-you starter project, complete with UglifyJS for the build pipeline. I love how the author just made it j**ust clone and go**.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-13.jpg)
### Tailwind Weekly #2: Tailwind v1.2 is (almost) here!
URL: https://tailwindweekly.com/issue-02/
Last updated: 2025-10-03T15:53:37.000Z
Hello! Ready for your weekly dose of Tailwind? This week we have some interesting stuff! Tailwind v1.2 is almost here and it packs a bunch of features, in Adam’s words, it’s “the biggest update in Tailwind history”.

## 🌟News

> 🚀 Just published the first pre-release of Tailwind CSS v1.2.0!

> Includes:

> \- CSS Grid support

> \- CSS Transform support

> \- CSS Transition support

> ...and tons more 🎉[https://t.co/WMJ67w2Xop](https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.2.0-canary.4?ref=tailwindweekly.com)— Adam Wathan (@adamwathan) [January 8, 2020](https://x.com/adamwathan/status/1214982042083090433?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com)

### [tailwindcss - Release v1.2.0-canary.4 on GitHub](https://github.com/tailwindcss/tailwindcss/releases/tag/v1.2.0-canary.4?utm%5Fcampaign=Tailwind%20Weekly&utm%5Fmedium=email&utm%5Fsource=Revue%20newsletter)

Yep, you read it right, you can start playing with Tailwind v1.2 *right now*! Adam marked it as a pre-release just to be safe and gather feedback but he said he said he doesn’t intend to change a lot of stuff.

## 📚Tutorial of the week

![](https://tailwindweekly.com/content/images/2025/10/image-120.jpg)

### [Tailwind with React - DEV Community 👩‍💻👨‍💻](https://dev.to/ryanlanciaux/tailwind-with-react-2ncl?ref=tailwindweekly.com)

This is a pretty cool tutorial if you want to learn how to mix styled components and tailwind in React. A good read if you do React/styled components for a living and want to try out Tailwind

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-121.jpg)

### [SVELTE Job board made with Tailwind](https://sveltejobs.com/?ref=tailwindweekly.com)

Svelte is all the rage these days and it plays pretty good with Tailwind. So good that they created a Svelte job board with it! I love the cards design, I suspect they read Refactoring UI and took it to heart 🙂

## 🎁Resource of the week

### [hawezo/tailwindcss-theming: Tailwind CSS plugin for client-side theming using CSS custom properties, with dark mode support](https://github.com/innocenzi/tailwindcss-theming?ref=tailwindweekly.com)

Bring dark mode to your tailwind website with this cool and very easy to use plugin. Keep in mind it won’t work with the canary 4 version yet (since it was just out this week) but knowing *hawezo* it’ll have support for Tailwind v1.2 pretty soon.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-14.jpg)
### Tailwind Weekly - Welcome aboard!
URL: https://tailwindweekly.com/tailwind-weekly-welcome-aboard/
Last updated: 2025-10-03T16:08:06.000Z
Welcome, fellow tailwind lover, this is the first issue of Tailwind Weekly! Here you’ll find the latest news, tutorials, talks and plugins made for and about TailwindCSS.

## 🌟News

> Tailwind 2.0:

> \- CSS Grid

> \- Composable transforms

> \- Transitions

> \- Even better color palette

> \- No truly significant breaking changes (just tweaking a few existing colors)

> February 2020 🤙— Adam Wathan (@adamwathan) [December 19, 2019](https://x.com/adamwathan/status/1207707996232527872?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

> ☝️ Pretty much 99% convinced I'm just going to make this v1.2 so nobody is scared off and everyone upgrades without fear. With any luck we'll just never need a true v2 — I don't want to update my fucking projects either 😅— Adam Wathan (@adamwathan) [December 26, 2019](https://x.com/adamwathan/status/1210301378066866176?ref%5Fsrc=twsrc%5Etfw&ref=tailwindweekly.ongloat.com) 

It’s official, Tailwind 2 is coming folks! It’ll be named v1.2 to avoid confusion (since it doesn’t introduce breaking changes) and it’ll introduce official transition classes.

### [Pull Request #1273: Add transition utilities](https://github.com/tailwindlabs/tailwindcss/pull/1273?ref=tailwindweekly.com)

People, Adam is asking for feedback on its transition utilities PR, if any of you want to voice your opinion on it, now’s your chance!

![](https://tailwindweekly.com/content/images/2025/10/33--1-.jpg)

### [TailwindUI Update / Kanban Demo](https://polished-sunset-0ex44e5cb9xt.tailwindcss.com/components/bdac850e-c941-43db-b2e2-9c228353cd76?ref=tailwindweekly.com)

Yes, yes. We’re all waiting for Tailwind UI. This gotta be Adam’s most anticipated product after Refactoring UI!

We received update #5 a few weeks ago (if you didn’t then [subscribe to the newsletter here](https://tailwindcss.com/plus?ref=tailwindweekly.com)) and it looks like the launch will be on late Jan/early Feb.

In the mean time, feast your eyes on the Kanban demo app Adam created on one of its [livestreams](https://www.youtube.com/watch?v=%5FH38A6E8Nsg&t=19s&ref=tailwindweekly.com).

## 📚Tutorial of the week

![](https://tailwindweekly.com/content/images/2025/10/image-122.jpg)

### [TailwindCSS + Parcel 👩‍💻👨‍💻](https://dev.to/didier/getting-started-with-tailwindcss-in-seconds-8p2?ref=tailwindweekly.com)

Cool introduction to Tailwind plus a very complete Tailwind + Parcel starter project. If you like Parcel and want to know how to bundle Tailwind with it then you’ll like this tutorial.

## 💅Showcase of the week

### [Scrum doesn't have to be complicated](https://www.directscrum.com/?ref=tailwindweekly.com)

Beautiful and minimalistic. Check out this week’s website made with Tailwind. I particularly love the zoom in animations and the clean layout.

## 🎁Resource of the week

![](https://tailwindweekly.com/content/images/2025/10/image-124.jpg)

### [Headwind: An opinionated Tailwind CSS class sorter built for VSCode](https://github.com/heybourn/headwind?ref=tailwindweekly.com)

For those that missed it on the Discord, we now have a class sorter extension for VSCode! It’s still on its early stages but its already very useful if you want to standardize your classed order.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-15.jpg)
### Tailwind Weekly #4: Slow week folks but we still have some goodies!
URL: https://tailwindweekly.com/issue-4/
Last updated: 2025-10-03T14:12:17.000Z
Hey folks, no reportable news on the TailwindCSS front this week, Adam is pretty busy with TailwindUI and people are still testing out the latest canary version of Tailwind.

BUT, we do have some goodies to share, I found a great article about **Encapsulation** on Design Systems with Tailwind, discovered a great and traditional looking site made with TW and someone out there finally created a tailwind plugin for Eslint 🙌

## 📚Tutorial of the week

![](https://tailwindweekly.com/content/images/2025/10/image-116.jpg)

### [Better Components with TailwindCSS](https://dev.to/itaditya/better-components-with-tailwindcss-4b0h?ref=tailwindweekly.com)

This is a very cool post from Aditya Agarwal about using TailwindCSS to keep your Design System nice and predictable. I really like his main example when you want to avoid the users of your Design System to use it in unintended ways.

## 💅Showcase of the week

![](https://tailwindweekly.com/content/images/2025/10/image-117.jpg)

### [resolutepts.com - The Easiest Way to Save Money on Property Taxes](https://resolutepts.com/?ref=tailwindweekly.com)

Who ever said Tailwind is only for startup-sy stuff? It can do traditional too and it does it very well! If you want some inspiration for your next traditional-looking project then definitely check out [resolutepts.com](https://resolutepts.com/?ref=tailwindweekly.com).

## 🎁Resource of the week

### [eslint-plugin-tailwind: ESLint rules for Tailwind CSS](https://github.com/Idered/eslint-plugin-tailwind?ref=tailwindweekly.com)

Check out this beauty! If you’re a fan of eslint then you’ll love this plugin. It’s a pretty release and react only right now but definitely keep an eye on it.

Want to share something with the TailwindCSS community? You can [submit a link](https://tailwindweekly.link/submit?ref=tailwindweekly.ongloat.com) or message me on Twitter [@vivgui](https://x.com/vivgui?ref=tailwindweekly.ongloat.com).

Want to support the newsletter? You can buy me a coffee with the link below 😁.

![](https://tailwindweekly.com/content/images/2025/10/coffee-12.jpg)