tailwindcss + laravel-spark about discuss HOT 24 OPEN

The fix is just to update Laravel Mix.

# Using npm
npm install laravel-mix@^1.6

# Using Yarn
yarn add laravel-mix@^1.6

from discuss.

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

from discuss.

+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;

from discuss.

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

from discuss.

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.

from discuss.

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.

from discuss.

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?

from discuss.

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

from discuss.

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

from discuss.

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

from discuss.

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?

from discuss.

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.

from discuss.

from discuss.

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 [email protected] (latest version for that package...and now get No PostCSS Config found

from discuss.

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

from discuss.

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

from discuss.

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

from discuss.

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?

from discuss.

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

from discuss.

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.

from discuss.

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

from discuss.

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.

from discuss.

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

from discuss.

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

from discuss.