Debugging Tailwind CSS in My TypeScript Next.js Project: Lessons from a 3-Day Chase

Hey Everyone, what's up? Today, I'm going to tell you an interesting story about when I built my first TypeScript-based next.js project.

When building a TypeScript-based Next.js project, I encountered a frustrating issue: Tailwind CSS wasn’t working. I spent three days trying to debug the problem, only to discover a simple misconfiguration. In this article, I’ll share what went wrong, how I fixed it, and some lessons learned to save you from the same headache. I initially thought my issues were due to using TypeScript for the first time, which led me to abandon my project and restart it in JavaScript. However, I realized I couldn't ignore the problem forever, so I returned to TypeScript. Despite facing the same issue again, I persisted and carefully debugged my work, ultimately identifying my mistakes.

My Project Setup

I was building an event loop visualizer using a modern tech stack:

Tech stack: Next.js, (TypeScript), NeonDB, Prisma Orm, auth.js
Styling: Tailwind CSS, Material UI
Additional Tools: PostCSS, and other standard configurations

Everything seemed set up correctly. I had my tailwind.config.ts, postcss.config.js, and imported the Tailwind CSS file in my page.tsx. However, when I started the project, none of the Tailwind styles were being applied.

The Problem: Symptoms of the Issue

Here’s what I noticed:

No styles were applied to any of my components. For instance, a bg-red-500 class on a div had no effect.

this is what happened to me when Tailwind CSS was not working on my project.
Running npm run build showed this warning:
```
 warn - No utility classes were detected in your source files.  
 If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
```
Despite Tailwind being installed and imported, it wasn’t generating any CSS. I checked my browser’s DevTools and saw no Tailwind styles being loaded.

The Mistake: Misconfigured `tailwind.config.ts`

After hours of debugging, I found the issue:

My tailwind.config.ts file had an incorrect content array. This array tells Tailwind which files to scan for class names. Here’s what I had:
```
  content: [
    "./src/**/*.{js,jsx}", // Missing `.ts` and `.tsx`
  ],
```
- Because Tailwind couldn’t find any files with utility classes, it didn’t generate any CSS.

I also realized I had both tailwind.config.ts and tailwind.config.js files in my project, which likely caused conflicts.

The Fix: Step-by-Step Solution

Here’s how I fixed the issue:

1. Corrected the `content` Array

I updated my tailwind.config.ts to include all relevant file types and folders:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}", // Include all relevant extensions
    "./pages/**/*.{js,ts,jsx,tsx}", // For Next.js pages
    "./components/**/*.{js,ts,jsx,tsx}", // For shared components
    "./public/**/*.html", // If any static HTML files exist
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

2. Removed Duplicate Config Files

I deleted the unnecessary tailwind.config.js to avoid conflicts.

3. Verified the Tailwind Directives

I ensured that my globals.css file included Tailwind’s directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Cleared the Build Cache

I deleted the .next directory and restarted the development server:

rm -rf .next
npm run dev

5. Tested with a Simple Component

I added this to my index.tsx to verify everything was working:

import React from "react";

const Home: React.FC = () => {
  return (
    <div className="flex justify-center items-center h-screen bg-blue-500 text-white">
      <h1 className="text-4xl font-bold">Hello, Tailwind!</h1>
    </div>
  );
};

export default Home;

It worked perfectly! 🎉

Lessons Learned

Here’s what I took away from this experience:

1. Always Check Configurations

Small mistakes in config files like tailwind.config.ts can cause major issues. Double-check paths and syntax if something isn’t working as expected.

2. Tailwind Needs Explicit Paths

Tailwind CSS doesn’t scan files dynamically. Make sure all relevant folders and file types are listed in the content array.

3. Avoid Duplicate Config Files

Having both tailwind.config.js and tailwind.config.ts was unnecessary and could have caused confusion. Stick to one.

4. Clear Build Caches

Sometimes, a simple cache clearing (rm -rf .next) is all it takes to fix an issue.

Conclusion

This experience taught me the importance of careful debugging and configuration management. If you’re facing a similar issue, check your content paths, ensure you’re using Tailwind classes, and don’t forget to clear the cache! Have you ever faced a frustrating issue like this? Share your experiences or questions in the comments—I’d love to hear from you!

my three-day journey was a mix of hilarity and learning. Debugging Tailwind CSS has given me not just a better understanding of utility-first styling but also a memorable experience filled with ‘aha!’ 😂 moments and plenty of laughter 😅 . After all, if we can’t laugh at ourselves while coding, what’s the point? Now, go forth and style like the CSS wizard you are!

I’ve built my website and fixed all the issues. I don’t have any screenshots, but you can visit the Website.

Website link: https://qflows-annu-kumari.vercel.app/

GitHub link: https://github.com/annuk123/Qflows

Hope this article will help you