@layer utilities is used but no matching @tailwind utilities directive is present.

[dgrigg]

I am trying to use the @layer and @Variants in a style sheet that gets imported into my main style.css file

style.css

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

@import "./elements/typography.css";

typography.css (not showing all the css here)

@layer utilities {
  @variants responsive {
    .redactor-sm {
      @apply text-sm;
    }

    .redactor-md {
      @apply text-md;
    }

    .redactor-xl {
      @apply text-xl;
    }
  }
}

Having the @layer and @Variants in the imported style sheet results in this error message

@layer utilities` is used but no matching `@tailwind utilities` directive is present.

If I move the @layer and @Variants code to the main style.css then everything works fine. I would prefer to keep the @layer @Variants in the corresponding css file where they belong if possible as I have the need to use this same structure for other special elements/circumstances.

Environment:

• Tailwind version 2.2.19
• Laravel mix 6.0.18
• Postcss 8.2.13
• Node 15.3.0
• Mac OS

[adamwathan]

Hey! This will work as long as you include postcss-import in your plugin list to ensure that the CSS file is properly imported at build-time. Make sure it's the first plugin:

https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

[LeoniePhiline]

That doesn't seem to fix it in Vue Single File Components. Their compilation order or compilation context appears to be wrong.

Is there a workaround other than just not using @layer in SFCs' <style scoped> and <style> sections?
(<style lang="postcss"> was no solution ;))

[yasnaderi]

I have the same problem in Laravel.
I have removed the require('postcss-import') because the app.css output in public directory would be without any compilation.

app.css:

 @import "tailwind.css";

 @import "body.css";

tailwind.css:

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

body.css:

@layer components {
    .body {
        @apply bg-sky-100
    }
}

webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
        // require('postcss-import'),
        require("tailwindcss/nesting"),
        require('autoprefixer'),
    ])
    .webpackConfig({
        stats: {
            children: true,
        },
    })
    ;

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    darkMode: 'class',
    mode: "jit",

}

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "autoprefixer": "10.4.7",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.4"
    },
    "dependencies": {
        "postcss-import": "^14.1.0"
    }
}

[Webbrother]

@adamwathan can you please provide a full example of how to use postcss-import?
I've installed postcss-import, then added 'postcss-import': {}, to my postcss.config.js file. After that nothing changed. What should I do then?

Should I add some config to postcss-import value?

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {}, // <- Should I add something here?
    tailwindcss: {},
    autoprefixer: {},
  }
}

[dgrigg]

@adamwathan perfect! Thank you so much for the speedy response.

[tisuchi]

Thank you. Working.

[bitterapple0]

Hello, I have tried following the instructions from the website closely but I am still getting the exact same error. When I tried using @layer in my index.css everything was worked fine but I need to separate these custom CSS classes. If you do not have a solution for this, is there any other way my custom classes can take advantage of the simple adding of states such as `hover' ? Thank you!

1. I have installed postcss-import and included it into postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

2. Imported at the top of my index.css

@import "./table.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
... // other pure css

3. Tried to use @layer in table.css

@layer utilities {
  .row-shadow {
    box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.08);
  }

  .row-border {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
  }
}

Here are my dependencies, I am using React 18.1.0:

    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "postcss-import": "^14.1.0",
    "tailwindcss": "^3.0.24"

[StasNemy]

Hey!
U can try import @import 'tailwindcss/base'; to table.css file

[mcorrig4]

That fixed it for me, thanks!

I added that import to my style tag like this.

<style scoped>
@import 'tailwindcss/base';
@layer base {
  html {
    @apply h-full;
  }
  body {
    @apply h-full;
  }
}
</style>

[deviprsd]

Just tried it, doesn't work for css-modules though. I'm using vite, maybe I'm doing something wrong. I removes the error but doesn't actually inject into the css. They are loaded separately.

[Ashish-0704]

Have you got the answer

[tom-vism]

Hello, I got the same issue only for Angular (starting from version 15). There is an issue created in Git Hub, however, it was marked as won't fix.

They stated that Angular acts as expected for CSS (postcss is being executed on each file individually instead of the concatenated stylesheet) since it aligns more consistently with standard browser behavior angular/angular-cli#27005

My question would be, do you think it is something I should push for to make Tailwind work out of the box without the use of a custom webpack configuration for that?