Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kkgthb/11ty-tailwind-jit

Try editing some Tailwind in this repo while running in dev. It's SO FAST!
https://github.com/kkgthb/11ty-tailwind-jit

11ty eleventy jamstack static-site-generator tailwindcss

Last synced: about 1 month ago
JSON representation

Try editing some Tailwind in this repo while running in dev. It's SO FAST!

Awesome Lists containing this project

README

        

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

The nifty thing about this [Tailwind "JIT"](https://github.com/tailwindlabs/tailwindcss-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](https://www.darrik.dev/) 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](https://www.mikeallanson.com/) 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](https://11tytailwindjit.netlify.app/)

## Build your own theme

You don't really need this "starter" to play with Tailwind. Just grab these files:

1. [/src/_data/tailwindcss.js](https://github.com/kkgthb/11ty-tailwind-jit/blob/main/src/_data/tailwindcss.js)
2. [the 2 files under /src/tailwind](https://github.com/kkgthb/11ty-tailwind-jit/tree/main/src/tailwind)
* _(you should probably change the config to be a little more specific to your use of Tailwind)_
3. [/src/postcss.config.js](https://github.com/kkgthb/11ty-tailwind-jit/blob/main/src/postcss.config.js)
4. [/utils/postcss.js](https://github.com/kkgthb/11ty-tailwind-jit/blob/main/utils/postcss.js)

Your `package.json` will need a few dependencies:

```json
{
"@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:

```js
// 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](https://github.com/kkgthb/web-site-gatsby-07-tailwind-jit) 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.