11ty - Tailwind "JIT" (Just In Time) CSS starter

The nifty thing about this Tailwind "JIT" starter for Eleventy is that you can see your changes take effect while you type into your templates, making it much easier to ask yourself, "How would it look if I changed mx-2 to mx-4?" when you're totally new to Tailwind and can't imagine it all from memory.

(You might have to play with /src/tailwind/tailwind.config.js if you're using, say, .11ty.js templates, so as to add them to the "watched" files.)

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.

Known issues

Issue 1

Every once in a while, particularly as you start overwhelming Tailwind JIT with things like plugins and a larger template codebase, your changes might stop taking effect on the screen served by your running development server (you can see that things stop getting freshly written out to /dist/tailwindoutlive.css).

Solution 1

Restart your server once or twice. Now that Tailwind JIT builds quickly, rather than taking up to a minute like legacy Tailwind, you should be fine, other than it being a bit of a nuisance.

Issue 2

Tailwind seems to be sensitive to the value of the NODE_ENV environment variable, and this might not work w/ null values for that variable.

Solution 2

Make sure to adjust your build process to set it to production or development appropriately. You might do this through package.json if you're running simple commands.

Personally, I enjoy the environment-variable injection of built-site-hosting CLI tools like the Netlify CLI (which makes use of server-stored environment variable values, values set in netlify.toml, and, while running netlify dev, values set in .env files on your local machine), and keeping my package.json files clean.

I prefer the CLI tool approach because I typically code on a Windows machine but deploy to a Linux machine, which I find messy to code package.json around.

Live example

See this site live on Netlify

Build your own theme

You don't really need this "starter" to play with 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",
    "cross-env": "latest",
    "postcss": "latest",
    "postcss-cli": "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.

Postscript

I sort-of did a Gatsby Tailwind JIT starter as well. Maybe one day I'll make a proper starter, rather than just bolting Tailwind JIT onto an old project, but I'm pretty mediocre at React, so maybe I won't.