Skip to content
A running start for JAMstack projects with Eleventy, TailwindCSS and some Netlify goodies
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src The first of a million typo fixes Jan 1, 2020
.eleventy.js Update .eleventy.js Jan 17, 2020
.gitignore restructure Jan 1, 2020
README.md Merge pull request #1 from DirtyF/patch-1 Jan 13, 2020
eleventail-screenshot.jpg added scfreenshot Jan 2, 2020
netlify.toml restructure Jan 1, 2020
package-lock.json Initial commit Jan 1, 2020
package.json fixes and links Jan 1, 2020
postcss.config.js Initial commit Jan 1, 2020
tailwind.config.js

README.md

ElevenTail

A project scaffold for quickly starting a site build with:

  • Eleventy for templates and site generation
  • Tailwindcss for a utility first CSS workflow
  • PurgeCSS for optimizing CSS output
  • UglifyJS for a simple JS build pipeline
  • Netlify CLI for Netlify dev pipeline and local replication of prod environment

Deploy to Netlify

Example

Netlify Status

https://eleventail.netlify.com

Prerequisites

Running locally

# install Netlify CLI globally
npm install netlify-cli -g

# install the project dependencies
npm install

# run the build and server locally
netlify dev

Previewing the production build

When building for production, an extra build step will strip out all CSS classes not used in the site. This step is not performed during the automatic rebuilds which take place during dev.

# run the production build
npm run build

Styling with TailwindCSS

This site uses TailwindCSS to offer utility CSS classes and provide a rapid means to styling the site. This means that most styling can be done without writing any additional CSS. Instead, utility classes can be added directly to the HTML. This may not be to everyone's tastes, but it can provide some very rapid development and also offer surprising levels of familiarity for those used to working in this way (since the conventions and classes are not per site.)

While running/developing locally, the npm run start command will recompile the site as files are saved and this includes the CSS pipeline from Tailwind.

Global CSS utilities.

A small number of bespoke CSS rules are provided for efficiency of repeated or global classes. These reside in src/site/_includes/css/tailwind.css

Just clone and go

You can also get started with your own copy of this site cloned to your GitHub account and deployed to Netlify with a configured CI/CD pipeline and HTTPS by clicking the button below and following the instructions.

Deploy to Netlify

You can’t perform that action at this time.