gregwolanski / eleventy-tailwindcss-alpinejs-starter Goto Github PK
View Code? Open in Web Editor NEWAs little code as possible. Learn more: https://css-tricks.com/eleventy-starter-with-tailwind-css-alpine-js/
License: MIT License
As little code as possible. Learn more: https://css-tricks.com/eleventy-starter-with-tailwind-css-alpine-js/
License: MIT License
Example with about.njk
page about is still looking for and of course this is broken.
➜ _site git:(edge) ✗ tree
.
├── about
│ └── index.html
├── img
│ └── firepress-org-tag-article-v1.jpg
├── index.html
├── js
│ └── alpine.js
└── style.css
Hey, great work on this starter.
Would it be possible for you to switch on the "Template repository" option in the settings?
That would mean that users get a "Use this template" button on GitHub
First of all, thanks for your article on CSS Tricks and thanks for contributing an Eleventy Starter. I enjoyed walking through the process and I learned quite a bit walking through the code.
I have a working CodePen that pulls in Alpine (2.4.1), Tailwind and TailwindUI. It works just fine and can be viewed here:
https://codepen.io/sethlbrown/pen/eYYqxQB or in debug mode if you want to see just the working version without codepen's UI: https://cdpn.io/sethlbrown/debug/eYYqxQB
When I try to include just the header that I wrote in my Eleventy build's default.njk, I'm able to view the page.
npm run start
works without throwing any errors. However, all of the hover behaviors and the behaviors driven by Alpine.js no longer work in the Eleventy version. I'm able to see that the window.Alpine object exists and it's using version 2.4.1. It's the same version that the CodePen is using. Furthermore, I'm able to click through in the source and see that there's a minifed copy of Alpine.
There's was one Console error that seemed meaningful:
Source map error: Error: request failed with status 404
Resource URL: http://localhost:8080/js/alpine.js?v=1594581372158
Source Map URL: alpine.js.map
I thought adding the following to my .eleventy.js file might help:
eleventyConfig.addPassthroughCopy({
"./node_modules/alpinejs/dist/alpine.js.map": "./js/alpine.js.map",
});
It resolved the error but didn't get the behaviors on the site working.
I'm a rank beginner so I'm not clear from the docs what SourceMap has to do with getting Alpine to work in this context, but I wonder if there might be something missing in the provided .eleventy.js or postcss.config.js file? Again, not sure, but would appreciate your help.
I added my own tailwind.config.js file and that could also be the issue.
I set up a repository in case you want to take a look. There are only two commits on top of the starter.
Thanks for any help you can provide.
I think on Windows, and potentially other environments, eleventy --serve
never actually returns so npx tailwindcss
never executes.
On windows and have the cross env stuff setup.
When running npm run start
there are no errors, but the style.css doesn't end up in the _site folder.
The build works fine.
Hi Greg,
Thanks for putting this together.
I'm new to this, so apologies if the answer to this problem is obvious (I tried searching online but couldn't find anything).
I just downloaded the repo to my computer and am getting this error when running 'npm run build':
'ELEVENTY_PRODUCTION' is not recognized as an internal or external command,
operable program or batch file.
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build:ELEVENTY_PRODUCTION=true eleventy & NODE_ENV=production postcss styles/tailwind.css --o _site/style.css
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Any idea why?
Sorry if this is a silly question!
Thanks.
➜ my-website-name git:(master) npm run build
> @ build /Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/gregwolanski:eleventy-tailwindcss-alpinejs-starter/my-website-name
> ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production postcss styles/tailwind.css --o _site/style.css && cleancss _site/style.css -o _site/style.css
sh: eleventy: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @ build: `ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production postcss styles/tailwind.css --o _site/style.css && cleancss _site/style.css -o _site/style.css`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/p_andy/.npm/_logs/2021-01-03T21_06_14_594Z-debug.log
➜ my-website-name git:(master) npm run start
> @ start /Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/gregwolanski:eleventy-tailwindcss-alpinejs-starter/my-website-name
> eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch
sh: eleventy: command not found
TypeError: Invalid PostCSS Plugin found at: plugins[1]
(@/Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/gregwolanski:eleventy-tailwindcss-alpinejs-starter/my-website-name/postcss.config.js)
at /usr/local/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/plugins.js:72:15
at Array.forEach (<anonymous>)
at plugins (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/plugins.js:58:13)
at processResult (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/index.js:33:14)
at /usr/local/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/index.js:94:14
at async Promise.all (index 0)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/p_andy/.npm/_logs/2021-01-03T21_06_28_673Z-debug.log
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.