Tailwind CSS not working? It's probably this...

TailwindCSS is an amazing CSS utility library. It's pretty straightforward to set up, but there are a few common problems that arise from basic errors. Styles aren't applying. Styles were applying but don't anymore. Only some styles are applying. The solutions are almost always the same, so if you're finding that Tailwind just flat out doesn't seem to be working, here's what to do.

1. Check you've added the Tailwind directives to the CSS file

Whatever framework you're using (or even if you're not using one at all), your main CSS file needs to have the three basic Tailwind directives in place. Simply:

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

In some IDEs you might find that you get warnings for the these statements. This is simply because they are not valid CSS - they instead work with PostCSS. You can safely ignore the warnings, or if you're one of those people that just hates wiggly lines, set the file type in your IDE to PostCSS.

2. Check you're importing or linking your CSS file

Once your directives are in place, make sure you're actually linking to or importing the relevant CSS file into your project, e.g.

<link rel="stylesheet" href="styles.css">

import '../css/globals.css'

The telltale for this issue is your page having no styling - for example, Tailwind resets the font-family to sans-serif, so if you're seeing Times New Roman, you're not linking your CSS file correctly.

If you're using the CLI, it's worth noting that the file names and paths used as examples in the Tailwind docs are just that - examples. You aren't required to use /src/input.css and /dist/output.css - all you need is an input CSS file with the three @tailwind directives, and an output CSS file where Tailwind will build the classes you use to. They can be called anything and be placed anywhere in your file structure.

3. Make sure your content array is correct

Tailwind works by scanning your files for recognised class names and patterns and then including them in the CSS file. The files it scans are defined in the content array in tailwind.config.js. If this is pointing to the wrong place, Tailwind won't pick up any classes.

A telltale that this is the problem is that the Tailwind default styles are applying (e.g. your text is sans-serif and you have no default page padding), but the Tailwind classes you're adding in your markup aren't applying.

Sometimes, you might find that Tailwind has been working, but now you're in a different file and only a few classes are working. What happens in this situation is that classes you have used in other files are already built in, and so if you use them in your new file, they will apply, but new classes won't.

An example content array for a Next.js project looks like this:

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

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

This checks the app,pages, components, and src folders, plus any subfolders (denoted by the **) for any file with the js,ts,jsx, or tsx extensions containing classes recognised by Tailwind. If you create a folder outside this range, Tailwind won't scan it.

4. Check your build process is running

Tailwind needs to scan your markup and rebuild the CSS every time you change it. You'd be surprised at how many times people forget this fact. So, check your dev server is running if you're using a framework, or if you're using the CLI, be sure to run the build command with the --watch flag so the CSS will automatically rebuild.

npx tailwindcss -i src/input.css -o dist/output.css --watch

5. Check you're not concatenating class strings

Tailwind works by scanning the files defined in your content array at build time. Because of this, you can't use concatenated class names, e.g.

<div class={`bg-${bgColor}`}>...</div>

The rule of thumb is, if you can't do a text search in your IDE to find the class name, it won't work with Tailwind.

The Tailwind Docs have several strategies you can use to get around this.

6. Check you're not overriding the defaults

The Tailwind config allows you to add custom fonts, colours, and other things to your setup. Crucially, there is a slight difference in how this is done if you want to retain access to Tailwind's defaults. Here's an example:

theme: {
  colors: {
    brand: "#b4d455"
  }
}

This will override all the standard Tailwind colours, even black and white. Instead, use an extend object:

theme: {
  extend: {
    colors: {
      brand: "#b4d455"
    }
  }
}

This will add the custom colour to the theme, leaving you access to all the defaults. The example uses colours, but it applies to any custom value you add to your config.

Conclusion

These steps will fix 95% of Tailwind problems. If you're still having trouble, feel free to join us in the Discord and we'll be happy to help you out.