# @apply is not supported within nested at-rules like @include. You can fix this by un-nesting @include

**URL:** https://discourse.roots.io/t/apply-is-not-supported-within-nested-at-rules-like-include-you-can-fix-this-by-un-nesting-include/22019
**Category:** sage
**Tags:** bud, sage10
**Created:** 2022-01-06T00:09:32Z
**Posts:** 6

## Post 1 by @stealth123 — 2022-01-06T00:09:32Z

when I run yarn dev I get the following error

```
✘ Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(155:7) ./resources/styles/partials/_base.scss @apply is not supported within nested at-rules like @include. You can fix this by un-nesting @include.

  153 | @apply flex flex-col w-full p-8;
  154 | @include respond(md) {
> 155 | @apply flex-row p-0;
      | ^
  156 | }
```

Also, I am using SCSS instead of CSS and updated the default `resources/styles/app.css` as below

```
@import "lib/_mixins.scss";
@import 'tailwindcss/base';
@import "partials/_base.scss";
@import "partials/_form_fields.scss";
@import "partials/_buttons.scss";
@import "partials/_animations.scss";
@import 'tailwindcss/components';
@import "partials/_components.scss";
@import 'tailwindcss/utilities';
```

My package.json file

```
"devDependencies": {
    "@roots/bud": "^5.0.0",
    "@roots/sage": "^5.0.0",
    "@wordpress/browserslist-config": "4.1.0",
    "autoprefixer": "^10.4.1",
    "babel-eslint": "^10.1.0",
    "eslint": "8.6.0",
    "postcss": "8.4.5",
    "postcss-import": "14.0.2",
    "postcss-nested": "5.0.6",
    "postcss-preset-env": "7.1.0",
    "postcss-scss": "^4.0.2",
    "prettier": "2.5.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "tailwindcss": "^3.0.9"
  },
  "dependencies": {
    "stylelint-scss": "^4.1.0"
  }
```

Its a relatively fresh installation of Sage 10 and I am using tailwindcss. Is there any bud-nesting plugin or any other built-in which handles the nesting of rules with tailwindcss? Any help would be greatly appreciated.

Thank You.

---

## Post 2 by @ben — 2022-01-06T00:16:10Z

Howdy! Have you seen this [page on the Tailwind docs about nesting](https://tailwindcss.com/docs/using-with-preprocessors#nesting)?

---

## Post 3 by @stealth123 — 2022-01-06T00:20:03Z

Hello Ben, yes I checked the documentation on tailwind but there is no postcss.config.js file in sage 10. Can you tell me where I can setup the nesting plugin?

---

## Post 4 by @ben — 2022-01-06T00:30:36Z

:eyes: this should help get you pointed in the right spot: [How to add PostCSS plugins to Bud?](https://discourse.roots.io/t/how-to-add-postcss-plugins-to-bud/21864)

---

## Post 5 by @stealth123 — 2022-01-06T15:32:12Z

this is my bud.config.js file

```
/**
 * @typedef {import('@roots/bud').Bud} Bud
 *
 * @param {Bud} config
 */

module.exports = async (config) =>
  config
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['scripts/app.js', 'styles/app.css'],
      editor: ['scripts/editor.js', 'styles/editor.css'],
    })

    /**
     * Add postcss plugin with bud
     */
    .tap(bud => {
      bud.postcss.setPlugin('postcss-nested', [
        require.resolve('postcss-nested'), // the plugin module path
        {}, // options
      ])
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets(['resources/images'])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch([
      'tailwind.config.js',
      'resources/views/**/*.blade.php',
      'app/View/**/*.php',
    ])

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://website.local');
```

Tried running `yarn bud clean` and then `yarn dev` **still getting the same error**. Any suggestions here?  
One more question, I dont see postcss-import plugin being set up anywhere in `bud` but my `import` statements in `scss` files are working fine. Is that included by default?

---

## Post 6 by @stealth123 — 2022-01-13T16:55:03Z

solved my issue by adding `@roots/bud-sass` and `sass` to my package.json devDependencies.

---

## Post 7 by @system — 2022-02-17T00:09:56Z

This topic was automatically closed after 42 days. New replies are no longer allowed.