marcamos / jet

It‘s (j)ust (e)leventy and (t)ailwind … OK, and a few other things; it‘s still *really* small though.

jet 🛩

It’s (j)ust (e)leventy and (t)ailwind … OK, and a few other things; it’s still really small though.

• View on Netlify
• View on GitHub

Goal

Eleventy and Tailwind CSS are my favorite things right now.

While learning how to use Eleventy, I came across a few starter projects that combine it with Tailwind CSS, which is amazing, but they also come with so much more.

Personally, I only want Eleventy and Tailwind … and, taking the desire for simplicity one step further, I only want to use them via NPM scripts.

So, I made this and it seems to work 🤷‍♀️

How you can use it

1. Create your own new repo from jet’s template, or clone this one
2. Install dependencies: npm i
3. Start development: npm run dev
4. Visit http://localhost:8080 to see your work-in-progress
5. Do super-fun Eleventy and Tailwind things
6. When you’re done: npm run build
7. Host your project somewhere (Netlify and Vercel are nice options)

That’s it 🕺

A Note on Eleventy v2.x

As of February 17th, 2023, jet has been updated to utilize Eleventy v2.x. If you want to upgrade your project from Eleventy v1.x to v2.x, there’s a a helper plugin.

A Note on Eleventy v1.x

As of January 12th, 2022, jet has been updated to utilize Eleventy v1.x. If you want to upgrade your project from Eleventy v0.x to v1.x, there’s a a helper plugin.

A Note on Tailwind CSS v3.x

As of December 10th, 2021, jet has been updated to utilize Tailwind CSS v3.0. If you want to upgrade your project from Tailwind CSS v2.x to v3.x, the Tailwind folks have a wonderful Upgrade Guide you should review.

A Note on Tailwind CSS v2.x

As of November 25th, 2020, jet has been updated to utilize Tailwind CSS v2.0. If you want to upgrade your project from Tailwind CSS v1.x to v2.x, the Tailwind folks have a wonderful Upgrade Guide you should review.

Disclaimer

I originally built this in about an hour through trial-and-error, so I'm sure there's a lot of room for improvement.

If you try it and find issues, or think of improvements, please file an issue and/or create a pull request.

jet's Issues

Recent change to npm scripts produces date issues

cc @ryanccn

Something in #12 had a negative side-effect when ported to my personal blog (private repo) where, upon running npm run build, the files copied to /public all have today's date, rather than the date the /src file was created.

I'm going to investigate and attempt to fix there, first, then back-port the fix here to jet.

Improve readme

The README could benefit from mentioning what can/should be done after running the build command. For example, host it somewhere, etc.

Consider / apply Dependabot auto-merge Action

via https://github.com/marketplace/actions/dependabot-auto-merge

👋 Great project!

Hey there, I'm Ryan Cao

https://twitter.com/marcamos/status/1296459347774627843

I really like how it's just 11ty and Tailwind CSS without Webpack or some other whatnot

And it's more optimized than my approach in the tweet

Thanks 😉

3 Vulnerabilities after installing jet

3 Vulnerabilities after installing jet

after running: npm i there is a notice in terminal: (SEE SCREENSHOT)

---

Running: "npm audit fix" does not resolve.

bump tw to v 1.5.2 please and thank you :)

Why this should be done:

• Allows new tw components to work correctly.
• Resolves previous npm vulnerabilities from tw previous version. (just run npm audit to see its all fixed).

How this can be done:

• Wont take more than a minute to do: find the info here in the tailwind ui documentation.

Getting an error after installing running npm run dev

I downloaded the project ran "npm i" then "npm run dev" and got this

