Tailwind CSS not working? It's probably this...
Tags: tailwindcss
Published: 2023-02-12 17:19:51

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:

```css
@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.

```html
<link rel="stylesheet" href="styles.css">
```
```js
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:
```js
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.

```bash
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.

```js
<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](https://tailwindcss.com/docs/content-configuration#dynamic-class-names) 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:

```js
theme: {
  colors: {
    brand: "#b4d455"
  }
}
```
This will _override_ all the standard Tailwind colours, even black and white. Instead, use an `extend` object:

```js
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](https://discord.com/invite/7NF8GNe) and we'll be happy to help you out.