search

daflh / eleventy-plugin-tailwindcss

An Eleventy plugin to add Tailwind CSS support for your website
MIT License
31 stars 9 forks source link

Missing styles after Netlify deploy. #22

Closed kylesloper closed 3 years ago

kylesloper commented 3 years ago

Styles look normal on Netlify dev (locally) however after deploy there is no styling. My build command is npm run build.. is this the correct config for this plugin?

image

daflh commented 3 years ago

Is the CSS file exist? If not, maybe you added CSS file to .gitignore

kylesloper commented 3 years ago

I've downloaded the deploy from Netlify and it seems that the entire css directory is missing. Is there a common reason for this?

daflh commented 3 years ago

Can I see your package.json content?

kylesloper commented 3 years ago

{ "name": "redacted", "title": "redacted", "version": "1.0.3", "description": "redacted", "scripts": { "build": "npx eleventy", "watch": "npx eleventy --watch", "debug": "DEBUG=* npx eleventy" }, "repository": { "type": "git", "url": "redacted" }, "author": { "name": "redacted", "email": "redacted", "url": "redacted" }, "license": "MIT", "bugs": { "url": "redacted" }, "devDependencies": {}, "dependencies": { "@11ty/eleventy": "^0.11.1", "@11ty/eleventy-navigation": "^0.1.6", "clean-css": "^4.2.1", "eleventy-plugin-tailwindcss": "^0.3.0", "html-minifier": "^4.0.0", "luxon": "^1.26.0", "markdown-it": "^10.0.0", "markdown-it-anchor": "^5.3.0", "netlify-cli": "^3.16.2", "uglify-es": "^3.3.9" } }

daflh commented 3 years ago

Hmmm, maybe do you have any public repository with the same issue that I can take a look at? Because I can't reproduce.

kylesloper commented 3 years ago

This is the repo with that issue, I've given you access.

https://github.com/moonfacedesign/moonface/

daflh commented 3 years ago

Wait, are you sure styles look normal on local env? The CSS messed up when I try to run netlify dev

kylesloper commented 3 years ago

Yeah styles are completely fine on local. I did reset the repo to before I was messing around trying to fix the issue shortly after I added you, is it possible you've cloned the old one?

daflh commented 3 years ago

But this https://i.ibb.co/nLLggVJ/1618142123061.png doesn't look fine, the correct branch is "v1" right?

kylesloper commented 3 years ago

Yeah that's the correct branch. That's strange styles are looking okay in my local build.

image

daflh commented 3 years ago

Well, that's weird. Give me a screenshot of the view-source please, maybe something's different.

kylesloper commented 3 years ago

Not too sure how to screenshot it, it's a very long file. Do you want me to copy paste instead?

daflh commented 3 years ago

I mean just the \<head> part, but okay copy paste is fine, but don't paste here, use Pastebin then send the link here

kylesloper commented 3 years ago

https://pastebin.com/tUet4eAG

daflh commented 3 years ago

Do you disable Tailwind "jit" mode locally?

kylesloper commented 3 years ago

No I did not.

kylesloper commented 3 years ago

I have disabled that and pushed. Netlify deploy still showing no styles coming from tw.css

daflh commented 3 years ago

Send the Netlify deploy log here using Pastebin, I will take a look

kylesloper commented 3 years ago

https://pastebin.com/SdvBVvBt

daflh commented 3 years ago

I see, so Netlify is using Node v10.24.1, but there's a code using flatMap which is only available in Node > v11.0.0. Add .nvmrc to your repo with the contents of v12 and it should work fine. Read more.

kylesloper commented 3 years ago

Unfortunately no fix yet, this time the tw.css file is processed but only contains this. https://pastebin.com/D2s33krR

It's weird because it has partially generated my styles from tw.css

daflh commented 3 years ago

I see you're enabling back the "jit" mode in the latest commit, if you wanna do that, you need to set the purge property with the template files path.

daflh commented 3 years ago

For example:

module.exports = {
  purge: [
    './**/*.njk'
  ],
  darkMode: false, // or 'media' or 'class'
  mode: 'jit',
...

See https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode

kylesloper commented 3 years ago

Thank you so much for your time, it's working perfectly now. Great plugin btw ❤

daflh commented 3 years ago

Good to hear that. Can I close this issue?

kylesloper commented 3 years ago

Of course :))