tailwindcss + laravel-spark

[coroin]

I'm trying to integrate tailwindcss into an existing site that is built with laravel-spark using less and laravel-mix

When I add @tailwind preflight; and @tailwind utilities; to my app.less file, I get the following error from npm run watch:

error in ./resources/assets/less/app.less

Module build failed: ModuleBuildError: Module build failed: TypeError:
atRule.before is not a function
at css.walkAtRules.atRule
(/var/www/html/node_modules/tailwindcss/lib/lib/substitutePreflightAtRule.js:13:16)

...

here is my webpack.mix.js:

mix.less('resources/assets/less/app.less', 'public/css')
  .options({
    postCss: [
      tailwindcss('./tailwind.js'),
    ]
  })
  .copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
  .copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css')
  .js('resources/assets/js/app.js', 'public/js')
  .webpackConfig({
      resolve: {
          modules: [
              path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js'),
              'node_modules'
          ],
          alias: {
              'vue$': 'vue/dist/vue.js'
          }
      }
  });

Any thoughts/suggestions? Much obliged.

[Cmarenburg]

I had this exact same issue! I installed Yarn globally and everything worked well, why? I have no clue, but try that

[ahuggins]

+1 Experiencing this as well!! Tried to use yarn, yarn run dev same problem

yarn: 1.3.2 npm: 5.5.1 node: 9.1.0 tailwind: 0.1.6

app.less: (pretty much the base Spark one, but trying to add @tailwind stuff

@import "./../../../node_modules/bootstrap/less/bootstrap";

// @import "./spark/spark";
@import "./../../../vendor/laravel/spark/resources/assets/less/spark";

@tailwind preflight;

@tailwind utilities;

[ahuggins]

package.json:

 "dependencies": {
    "axios": "^0.15.2",
    "bootstrap": "^3.0.0",
    "cross-env": "^3.2.3",
    "jquery": "^2.1.4",
    "js-cookie": "^2.1.0",
    "laravel-mix": "0.*",
    "moment": "^2.10.6",
    "promise": "^7.1.1",
    "sweetalert": "^1.1.3",
    "tailwindcss": "^0.1.6",
    "underscore": "^1.8.3",
    "urijs": "^1.17.0",
    "vue": "2.*"
  },
  "devDependencies": {}
}

No customizations to tailwind.js either

[ahuggins]

Laravel 5.5 Spark 5.0.1

Also, did a fresh install of Laravel 5.5, NO SPARK, was able to follow the installation instructions with no problems at all, so there is something in the Spark config or setup, that is causing an issue...or I am thinking that is what is going on since the instructions worked correctly and pretty much only difference is Spark.

Spark uses Less for styles, where regular Laravel comes with Sass, anyone think that might have something to do with it? I will point out that I was using the Less instructions for my Spark install, and using the Sass instructions for this new standard Laravel install.

[coroin]

I tried the Less instructions on the tailwind page, but my experience was same as yours, Andrew.

Perhaps there is one more step or trick needed to make spark play nicely with tailwind.

[ahuggins]

The error message lead me to look at the function that "replaces" the directive with the actual code: https://github.com/tailwindcss/tailwindcss/blob/master/src/lib/substitutePreflightAtRule.js

From the error, it looks like the code in these lines: https://github.com/tailwindcss/tailwindcss/blob/master/src/lib/substitutePreflightAtRule.js#L8-L10

atRule.before(
          postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8'))
        )

The error says that .before is not a function. Which from the postcss site: http://api.postcss.org/AtRule.html Looks to be correct. Maybe there is a different version of postcss that is being installed when Spark is installed?

[ahuggins]

Looking at Tailwind in node_modules in Spark install, says "postcss": "^6.0.9", but then when I go to postcss in node_modules it's version is "version": "5.2.18",

This might be our issue

[ahuggins]

@coroin Can you confirm a similar situation in your Spark install as my previous comment? Thanks in advance!

[ahuggins]

Or maybe not...looks like npm installs versions of packages that a package needs in its own node_modules folder. Looking in Spark app/node_modules/tailwindcss/node_modules/postcss the version is 6.0.14

[coroin]

