Tailwind utility classes not working? [SOLVED]

If you’re wondering why your tailwind utility classes aren’t reflecting in the browser-rendered version of your code, read on. I’ll try to cover all the possible reasons this might happen but first let’s establish a uniform understanding of what utility classes are and how to use them. You can skip this part and move to the next section if this information is not new to you.

What are utility classes?

Utility classes help you write CSS without writing “actual” CSS, so instead of creating a separate file for your CSS and hooking it up with your index file, you add them directly to html/react code using a class or className in react. Let’s take a look.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Well, I’m not going to tell you if it does look messy or not but it’s pretty effective. If you’ve used Bootstrap before, utility classes are fairly easy to grasp as they’re used by most of the popular CSS libraries. A worthy point to note is that Tailwind relies heavily on utility classes, if you’re a purist and would rather separate your CSS from your markup, you’ll find SASS/SCSS or PostCSS very useful.

Debugging your Tailwind project

Confirm that you’ve installed Autoprefixer and postCSS alongside Tailwind.

Installing Tailwindcss without these two will ultimately prevent your utility classes from being recognised. Autoprefixer is a plugin that generates vendor prefixes and injects them into your CSS properties so you don’t have to do it manually. PostCSS, on the other hand, handles CSS transformations, adds vendor prefixes using the Autoprefixer plugin, ensures cross-browser compatibility etc. Both of them used together in your project significantly reduces your development time. Here’s how to add it to your project if you skipped it.

1. Install alongside tailwind npm install -D tailwindcss postcss autoprefixer

2. Install after installing Tailwind npm install -D tailwindcss postcss autoprefixer

Initializing tailwind installation: Initializing your installation generates two configuration files for you, tailind.config.js and postcss.config.js. These files are automatically checked so Tailwind knows which files to look for utility classes, if they’re absent from your project, your utility classes wouldn’t work. Here’s how to initialize your installation:

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Check configuration file A typical Tailwind configuration for a next project looks like this:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Confirm that all the paths to your project files where tailwind would be used are correct and there are no spaces between the commas separating the file extensions. For example, {js, ts, jsx} is different from {js,ts,jsx}. Adding spaces after the comma instructs tailwind to check files named “index. js” instead of “index.js”.

Confirm that your classes have no omissions in them: This seems pretty obvious but it can also prevent your code from working as it should. Always leave room for marginal spelling errors. There are also times you might be using a deprecated class from the previous version of Tailwind. Don’t forget to confirm that the class is still in use, a good way to confirm this is to check if other classes are working correctly, if they are then you’re likely using it wrongly or the class has been deprecated.

It's fairly easy to check if a class has been deprecated or not by searching for the keyword in the tailwind documentation. You can also search using the keyword “Deprecated” to see a list of classes no longer in use. Alternatively, you can use Tailwind’s deprecation warning plugin and postCSS configuration to warn you before pushing your code.

Here’s how: npm install @tailwindcss/deprecation-warnings --save-dev

configure your PostCSS configuration file like so:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('@tailwindcss/deprecation-warnings'),
    require('autoprefixer'),
  ],
};

Tailwind CSS is a powerful and popular utility-first CSS framework that can help developers write efficient and responsive CSS code. However, like any tool, it can sometimes present challenges when things don't work as expected.

By following the steps outlined in this article, you should be able to effectively troubleshoot Tailwind CSS errors and get your utility classes working again. From checking your configuration file and dependencies to merely checking your code for misspelt classes, there are several strategies you can use to identify and fix the issue. Don’t forget – when in doubt, always check the documentation.

More reading: https://tailwindcss.com/docs/guides/nextjs Credit: tailwindcss.com Image credit: Skrypt