Jekyll Tailwind integration — conversion error on build

Help
1

Hello everyone.

I am trying to integrate Tailwind with Jekyll and deploy to Netlify and I’m a little bit stuck.

After setting Node and Jekyll to production in the netlify.toml file at root in order for unused CSS to be purged, I am getting the following error:

4:19:19 PM: Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'css/main.scss':
4:19:19 PM: 809: unexpected token at ''
4:19:19 PM: /opt/buildhome/.rvm/rubies/ruby-3.0.1/lib/ruby/3.0.0/json/common.rb:216:in `parse': 809: unexpected token at '' (JSON::ParserError)

Full build log available here: Netlify App

The package.json file is using dependencies not devDependencies - I noticed this was required if setting NODE_ENV to production.

The only thing in the main.scss file outside of front matter without anything in it is:

@import “tailwindcss/base”;
@import “tailwindcss/components”;
@import “tailwindcss/utilities”;

I have asked Netlify about this but I thought it might be worth asking here also.

Thanks

2 
$ bundle exec jekyll build --trace
11:19:18 PM: Configuration file: /opt/build/repo/_config.yml
11:19:18 PM:             Source: /opt/build/repo
11:19:18 PM:        Destination: /opt/build/repo/_site
11:19:18 PM:  Incremental build: disabled. Enable with --incremental
11:19:18 PM:       Generating...
11:19:19 PM: /opt/build/repo/node_modules/acorn/dist/acorn.js:2929
11:19:19 PM:     throw err
11:19:19 PM:     ^
11:19:19 PM: SyntaxError: Unexpected token (3:11)

this sort of looks like you did not exclude the node_modules folder in the config? I don’t think jekyll should be looking in there. I kinda thought it was excluded by default though.

3

Why don’t you try take out the lines in main.scss until the error goes away, the you know which one of those is causing the error?

4

Indeed, you normally don’t want to process all files in node_modules.

But I guess part of how tailwind works is that is looks in node_modules to prepare JS for the output of the site. I don’t know a PostCss step is looking in a .js file though.

Can you check the syntax in your JSON configs? Like a webpack or package.json or something. Maybe the syntax there is the issue and not the SCSS file.

Also note you’re using Node 16.0.0 in that build, so maybe something unstable going on there.

5

You can also try a different project and see if the problem is specific to your project.

e.g. fork this template I found and deploy it to Netlify

And then, from a working state, gradually change the dependencies in package.json and Gemfile until they match yours, or something breaks and you know exactly what caused the break

6

Success!

Thanks @MichaelCurrin and @rdyar but the problem was something else unexpected.

Somewhere along the way trying to get this thing to purge unused styles I ended up adding in PurgeCSS – after messing around with your suggestions @MichaelCurrin I decided to just rip that out of the Gemfile and _config.yml and away it went with CSS purged and all.

For anybody else that stumbles across this issue, skip over PurgeCSS you don’t need it and remember to set your NODE_ENV to production in your netlify.toml file at the root level of your repo but remember that when you do, devDependencies will be ignored in your package.json file – change this to dependencies.

Hopefully this helps someone else that wants to use Tailwind, Jekyll and Netlify.

1 Like