DEV Community: Sheraz Manzoor

You're Not a Coder Anymore. You're an Orchestrator. (And That's a Good Thing)

Sheraz Manzoor — Wed, 06 May 2026 10:43:31 +0000

The shift from AI autocomplete to AI agents is the biggest change in software development since version control -- and most devs aren't ready for it.

If you're still treating your AI tools like a smarter Stack Overflow, you're already behind.

In 2026, the developers shipping the most code aren't the ones who type the fastest or know the most syntax by heart. They're the ones who've figured out how to orchestrate AI agents like a conductor leads an orchestra. One experienced developer with the right agentic framework can produce the output of a team of four or five engineers.

That's not hype. That's what's actually happening in the industry right now.

So let's talk about what "AI-agentic development" actually means in practice, how it changes the way you write and review code, and how you can start building these habits today.

First, What Even Is an AI Agent?

Before we go further, let's make sure we're on the same page.

A traditional AI coding tool (like early Copilot) works like autocomplete on steroids. You write a comment or a function signature, and it suggests what comes next. You're still driving. The AI is just filling in words.

An AI agent is different. You give it a goal, and it figures out the steps. It can:

Read your existing codebase to understand context
Create files, write tests, and scaffold components
Run commands and check the output
Fix its own errors and iterate
Open pull requests when it's done The mental model shift is huge. Instead of asking "what code should I write next?", you start asking "what do I want to exist that doesn't exist yet?" and then delegating the building to an agent.

The Old Workflow vs. The New Workflow

Here's a concrete example. Let's say you need to build a user authentication module with JWT tokens.

The old workflow (2022-era AI):

You: // create a function to generate a JWT token
AI: suggests a 10-line function
You: copy, paste, tweak, move on

You're still writing 80% of the code. The AI is a lookup tool.

The new workflow (agentic, 2026):

You open your terminal and type something like:

# Using Claude Code as an example agent
claude "Build a JWT authentication module. Use jsonwebtoken,
store refresh tokens in Redis, add middleware for protected routes,
and write Jest tests for each function. Follow the existing project
structure in /src."

The agent then:

Reads your /src directory to understand your file structure and naming conventions
Checks your package.json for existing dependencies
Scaffolds auth.service.ts, auth.middleware.ts, and auth.test.ts
Runs the tests and fixes any failures it finds
Reports back with a summary You didn't write the code. You defined the outcome.

What This Means for Your Day-to-Day Work

This shift changes where your mental energy goes. Let's break it down.

1. Prompting is now a core skill

How you describe a task determines the quality of what you get back. Vague instructions produce vague code. Precise instructions with context produce production-ready code.

Compare these two prompts:

Bad:  "Add error handling to my API"

Good: "Add error handling to all async functions in /src/routes/*.ts.
      Use a centralized error handler middleware. Return structured JSON
      errors with a 'code', 'message', and 'details' field.
      Log errors using the existing Winston logger in /src/utils/logger.ts."

The second prompt gives the agent constraints, existing context, and an expected output format. You'll get something you can actually use.

2. You review more than you write

Your job becomes code review at a higher level. Instead of reviewing your own work line by line as you go, you're reviewing entire feature scaffolds and asking:

Does this follow our architecture patterns?
Are there security implications I need to check?
Is this the right abstraction, or is it over-engineered? This is actually a more valuable use of your time. The mechanical typing is handled. The judgment is still yours.

3. Architecture decisions matter more, not less

Here's the thing people get wrong: they think agentic AI tools reduce the need for technical expertise. It's the opposite.

If you give an AI agent bad architectural direction, it will build you a very clean, well-tested, beautifully scaffolded bad system. Garbage in, garbage out, just faster.

Knowing why you'd use a message queue vs. a direct API call, why you'd separate your domain logic from your infrastructure layer, why you'd reach for an event-driven pattern in one scenario vs. a request-response pattern in another -- these skills are more important now than ever. Because you're the one making those calls.

A Practical Agentic Workflow You Can Steal

Here's a workflow pattern that senior devs are adopting right now. Think of it as "spec-first" development.

Step 1: Write a task spec, not just a ticket

Before you hand anything to an AI agent, write a short spec file:

# Task: Add rate limiting to the public API

## Goal
Prevent abuse by limiting requests to 100 per 15 minutes per IP address.

## Constraints
- Use express-rate-limit (already in package.json)
- Apply globally in app.ts, not per-route
- Return a 429 status with a clear error message
- Add an exemption for internal service-to-service calls (identified by X-Internal-Token header)
- Write integration tests using supertest

## Files to touch
- src/app.ts (add middleware)
- src/middleware/rateLimiter.ts (create this)
- tests/rateLimiter.test.ts (create this)

## Do NOT change
- Any existing route handlers
- Authentication logic

This spec becomes your agent's system prompt. It gives it constraints, context, and a clear scope boundary.

Step 2: Run the agent with the spec

claude --file task-spec.md

Or paste it directly into your tool of choice.

Step 3: Review the diff like a PR

When the agent is done, treat its output exactly like you'd treat a pull request from a junior developer. Check the logic, check the edge cases, check that the scope didn't drift.

git diff

Look for:

Did it touch files you said not to touch?
Does the test actually assert the right things, or does it just pass trivially?
Are there any magic numbers or hardcoded values that should be config? ### Step 4: Iterate with follow-up prompts

Agents shine in iteration. If something is off, be specific:

"The test passes when the rate limit is hit but it's not testing the
X-Internal-Token exemption. Add a test case for that."

This back-and-forth is fast. A correction that would take you 20 minutes to track down and fix takes 30 seconds to describe.

The Pitfalls (Don't Skip This Section)

Agentic development is powerful, but it's easy to shoot yourself in the foot if you're not careful.

Pitfall 1: Trusting without reading

The number one mistake is treating AI output as safe to ship without reading it. Agents can and do:

Introduce subtle bugs in edge cases
Write tests that pass trivially (testing that true === true, essentially)
Use deprecated APIs they learned from older training data
Over-engineer simple solutions Always read the diff. Every single time.

Pitfall 2: Scope creep in agent runs

Agents are eager. If your spec is vague, they'll fill the gaps with assumptions. Sometimes those assumptions touch things you didn't want touched.

Mitigate this by being explicit about scope boundaries in your spec, as shown above. "Do NOT change X" is a sentence worth writing.

Pitfall 3: Context rot in long sessions

The longer an agent session runs, the more likely the agent is to lose track of early constraints. For big features, break the work into multiple smaller agent runs rather than one giant session.

Run 1: Scaffold the data models and migrations
Run 2: Build the service layer
Run 3: Wire up the API routes
Run 4: Write tests for the complete flow

Each run starts fresh with the relevant context. This produces cleaner, more consistent output than one mega-prompt.

Pitfall 4: Skipping security review

AI agents don't have your threat model. They'll write code that works in the happy path but miss things like:

SQL injection vectors in dynamic queries
Missing authorization checks on sensitive endpoints
Storing sensitive data in logs Treat any agent-written code that handles user input, authentication, or data persistence with extra scrutiny.

The Skills That Actually Matter in 2026

If you want to level up as a developer in this new landscape, here's where to invest:

Double down on systems thinking. Understand distributed systems, data modeling, and software architecture at a deeper level. The agents build. You design.

Get comfortable with TypeScript. End-to-end type safety across client and server is now the baseline expectation. Agents produce much better, more consistent code when your codebase has strong types.

Learn to write clear specs. This is basically technical writing. Ambiguity is the enemy. Practice writing requirements that a developer who knows nothing about your project could follow.

Understand what agents can't do well. Novel algorithmic problems, nuanced UX decisions, security audits, performance profiling -- these still need deep human attention. Know where the handoffs are.

Stay hands-on in the code. The developers who drift too far from the actual code and become "prompt managers only" will lose their technical judgment quickly. Keep reading code, keep debugging, keep understanding the system.

So, Are Developer Jobs Going Away?

Let's address the elephant in the room.

No. But the shape of the work is changing fast.

The developers who treat AI agents as a threat are going to have a harder time than those who treat them as leverage. A skilled developer with agentic tools doesn't get replaced. They get multiplied.

Think of it like this: a great architect doesn't get replaced by better construction equipment. Better equipment just means they can build more ambitious things.

The floor is rising. Junior developers who rely on agents too heavily without building foundational understanding will struggle. But experienced developers who know their craft and add orchestration skills on top will be absurdly productive.

Getting Started Today

If you haven't started experimenting with agentic tools, here's the shortest path to getting your hands dirty:

Set up Claude Code, Cursor, or GitHub Copilot Workspace in a real project you're working on
Pick one well-defined, low-risk task (not something in production-critical code) and write a spec for it as described above
Run the agent and review the output like a PR without running it yet
Iterate with follow-up prompts until the output meets your bar
Then run the tests, check the behavior manually, and decide if it's shippable That first successful run where you go from "here's what I want" to "here's working, tested code I didn't have to type" is a genuinely mind-shifting experience.

The developers who build this muscle now will have a significant head start over those who wait until it's "mainstream." In a lot of teams, it already is.

Wrapping Up

The core shift is this: your value as a developer is no longer in your typing speed or your ability to recall syntax. It's in your ability to think clearly about what needs to exist, define it precisely, and evaluate what gets built.

That's actually a more interesting job. More architecture, more judgment, more design, less boilerplate.

The era of AI as autocomplete is already over. The era of AI as collaborator is here. The question is whether you're going to treat these tools like a smarter search engine or like a team member you can delegate to.

Start delegating.

Have you started using agentic workflows in your day job? What's working for you and what's been a pain? Drop a comment below, I'd love to hear how others are adapting their workflows.

Many of my followers liked this post and it got so much love. So sharing it again for the new folks out there,

Sheraz Manzoor — Tue, 05 May 2026 19:16:05 +0000

Sheraz Manzoor

Jul 19 '24

Good Commit ✔ VS. Bad Commit ❌: Best Practices for Git

#git #github #webdev #beginners

1009

Comments 80

4 min read

Coding is dead; Engineering is not.

Sheraz Manzoor — Sat, 28 Feb 2026 17:19:29 +0000

Tech industries have been marking something as dead, since the internet came. They marked PHP dead, they marked the desktop apps dead, now they're saying coding is dead. So, let's disscuss, is coding really dead?

With vibe coding platforms, the startups are bragging about, shipping without developers. Some even say;

If AI can write code, what's left for developers?

Answer to the question.

To answer that bitter question, I would love to share my personal experiences.

First experience is very recent, I guess it was in December. A client approached me on Linkedin, and said this exactly;

"I have created a website with loveable, everything is fine but there's an issue. On google page insights the performance score is only 28%. Can you fix this and bring the score to 90+?"

So, AI generated the website for him, but he still needed my services. And when I looked his code, there were 2000+ lines of code in various single files, images loading on the homepage were above 5 mb, most of'em.

And I did my "engineering" and the performance boosted to 98.

The second experience is that client approached me with a very similar situation, I'll edit his message a bit to avoid confidential information leaks, he said;

"I have a THAT specific issue, I'm trying to resolve it with AI from weeks, but nothing worked out, can you help me in this please? Give me a quotation and a timeline"

So, AI failed at that certain problem, which was basically "Engineering" related; not about "Coding"

To cut the story short, the coding is really dead, but engineering didn't and it'll never.

The death of Coding

Let's be honest; Writing the boilerplate code was never the highest form of intelligence. We even found free templates which really helped a lot several times.

CRUD oprations, API endpoints, forms validations, UI design, these tasks are increasingly automated, and don't be sad, it's not a tragedy, it's progress. Just like calculators didn't kill Mathematics, AI wouldn't kill Engineering. After AI, just an idea died;

A developer is someone who writes the code line by line

What coding was? And why it wasn't enough?

In very descriptive way, "Coding was just syntax execution". And on the other hand, "Engineering is problem solving".

An engineer understands ambiguous requirements, designs scalable systems, anticipates failure modes, balances performance, security, costs and UX, makes trade-off under real world pressure. So, coding is a language, engineering is the mindset.

Why Engineering will always survive?

Real world problems are very messy, they aren't like simple vanila problems. Client contradicts themselves, requirements change in the mid-build, business goals conflicts with technical realities.

Engineering is the ability to shape chaos into meaningful systems. AI can generate functionality, it cannot take responsibility.

AI works always with context and patterns. Now, from the experiences I shared, many files had 2000+ lines of code, not a single AI can make edits in that single file, and reality we have tens and thousands of files, what will AI do there? It'll crash. On the other hand, Engineers write systems based on domain knowledge, business context, user behavior and organized constraints. Context is not a prompt, context is experience.

Here's my new blog post, I had been working and testing Nextjs 15 for two months and here's a summary of it.

Sheraz Manzoor — Tue, 09 Dec 2025 10:37:30 +0000

Sheraz Manzoor

Dec 9 '25

What's new Nextjs 15?

#nextjs #react #javascript #typescript

Comments

2 min read

What's new Nextjs 15?

Sheraz Manzoor — Tue, 09 Dec 2025 10:36:23 +0000

Vercel Recently launched Nextjs 15, and decaled it as stable and ready for production. Today we'll disscuss what's new in Nextjs 15.

Basically there are new features in Nextjs 15;

React 19 RC Support

Next.js 15 RC now supports React 19 RC. This includes the new features for both client and server side rendering. One of the new features in React 19 is Actions which is a very common use case in React Apps to perform Data Mutation and then update in response.

For example; when a user submits a form to change their name, you'll make an api request and then handle a response.

`@next/codemode` CLI

Now you can easily upgrade to latest Nextjs and React versions

npx @next/codemod@canary upgrade latest

Turbopack Dev (Stable)

Performance and stability has been improved to the next level.

React Compiler (Experimental)

The React Compiler is a new compiler created by the React team at Meta. Complier understands your code at a deep level through it's understanding of plain JavaScript semantics and the rules of React, which allows it to add automatic optimizations to your code.

The code reduce the amount of manual memorization developers has to do with apis such as useMemo and useCallback, making code simpler, easier to maintain, and less error prove.

Hydration Error Improvements.

Nextjs continues to build on those by an improved hydration error view. Hydration errors now display the source code of the error with suggestion on how to address the error.

Such improvements help the developers to better understand the error fix it in low time.

Caching Updates

In Nextjs 15, caching default for fetch requests, GET Route handlers and Client Route Handlers and client router cache has changed from cached by default to uncached by default.

If you want to retain the previous behavior, you can continue to opt-into caching.

Partial Prerendering (Experimental)

Partial Prerendering is a new rendering strategy that combines the benefits of static and dynamic rendering on the same route. Quite similar to parallel routing, right? With PPR, you can wrap any dynamic components in a Suspense Boundary.

When a new request comes in, Nextjs will immediately serve a static HTML shell from the cache, then render and stream the dynamic parts in the same HTTP request.

`unstable_after` API (Experimental)

This executers a stream after a response finishes streaming.

So, these were the backbone new features of Nextjs 15, I find them quite fascinating and interesting, and after using them from almost two months (October 2025 to December 2025), I can now witness that is really lot much better already, and in the next releases it will improve further more.

I would love to hear your thoughts, questions and critics on it.

How to deal with a slow API, a story in two parts.

Sheraz Manzoor — Sat, 02 Aug 2025 12:24:30 +0000

Why optimize when you can simply... shift the problem to someone else?

Understanding React's `use` API

Sheraz Manzoor — Fri, 21 Feb 2025 17:23:09 +0000

A Sneak Peek into React’s `use` API: Simplifying Async Data Fetching

React's use API is an experimental yet powerful feature designed to simplify asynchronous data fetching within components. Instead of juggling useEffect and state variables, use lets you directly await promises inside the render phase.

Why is `use` a Game-Changer?

✅ Eliminates unnecessary useEffect hooks

✅ Works seamlessly with Server Components

✅ Simplifies async operations for cleaner, more readable code

How Does it Work?

Here's a quick look at how use fetches data directly inside a component:

import { use } from "react";

async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  return response.json();
}

export default function Post() {
  const data = use(fetchData());
  return (
    <div>
      <h2>{data.title}</h2>
      <p>{data.body}</p>
    </div>
  );
}

Is use Ready for Production?

⚠️ Not yet! The API is still experimental and currently works best with React Server Components. However, it shows great promise in simplifying data fetching workflows.

Read Full Blog →

🚀 Introducing My Personal Tech Blog: CodePanda.online 📝

Sheraz Manzoor — Sun, 16 Feb 2025 11:47:20 +0000

Hey everyone! 👋

I’m super excited to share that I’ve launched my personal blog website — CodePanda.online! It’s a space where I’ll be sharing my knowledge, experiences, and helpful tips for web developers and tech enthusiasts.

💻 What to Expect on CodePanda:

✅ Hands-on tutorials for JavaScript, TypeScript, React, Next.js, and more.
✅ Practical Tips & Tricks – Quick solutions to common coding challenges.
✅ Insights from real-world projects I’ve worked on.
✅ In-Depth Tutorials – Step-by-step guides on JavaScript, TypeScript, React, Next.js, and more.
✅ Snippets and solutions you can use in your own apps.

I created CodePanda to document my journey as a developer and help others by sharing what I learn along the way. Whether you're just starting out or already deep into your coding career, I hope my posts make your development life a little easier.

🔗 Check it out here: codepanda.online

I’d love for you to stop by, explore, and let me know what topics you’d like me to cover next! 🚀🔥

Different Ways to fetch data in Reactjs

Sheraz Manzoor — Tue, 04 Feb 2025 06:58:20 +0000

Fetching data is a fundamental task in modern web or any kind of applications, as almost every web app interacts with an API or a backend service. There are several ways to fetch data in React, and choosing the right approach depends on factors like performance, reactivity, and ease of use. In this blog, we'll explore different major techniques and methods of fetching data in React.js.

Simple Fetch Method

The fetch() API in JS is used to request to the server and load the information in the webpages. You can call any API which returns data in JSON or XML. This method returns a promise.

export default function TextAPI(){
    useEffect(()=>{
        fetch("https://example.com").
        then(response => response.json()).
        then(json => console.log(json))
    },[])
    return <div>HELLO WORLD!</div>
}

Axios

For many developers, it is the preferred way of fetching data.
Axios is a popular 3rd-party that simplifies HTTP requests with features like request cancellation, automatic JSON parsing, and better error handling.

import { useEffect, useState } from 'react';

export default function FetchComponent() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(json => {
                setData(json);
                setLoading(false);
            })
            .catch(error => console.error('Error fetching data:', error));
    }, []);

    if (loading) return <p>Loading...</p>;
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Many developers like this, but I don't. It is just a personal opinion. If we want to store data for caching, we'll need a new third party library, and this way, we will have to install several third party packages just for getting data from API? Doesn't make sense to me.