yes, confirmed ... my postcss version in package-lock.json is 5.2.18, same as yours

there is no specific install requested in package.json, so maybe we need to install postcss explicitly?

[ahuggins]

Maybe, tried that, still getting the same thing...but I do think it is related to the version of postcss, I just can't quite figure out which one is being used.

[adamwathan]

You want the newer version of PostCSS; try manually adding that version. If we don’t currently list it as a dependency that’s a big whoopsie, I’ll check into that. On Thu, Nov 9, 2017 at 6:19 PM Andrew Huggins notifications@github.com wrote:

Maybe, tried that, still getting the same thing...but I do think it is related to the version of postcss, I just can't quite figure out which one is being used.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tailwindcss/discuss/issues/39#issuecomment-343324202, or mute the thread https://github.com/notifications/unsubscribe-auth/AEH3bE6OaoNg-5QQbDKSj7nFp8KanHanks5s04iYgaJpZM4QVTwL .

[ahuggins]

Was able to get passed the atRule issue, the version of postcss-loader was out of date as well, so that packages postcss in its node_modules folder was the v5.x.x, so I did npm install postcss-loader@2.0.8 (latest version for that package...and now get No PostCSS Config found

[ahuggins]

@adamwathan Which version of postcss-loader do you have?

[ahuggins]

Hmmm...Thinking it might be something with sweetalert, which an older version is installed by Spark and then its package.json requires old postcss packages, https://github.com/t4t5/sweetalert/blob/master/package.json#L56-L60

[Cmarenburg]

Hey there, I installed postcss-load-config, added a postcss.config.js in the directory off the file (in my case it was a folder named less) and everything works. Kinda hacky...The config file just contains module.exports = {};

for reference this what my mix file looks like `let mix = require('laravel-mix'); var path = require('path');

var tailwindcss = require('tailwindcss');

mix.js('resources/assets/js/app.js', 'public/js') .less('resources/assets/less/base.less', 'public/css/dev/') .options({ postCss: [ tailwindcss(require('./tailwind')) ] }) .webpackConfig({ resolve: { modules: [ path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js'), 'node_modules' ], alias: { 'vue$': 'vue/dist/vue.js' } } }) .version();`

and what my package.json looks like

{ "private": true, "scripts": { "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "dependencies": { "axios": "^0.15.2", "bootstrap": "^3.0.0", "cross-env": "^3.2.3", "jquery": "^2.1.4", "js-cookie": "^2.1.0", "laravel-mix": "0.*", "moment": "^2.10.6", "postcss-load-config": "^1.2.0", "postcss-loader": "^2.0.8", "promise": "^7.1.1", "sweetalert": "^1.1.3", "tailwindcss": "^0.1.3", "underscore": "^1.8.3", "urijs": "^1.17.0", "vue": "^2.5.3" }, "devDependencies": {} }

have you tried to add a postcss.config.js

[ahuggins]

I tried similar, it compiles, but if you look in your public/css/app.css file, does it have the @tailwind preflight; ?? Mine does. Which means it compiles, but doesn't actually bring the TailwindCss into your css. But maybe yours does?

[Cmarenburg]

Yeah, No I just tried recompiling and I'm getting the @tailwind preflight and such. Humm.

[ahuggins]

Welp, tried doing everything again on a fresh install of Laravel, works fine, try adding Spark, and things break as described above. Giving up on it for the night. If anyone makes some progress, please post!! This stuff looks great and would love to add it to Spark installs.

[adamwathan]

The fix is just to update Laravel Mix.

# Using npm
npm install laravel-mix@^1.6

# Using Yarn
yarn add laravel-mix@^1.6

[ahuggins]

@adamwathan THANK YOU!!! That gets it working.

[ricardovegamx]

I'm using Laravel Mix outside Laravel and tried to pull Tailwind. I was getting this issue and I can confirm that updating Mix as @adamwathan said works fine.

[tnorthcutt]

Sounds like upgrading Laravel Mix fixes this; perhaps this issue could be closed now?

[iantasker]

I have created a Laravel Spark Preset for tailwindcss, (https://github.com/centrality-labs/spark-tailwindcss) in case anyone needs it in future.