# Sage Tailwind multiple ruleset error

**URL:** https://discourse.roots.io/t/sage-tailwind-multiple-ruleset-error/12694
**Category:** sage
**Tags:** webpack
**Created:** 2018-06-14T15:13:31Z
**Posts:** 7

## Post 1 by @gomako — 2018-06-14T15:13:31Z

Hi, first time user of Sage here. I don’t develop much in the way of WP sites, more used to Laravel to this project looks really promising.

I’m having trouble with Tailwind. I configured etc all fine and am wanting to extract some classes to a component as outlined here: [Reusing Styles - Tailwind CSS](https://tailwindcss.com/docs/extracting-components)

The trouble is that I’m getting the error:  
`@apply cannot be used with .p-2 because .p-2 is included in multiple rulesets.`

Which doesn’t seem like it should be a problem as it’s what is specified in the docs. I’m not really sure how to debug this. Is it a PostCSS issue, or some config somewhere?

Thanks

---

## Post 2 by @knowler — 2018-06-14T15:16:53Z

I have encountered this issue as well — however, if I recall correctly, not necessarily within Sage projects. Can you share the context that `.p-2` is being applied in?

---

## Post 3 by @gomako — 2018-06-14T15:18:57Z

Sure, I have it in the file `_header.scss`

```
.banner .nav li {
  @apply .flex-1 .p-2;
}
```

That is all that’s in the file.  
Basically I’m trying to make the default wp nav menu behave using flexbox.

---

## Post 4 by @knowler — 2018-06-14T15:21:34Z

It might seem weird, but given how finicky I’ve found `@apply` to be in the past try this:

```
.banner .nav li {
  @apply flex-1 p-2;
}
```

---

## Post 5 by @gomako — 2018-06-14T15:27:01Z

Unfortunately that didn’t work. Gives the same error.

I am also getting the following warning:

```
resolve-url-loader cannot operate: CSS error
missing '}'
```

But I disabled the error on the CSS linter because I couldn’t figure that one out either. Ah well, I’ll go away and think about it for a while!

---

## Post 6 by @knowler — 2018-06-14T15:31:53Z

> [@gomako](#):
>
> I am also getting the following warning:
> 
> ```
> resolve-url-loader cannot operate: CSS error
> missing '}'
> ```

Within [the guide](https://roots.io/guides/how-to-setup-tailwind-css-in-sage/) I’ve written about setting up Tailwind in Sage, I have a footnote explaining that error:

> [@Using Tailwind CSS with Sage 9 + Webpack](https://discourse.roots.io/t/using-tailwind-css-with-sage-9-webpack/11330/8):
>
> 1 You will notice a Webpack warning when running `yarn start` . There is nothing going wrong with the compiling of your styles, but this is [a known issue](https://github.com/bholloway/resolve-url-loader/issues/28) with the `resolve url` Webpack loader. If you [comment it out in the Webpack config file](https://github.com/roots/sage/blob/808e37a0855e4ec9eb7176987dd09b5953676cb3/resources/assets/build/webpack.config.js#L91), the error will no longer appear, however, an error will persist in the browser console since this breaks source maps. Since you are using Tailwind — which generates CSS via a JavaScript config file — you don’t really need source maps, so you can go even further and remove the `sourceMap` option form the `css/postcss/sass` loaders. It does suck, but using a utility CSS framework you’ll notice you will be spending a lot less time in your stylesheets and more time in the markup designing.

---

## Post 7 by @gomako — 2018-06-14T15:36:10Z

Ah excellent, thanks for that. I’ll follow the guide and try again as I might have broken something else! Will report back later.