Tailwindcss: atRule.before is not a function

Created on 10 Nov 2017  路  2Comments  路  Source: tailwindlabs/tailwindcss

Hello,
If I want to install Tailwind, i'm getting the following error:
```Module build failed: ModuleBuildError: Module build failed: TypeError: atRule.before is not a function
at css.walkAtRules.atRule (C:\Users\Gebruiker\Desktop\devwork\node_modules\tailwindcss\lib\lib\substitutePreflightAtRule.js:11:16)
at C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\container.js:308:28
at C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\container.js:148:26
at Root.each (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\container.js:114:22)
at Root.walk (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\container.js:147:21)
at Root.walkAtRules (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\container.js:306:25)
at C:\Users\Gebruiker\Desktop\devwork\node_modules\tailwindcss\lib\lib\substitutePreflightAtRule.js:9:9
at LazyResult.run (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\lazy-result.js:274:20)
at LazyResult.asyncTick (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\lazy-result.js:189:32)
at LazyResult.asyncTick (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\lazy-result.js:201:22)
at LazyResult.asyncTick (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\lazy-result.js:201:22)
at processing.Promise.then._this2.processed (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\lazy-result.js:228:20)
at Promise ()
at LazyResult.async (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\lazy-result.js:225:27)
at LazyResult.then (C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss\lib\lazy-result.js:131:21)
at C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss-loader\index.js:129:55
at
at runLoaders (C:\Users\Gebruiker\Desktop\devwork\node_modules\webpack\lib\NormalModule.js:192:19)
at C:\Users\Gebruiker\Desktop\devwork\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\Gebruiker\Desktop\devwork\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\Gebruiker\Desktop\devwork\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\Gebruiker\Desktop\devwork\node_modules\postcss-loader\index.js:148:13

Laravel Mix looks like this:

let mix = require('laravel-mix');
var tailwindcss = require('tailwindcss');
mix.sass('resources/assets/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.js') ],
}).version();

And app.scss looks like this:

@tailwind preflight;
@tailwind utilities;
```

Most helpful comment

Hey @Sjoerrdd which version of Laravel Mix are you using? I've been seeing a few issues where it seems like even though we require a new-ish version of PostCSS, Mix still uses it's own version instead of the one we specify.

Try npm install laravel-mix@^1.6 to get the latest version and see if that helps.

All 2 comments

Hey @Sjoerrdd which version of Laravel Mix are you using? I've been seeing a few issues where it seems like even though we require a new-ish version of PostCSS, Mix still uses it's own version instead of the one we specify.

Try npm install laravel-mix@^1.6 to get the latest version and see if that helps.

TThank you very much, @adamwathan!

Was this page helpful?
0 / 5 - 0 ratings