The recommended way is to install Tailwind as a PostCSS plugin. If you use Tailwind via a CDN you lose a lot of features that makes Tailwind great, like customization, third party plugins, etc. I had difficulties with the cache when building multiple CSS files, so I decided to use PostCSS directly. I really love Tailwind CSS and I wanted to integrate it into my next Jekyll project, but I struggled using the jekyll-postcss plugin. This will be the only file we need to edit.Tailwind CSS is a utility-first CSS framework that provides a deep catalog of CSS classes that you can use directly in your HTML instead of writing loads of CSS. As we want to change what we output, we’ll need to edit this. I’ve used a figure.html include to generate figure, img and figcaption HTML for many years. Use includes to generate your picture HTML # Default transforms `image.png` to `image.webp`, while changing to true transforms `image.png` to ``ģ. # append '.webp' to filename after original extension rather than replacing it. custom or hand generated webp conversion files # List of files or directories to exclude # Omit or leave as nil to use the utilities shipped with the gem, override only to use your local install # Local path to the WebP utilities to use (relative or absolute) # Set to true to always regenerate existing webp files # add ".gif" to the format list to generate webp for animated gifs as wellįormats: # Whether to search in nested directories or not
# By default the generator will search for a folder called `/img` under the site root and process all jpg, png and tiff image files found there. # List of directories containing images to optimize, nested directories will only be checked if `nested` is true # The quality of the webp conversion 0 to 100 (where 100 is least lossy) Unfortunately, this doesn’t seem to make any difference to the webp filename ??♂️. For example, instead of outputting a new file called image.webp I wanted, as this would make the next stage simpler. I also wanted to change the append_ext setting to true so that the plugin appended webp to the filenames it outputs. In my case, this is in an imaginatively named /images folder (keep the preceding slash)
If you have a Jekyll website with hundreds of posts and images in jpg format, you’re not going to retrospectively create new webp files and then update your HTML.