DEV Community: Tirtho Raj Mondal

🚀 What’s New in Tailwind CSS v4.3: Top Features with Code Examples

Tirtho Raj Mondal — Sat, 16 May 2026 17:27:26 +0000

If you haven’t checked out the latest Tailwind CSS v4.3 release yet, you are missing out on some massive workflow upgrades. This update brings long-awaited layout properties natively into the framework, cutting down the need for custom CSS or third-party plugins.
Here is a breakdown of the most exciting features in Tailwind CSS v4.3, complete with practical code examples.

1. Native Scrollbar Styling (No Plugins Required!)

Historically, custom scrollbars meant writing complex, browser-specific CSS or importing extra plugins. Tailwind v4.3 resolves this by adding native utility support for width, color, and gutter properties.

📝 Code Example:

<!-- A modern, slim blue scrollbar container -->
<div class="h-48 overflow-y-scroll scrollbar-thin scrollbar-thumb-blue-500 scrollbar-track-slate-100">
  <p class="p-4">
    Scroll down to see the native custom scrollbar in action. 
    No extra CSS files or external plugins are required anymore!
  </p>
</div>

2. Height-Aware Container Queries

Container queries are a game changer for component-driven design. While previous versions focused heavily on inline sizes (width), v4.3 introduces @container-size to target parent block-size (height).

📝 Code Example:

<!-- Parent container explicitly tracking size -->
<div class="@container/card h-[300px] border border-slate-200">
  <!-- Content changes color only if parent height exceeds 200px -->
  <p class="text-slate-600 @[block-size>200px]/card:text-emerald-600 font-semibold">
    My color shifts dynamically based on my container's height!
  </p>
</div>

3. Dedicated zoom-* and tab-* Utilities

Two highly useful layout utility shortcuts have officially mapped to native CSS attributes. You can now quickly control browser-level element zooming and tab indentation sizes.

📝 Code Example:

<!-- Using zoom-* to scale UI previews -->
<div class="zoom-120 bg-slate-50 p-4 border rounded">
  Scaled preview box (120% magnification).
</div>

<!-- Using tab-* to fix code block formatting -->
<pre class="tab-2 bg-slate-900 text-white p-4 rounded mt-4">
function initTailwind() {
    console.log("Tab width is now precisely 2 spaces instead of 8!");
}
</pre>

4. Multi-Layered CSS Formatting inside @variant

For design system maintainers, writing complex element states in pure HTML can look messy. Tailwind v4.3 allows you to combine stacked and compound states seamlessly directly inside your global CSS file using the @variant engine.

📝 Code Example (global.css):

/* Combining complex user interaction points into one custom utility */
@variant hover-focus (&:hover:focus, &:focus-within);

📝 Code Example (index.html):

<!-- Cleaner class strings with pre-bundled behaviors -->
<button class="bg-gray-200 text-black hover-focus:bg-indigo-600 hover-focus:text-white transition">
  Interactive Button
</button>

5. Smarter Fallbacks with --default(…) syntax

Creating reusable utility definitions on top of Tailwind just got safer. The new --default(…) syntax acts as a structural fallback, meaning your custom designs won't break if a specific design token configuration goes missing.

📝 Code Example (global.css):

@utility custom-alert-gap {
  /* Automatically falls back to 2rem (spacing-8) if no variable is provided */
  margin-top: --default(var(--spacing-8));
}

📝 Code Example (index.html):

<!-- Safely uses the fallback structural styling automatically -->
<div class="custom-alert-gap bg-amber-50 p-4">
  This component stays perfectly spaced even without active theme flags.
</div>

6. Frictionless Project Migrations

Upgrading your legacy applications to the modern v4 ecosystem is significantly cleaner. The built-in automated CLI conversion tool has an updated canonicalizer to prevent broken file paths and preserve raw style elements smoothly.

💻 Upgrade Terminal Command:

npx @tailwindcss/upgrade

Mastering React Hooks: Your Ultimate Guide with Examples 🎯

Tirtho Raj Mondal — Fri, 29 Nov 2024 16:23:22 +0000

React Hooks are a game-changer for modern web development, empowering developers to build cleaner and more functional code. Whether you're a React newbie or looking to sharpen your skills, here's a breakdown of the most essential React Hooks—complete with examples!

🔑 1. useState

Manage dynamic state in functional components.

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
  </div>
);

Use Case: Toggle states, counters, or inputs.

🔑 2. useEffect
Handle side effects like fetching data or interacting with the DOM.

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // Only runs when count changes

Use Case: Data fetching, subscriptions, or cleanup.

🔑 3. useContext

Skip prop drilling and share data across components.

const ThemeContext = React.createContext('light');

function App() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Hello!</div>;
}

Use Case: Global data like themes or authentication.

🔑 4. useReducer
Manage complex state transitions.

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

const [state, dispatch] = useReducer(reducer, { count: 0 });

Use Case: State-heavy components like forms or complex UIs.

🔑 5. useRef

Access a mutable reference for DOM elements or persisted variables.

const inputRef = useRef();

return (
  <div>
    <input ref={inputRef} />
    <button onClick={() => inputRef.current.focus()}>Focus</button>
  </div>
);

Use Case: DOM access, timers, or animations.

🔑 6. useMemo

Optimize expensive calculations by memoizing their results.

const doubledValue = useMemo(() => number * 2, [number]);

Use Case: Avoid performance bottlenecks during re-renders.

🔑 7. useCallback

Memoize functions to prevent unnecessary re-creations.

const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []);

Use Case: Stable functions in child components or event handlers.

🔑 8. Custom Hooks
Reuse your logic across multiple components.

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(response => response.json()).then(setData);
  }, [url]);

  return data;
}

const data = useFetch('https://api.example.com');

Use Case: DRY code for fetching, authentication, or animations.

🌟 Why Hooks Are a Game-Changer
Hooks simplify React code, reduce boilerplate, and let you focus on building functional, reusable, and maintainable components. Whether you're managing state or optimizing performance, these hooks are your toolbox!

What’s your favorite React Hook?
Let me know in the comments! And if you found this guide useful, follow me here or connect with me on my page: (https://dev.to/tirthorajmondal) 🚀