`dan.levin@Dan-Levins-MacBook-Pro-2 jet-master % npm run dev

[email protected] dev /Users/dan.levin/Sites/jet-master
npm run clean && postcss src/css/tailwind.css > src/css/styles.css && eleventy --serve

[email protected] clean /Users/dan.levin/Sites/jet-master
rm -rf public src/css/styles.css

TypeError: Object.entries(...).flatMap is not a function
at flattenColorPalette (/Users/dan.levin/Sites/jet-master/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)
at /Users/dan.levin/Sites/jet-master/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53
at plugins.forEach.plugin (/Users/dan.levin/Sites/jet-master/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)
at Array.forEach ()
at _default (/Users/dan.levin/Sites/jet-master/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
at /Users/dan.levin/Sites/jet-master/node_modules/tailwindcss/lib/processTailwindFeatures.js:60:54
at LazyResult.runOnRoot (/Users/dan.levin/Sites/jet-master/node_modules/postcss/lib/lazy-result.js:303:16)
at LazyResult.runAsync (/Users/dan.levin/Sites/jet-master/node_modules/postcss/lib/lazy-result.js:355:26)
at LazyResult.async (/Users/dan.levin/Sites/jet-master/node_modules/postcss/lib/lazy-result.js:205:30)
at LazyResult.then (/Users/dan.levin/Sites/jet-master/node_modules/postcss/lib/lazy-result.js:190:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: npm run clean && postcss src/css/tailwind.css > src/css/styles.css && eleventy --serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.`

Thanks!

Thanks for putting this together - was literally about to roll my own as the starters are usually pretty crufty, but this is perfect.

Not sure if i'm being stupid - Tailwind issue

I'm not sure if I'm missing something obvious from the config, however, should altering .css files recompile tailwind without having to restart the npm task?

Error on npm run dev

I've tried using jet as a template and by cloning it, and in both cases I get an error on npm run dev. I'm following the steps in the readme. I saw #33 (comment) and thought I might be having the same problem, but on closer inspection it's a different error. I'm on node 14.16.0. Let me know if there's any other information I can provide. Thanks!

C:\Users\Lee\Documents\Dev\jet>npm run dev

> [email protected] dev C:\Users\Lee\Documents\Dev\jet
> npm run clean && postcss src/css/tailwind.css > src/css/styles.css && eleventy --serve

> [email protected] clean C:\Users\Lee\Documents\Dev\jet
> rm -rf public src/css/styles.css

'rm' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] clean: `rm -rf public src/css/styles.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] clean 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!     C:\Users\Lee\AppData\Roaming\npm-cache\_logs\2021-03-06T02_52_28_894Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `npm run clean && postcss src/css/tailwind.css > src/css/styles.css && eleventy --serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev 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!     C:\Users\Lee\AppData\Roaming\npm-cache\_logs\2021-03-06T02_52_28_922Z-debug.log

Improvements / Feature Requests

Improvements / Feature Requests

Concat/Minification to all added js & css files.

• Once you start mixing in fadable, custom web fonts, gsap etc, it would be cool if that was all minified/concatenated similar to how the css file is currently processed when we run the dev or build.

Update to Tailwind 2.x

Spend a little time with it, first, and if everything's smooth and simple, update to it.

Upgrade Eleventy to v2

https://github.com/11ty/eleventy/releases/tag/v2.0.0

autoprefixer?

The Tailwind CSS docs recommends using autoprefixer with PostCSS...

Would that be too much?

Enable use as a GitHub "template"

Cool project, it would be useful if it was a template so that creating a new GitHub repo based on it is just 1 click away.

Build is slow

Hello,

First, thank your for that setup, it is very helpful and made me kickstart my website very quickly.

Now I do not understand why we need that code:

  eleventyConfig.on('eleventy.after', async () => {
    console.log('Building Tailwind…');
    console.log(execSync('npm run build:tailwind').toString());
  });

It makes eleventy unresponsive when making changes.

I just removed it and everything seems fine, since the dev script calls the tailwind build anyway: npm-run-all clean --parallel dev:*. I just had to add build:tailwind in the build script, as in NODE_ENV=production npm-run-all clean build:eleventy build:tailwind.

And all is fine. Tthe build seems correct and changes to the markdown or templates are immediately refreshing the page in the browser.

Am I missing something here?

Thank you!