Salesforce, Python, SQL, & other ways to put your data where you need it

Need event music? 🎸

Live and recorded jazz, pop, and meditative music for your virtual conference / Zoom wedding / yoga class / private party with quality sound and a smooth technical experience

Tailwind JIT starter for 11ty (play fast!)

19 Mar 2021 🔖 jamstack web development
💬 EN

Check out my 11ty starter for Tailwind Just-In-Time (JIT). It’s a FAST editing experience. See it here.

Darrik’s architecture for 11ty Tailwind still works, but the JIT details here are outdated. I’ll update the repo when I get a chance to actually test my edits, but note that now you just install the normal Tailwind Node package, point your custom 11ty JS at normal Tailwind, point postcss.config.js to normal Tailwind, & enable JIT mode through tailwind.config.js.

Not sure what changing an mt-4 to mt-8 will look like in your Eleventy project, because you’re a new front-end developer and you really don’t have all that memorized? No more restarting your development server just to find out.

And thanks to Tailwind JIT’s improved speed over traditional tailwind, no more waiting half a minute to a minute to build your output CSS File.

  • Many thanks to Darrik Moberg for the code on which this is modeled, and for all the debugging help adapting it to Tailwind JIT. I can’t really take credit for this code – just for stripping it down to a starter.
  • Thanks also to Mike Allanson for additional troubleshooting.

Homework

Be sure to edit the theme file /src/_includes/components/banner.liquid and change all occurrences of bg-indigo to bg-green while running 11ty on a live development server.

Watch your page change instantly before your eyes.

Tailwind is recompiling your CSS file behind the scenes, so it’s kind of a big deal for it to run this fast.

Build your own theme

You don’t really need this “starter” to play w/ Tailwind. Just grab these files:

  1. /src/_data/tailwindcss.js
  2. the 2 files under /src/tailwind
    • (you should probably change the config to be a little more specific to your use of Tailwind)
  3. /src/postcss.config.js
  4. /utils/postcss.js

Your package.json will need a few dependencies:

{
    "@11ty/eleventy": "latest",
    "@tailwindcss/jit": "latest",
    "autoprefixer": "latest",
    "postcss": "latest",
    "postcss-cli": "latest",
    "sass": "latest",
    "tailwindcss": "latest"
}

And your .eleventy.js config could use a little help:

  // Sometimes handy for making sure your browser refreshes the CSS
  eleventyConfig.addShortcode("version", function () {
    return String(Date.now());
  });
  // Apparently this, on top of the PostCSS pruning options watching 11ty, helps 11ty watch Tailwind or something.
  eleventyConfig.addWatchTarget("./dist/tailwindoutlive.css");

Sprinkle them into any starter and … ta-daaaa! It’s a Tailwind starter.

Stackbit idea

I haven’t quite gotten it working yet (reaching out to the team), but it occurred to me that with Stackbit’s new “code” editor, theoretically, you could totally cheat and use their in-preview code editor as a development environment if you don’t want to take the time to install Node.js on your own local machine just to see this in action.

I’ll edit this post if I get it working.

Gatsby

I made a sort of Gatsby Tailwind JIT starter, too. Sort of. It’s just an old project I added onto. But it works equally well.

--- ---