React Query

This one is my personal favorite. With this, we can achieve a lot more than just fetching data. It provide support for caching, prefetching, refetching, error handling, which improves overall user experience by preventing irregularities and ensuring our app feels really faster.

import { useQuery } from 'react-query';
import axios from 'axios';

const fetchPosts = async () => {
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return data;
};

export default function ReactQueryComponent() {
    const { data, error, isLoading } = useQuery('posts', fetchPosts);

    if (isLoading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Here, we can do a lot much things with a single library, we don't have to rely on multiple libraries for data handling. That's why a ❤ to React Query.

Server-Side Fetching with Next.js

In Nextjs, we can fetch data on server side, in server components. And that is much easier than the traditional useEffect way in React.

"use server"
export async function getServerSideProps() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await res.json();

    return { props: { data } };
}

Now you can import and call this function anywhere in your Nextjs Application. In Server components you can call it directly without any issue, but in Client Components, You'll have to call it useEffect.

The best approach will be to fetch data in a parent server component, and pass that data to our client components.

Conclusion

There are various ways to fetch data in React, each with its own advantages and use cases.
Choosing the right method depends on your project requirements, API structure, and performance needs. Happy coding!
But my suggestion will be React Query, as it has a ton of features.

If you need guidance or a separate blog on any of the above methods, please let me know in comments.
Checkout my blog: https://www.codepanda.online/

[Boost]

Sheraz Manzoor — Tue, 10 Dec 2024 18:06:33 +0000

Good Commit ✔ VS. Bad Commit ❌: Best Practices for Git

Sheraz Manzoor ・ Jul 19 '24

#git #github #webdev #beginners

Introduction to Next.js Middleware: How It Works with Examples

Sheraz Manzoor — Tue, 01 Oct 2024 10:13:13 +0000

Let's talk about routing in Nextjs. Today, we will talk about the one of most powerful thing middleware. Middleware in Nextjs offers a powerful and flexible way both to intercept requests from server and control requests flow (redirects, URL rewriting) and globally enhance features like authentication, headers, cookie persistence.

Creating Middleware

Let's create Middleware Next.js application. First of all, we'll create a new file for middleware like middleware.js or middleware.ts, in the src folder. Middleware in Next.js then needs to allow you the fine control over where it will be active (ie custom matcher configuration, or using isXXX functions)

Redirecting

Using redirection as an example, let's imagine a scenario where navigating to /profile should redirect the user to the homepage. With the custom matcher configuration approach, we can achieve this by importing the necessary types, defining a middleware function, and specifying the matcher configuration:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

In this example, the middleware function checks if the request URL path is /profile and redirects the user to the homepage.

For the conditional statement approach, we can modify the code as follows:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

In this case, the middleware checks the request URL path and redirects the user to the /hello route if the path is /profile.

Middleware in Next.js goes beyond just handling redirections. It also allows for URL rewrites, which can be useful for legacy URL support or SEO optimization. By changing redirect to rewrite in the previous examples, the URL in the browser will stay the same (/profile), but the response content will change to the content from the /hello route.

Using Cookies

Lastly, let's explore the use of cookies and headers in middleware. We can modify our middleware to handle user preferences for themes and add a custom header for all responses:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

In this example, we first check if the user has a theme preference stored in a cookie. If not, we set the theme to 'dark' by adding a cookie. Then, we add a custom header to the response, which can be useful for passing additional information or for debugging purposes.

As you can see, middleware in Next.js is a powerful tool that allows you to effectively control and intercept the request-response cycle, enabling redirects, URL rewrites, and the manipulation of headers and cookies. By mastering middleware, you can enhance the routing experience in your Next.js applications and create more robust and customizable user experiences.

"Middleware in Next.js is a powerful feature that offers a robust way to intercept and control the flow of requests and responses within your applications." - Next.js Documentation

Conclusion

In summary, we've learned how to define middleware in Next.js, explore the two main approaches (custom matcher configuration and conditional statements), and apply middleware to handle redirections, URL rewrites, and the management of cookies and headers. This knowledge will help you take your Next.js applications to the next level by leveraging the flexibility and control that middleware provides.

Mastering Tailwind CSS: Overcome Styling Conflicts with Tailwind Merge and clsx

Sheraz Manzoor — Tue, 03 Sep 2024 18:38:20 +0000

People has been asking me to write something on some soft topics for beginners in my email, as I write mostly for Mid-level or senior. So, here is a new article for you beginners, specially for UI Developers 😍.

Today, let's explore the common challenges developers face when working with Tailwind CSS and how to overcome them using the powerful combination of Tailwind Merge and clsx.

What's the problem?

When using Tailwind CSS, you often want to pass custom class names to your components, just like you would with a native HTML element, which allows you to style your components dynamically and override the default styles. However, this can lead to conflicts when the custom class names clash with the base Tailwind classes.

The problem with Tailwind is these conflicts are not predictable. You don't know the outcome really. It doesn't matter if you put this at the front of the class list or at the end, in both cases when you have a conflict, you don't really get the result that you expect.

The default behavior of Tailwind doesn't always align with our intuition, where we expect the last class to take precedence in case of a conflict.

Introducing Tailwind Merge

The finest solution to this tricky problem is a utility function called Tailwind Merge. This function intelligently merges conflicting Tailwind classes. It makes sure that the last class wins, which aligns with our expectations.

import { twMerge } from 'tailwind-merge';

const containerClasses = twMerge(
  'bg-blue-500 text-white px-4 py-2 rounded',
  'bg-red-500'
);

In example above, the twMerge function takes the base Tailwind classes and the custom class name as arguments, and returns the merged result. This way, the bg-re-500 class will override the bg-blue-500 class, as expected.

Handling Conditional Classes

Another common scenario is when you need to apply different classes based on a condition, such as a component's state. Tailwind Merge makes this easy to manage as well:

const buttonClasses = twMerge(
  'bg-blue-500 text-white px-4 py-2 rounded',
  'bg-green-500',
  isLoading && 'bg-gray-500'
);

In this case, if the isLoading variable is true, the bg-gray-500 class will be added to the final class string.

Introducing clsx

While Tailwind Merge solves the problem of conflicting classes, some developers prefer to use an object-based syntax for conditional classes. This is where the clsx library comes in handy.

import clsx from 'clsx';

const buttonClasses = twMerge(
  clsx({
    'bg-blue-500 cursor-not-allowed': !loading,
    'bg-gray-500 cursor-pointer': loading,
  }),
  'text-white px-4 py-2 rounded'
);

By using clsx, you can now define your conditional classes in an object-based format, which some developers find more intuitive.

Combining the powers of Tailwind Merge and clsx

To get the best of both worlds, you can combine Tailwind Merge and clsx using a custom utility function:

import { twMerge } from 'tailwind-merge';
import clsx from 'clsx';

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

This cn (short for "class names") function first passes the input classes through clsx, which handles the object-based conditional classes, and then passes the result to Tailwind Merge to resolve any conflicts.

Now, you can use this cn function in your components with both syntaxes:

const buttonClasses = cn(
  {
    'bg-blue-500': !pending,
    'bg-gray-500': pending,
  },
  'text-white px-4 py-2 rounded'
);

const buttonClasses = cn(
 'text-white px-4 py-2 rounded', pending ? 'bg-blue-500' : 'bg-gray-500' 
);

This approach allows you to leverage the strengths of both Tailwind Merge and clsx together, providing a flexible and intuitive way to manage your component styles.

Conclusion

In conclusion, understanding and mastering the use of Tailwind Merge and clsx can greatly improve your experience when working with Tailwind CSS. By combining these tools, you can effectively manage class conflicts, conditional styles, and create reusable, well-structured components.

DEV Community: Sheraz Manzoor

You're Not a Coder Anymore. You're an Orchestrator. (And That's a Good Thing)

First, What Even Is an AI Agent?

The Old Workflow vs. The New Workflow

What This Means for Your Day-to-Day Work

1. Prompting is now a core skill

2. You review more than you write

3. Architecture decisions matter more, not less

A Practical Agentic Workflow You Can Steal

Step 1: Write a task spec, not just a ticket

Step 2: Run the agent with the spec

Step 3: Review the diff like a PR

The Pitfalls (Don't Skip This Section)

Pitfall 1: Trusting without reading

Pitfall 2: Scope creep in agent runs

Pitfall 3: Context rot in long sessions

Pitfall 4: Skipping security review

The Skills That Actually Matter in 2026

So, Are Developer Jobs Going Away?

Getting Started Today

Wrapping Up

Many of my followers liked this post and it got so much love. So sharing it again for the new folks out there,

Good Commit ✔ VS. Bad Commit ❌: Best Practices for Git

Coding is dead; Engineering is not.

Answer to the question.

The death of Coding

What coding was? And why it wasn't enough?

Why Engineering will always survive?

Here's my new blog post, I had been working and testing Nextjs 15 for two months and here's a summary of it.

What's new Nextjs 15?

What's new Nextjs 15?

React 19 RC Support

@next/codemode CLI

Turbopack Dev (Stable)

React Compiler (Experimental)

Hydration Error Improvements.

Caching Updates

Partial Prerendering (Experimental)

unstable_after API (Experimental)

How to deal with a slow API, a story in two parts.

Understanding React's `use` API

A Sneak Peek into React’s use API: Simplifying Async Data Fetching

Why is use a Game-Changer?

How Does it Work?

Is use Ready for Production?

🚀 Introducing My Personal Tech Blog: CodePanda.online 📝

💻 What to Expect on CodePanda:

Different Ways to fetch data in Reactjs

Simple Fetch Method

Axios

React Query

Server-Side Fetching with Next.js

Conclusion

[Boost]

Good Commit ✔ VS. Bad Commit ❌: Best Practices for Git

Sheraz Manzoor ・ Jul 19 '24

Introduction to Next.js Middleware: How It Works with Examples

Creating Middleware

Redirecting

Using Cookies

Conclusion

Mastering Tailwind CSS: Overcome Styling Conflicts with Tailwind Merge and clsx

What's the problem?

Introducing Tailwind Merge

Handling Conditional Classes

Introducing clsx

Combining the powers of Tailwind Merge and clsx

Conclusion

`@next/codemode` CLI

`unstable_after` API (Experimental)

A Sneak Peek into React’s `use` API: Simplifying Async Data Fetching

Why is `use` a Game-Changer?