---
title: "Utility whose meaning changed between Tailwind v3 and v4 (lint/tw-v3-renamed)"
description: "lint/tw-v3-renamed: v4 shifted the scales: v3 `shadow-sm` is v4 `shadow-xs`, `shadow` → `shadow-sm`, `rounded-sm` → `rounded-xs`, `blur-sm` → `blur-xs`,…"
canonical: https://void-design.vercel.app/rules/lint/tw-v3-renamed
lastModified: 2026-09-16
---

# Utility whose meaning changed between Tailwind v3 and v4

`lint/tw-v3-renamed` · severity **info** · category Lint · detected by `void lint` and `void audit`

## Why it matters

v4 shifted the scales: v3 `shadow-sm` is v4 `shadow-xs`, `shadow` → `shadow-sm`, `rounded-sm` → `rounded-xs`, `blur-sm` → `blur-xs`, `ring` is 1px instead of 3px, and `outline-none` became `outline-hidden`. Code pasted from v3 docs or registries renders one step off without any error.

## How to fix it

When porting v3 code, rename to the v4 equivalents (or run `npx @tailwindcss/upgrade`). Only reported while v3 config signals remain in the project.

## Example

```tsx
// v3                         // v4
shadow-sm rounded-sm ring  →  shadow-xs rounded-xs ring-3
```

## References

- https://tailwindcss.com/docs/upgrade-guide#renamed-utilities

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `tw-unknown-class` Class looks like a Tailwind utility but compiles to no CSS — [lint/tw-unknown-class](https://void-design.vercel.app/rules/lint/tw-unknown-class)
- `tw-v3-arbitrary-var` `utility-[--var]` is Tailwind v3 syntax; v4 needs `utility-(--var)` — [lint/tw-v3-arbitrary-var](https://void-design.vercel.app/rules/lint/tw-v3-arbitrary-var)
- `tw-js-config-ignored` `tailwind.config.*` exists but the CSS entry has no `@config` — [lint/tw-js-config-ignored](https://void-design.vercel.app/rules/lint/tw-js-config-ignored)
- `tw-dark-variant-os` `dark:` follows the OS, but the app toggles themes with a class/attribute — [lint/tw-dark-variant-os](https://void-design.vercel.app/rules/lint/tw-dark-variant-os)
- `tw-important-soup` Many `!important` utilities in one file — [lint/tw-important-soup](https://void-design.vercel.app/rules/lint/tw-important-soup)
- `tw-arbitrary-sprawl` Many arbitrary colors / pixel values bypass the design tokens — [lint/tw-arbitrary-sprawl](https://void-design.vercel.app/rules/lint/tw-arbitrary-sprawl)
- `page-level-use-client` `"use client"` at the top of a page or layout — [lint/page-level-use-client](https://void-design.vercel.app/rules/lint/page-level-use-client)
- `heavy-import` Heavy dependency imported into client code — [lint/heavy-import](https://void-design.vercel.app/rules/lint/heavy-import)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/tw-v3-renamed`