Skip to main

What You Need #

  • NPM (node package manager)
  • CLI (command line interface)
  • 11ty (this is an excellent article to read)

Installing, using and some hangups. #

Watch this video and follow the instructions very carefully

The biggest part that tripped me up was the clean instruction in the package.json file. rm rf. These commands don’t exist for Windows. The equivalent code is rmdir /s /q. Now the problem is while this is will work fine on your windows laptop, it will not run on Netlify. I don’t have a good solution to this. The clean instruction basically deletes the directory (output fold) so 11ty can recreate one every time you build your site. My current solution is to just manually delete the file once in a while.

Thoughts on Tailwind #

So a while ago I had a very dumb opinion

But Twitter is filled with good people

Although I’ve dabbled with coding since 2013 on Tumblr, I’ve never truly given the craft of web design much thought beyond the superficial “let’s make things look nice”. I lamented about beauty over functionality in 2019 but didn’t do much. Sort of threw up my hands with a nice 🤷‍♀️ what can ya do? . This all changed during the beginning of the pandemic. Cassie, Tatiana Mac and Dan Spratling all have beautiful and accessible blogs. So both is possible.

How does this relate to Tailwind? The argument I made against using it was that it was basically like inline CSS. This is not true. Let’s look at an example:

Inline:

<div style="margin-bottom: 8px; padding-top: 8px">
           </div>

Tailwinds Class:

<div class="mb-6 pt-8">
    
</div>

Tailwinds is clearly shorter.

In the case of accessibility I’ve noticed many (Tailwinds, Bootstrap, and Bulmer) don’t really emphasize the importance of semantic HTML. I think because of this people often over use divs when they should be using <article>, <section>, <nav> to name a few. Thus they expect classes to do the heavy lifting of ordering a web page.

How to organize the design of the page seems to be a heated discussion on the IOT.I think the whole utilities vs components choice is too binary. Why not both?

Using TailwindCSS made me think more intentionally about my HTM and CSS. In college physics we were taught to write our Matlab code to be understood (I was not good at this because I was neither good at physics or Matlab) . The same should be done for web code.

Anyway now that I’ve used Tailwind this is I think a good work method:

  1. Create your HTML templates. Make them as semantic as possible. I think it’s ok to name a component (but only at a large level). I found the more organized my HTML is the easier it is to design it
  2. Follow an order for your TailwindCSS. Maybe display width margin padding color font. I don’t know. But something to keep your Tailwind classes consistent. This will make editing so much easier.

Here’s what I’m thinking:

<section id="posts" class="flex flex-wrap justify-between -mx-6 pt-12">
        
        <article class="flex flex-col flex-grow flex-shrink w-full md:w-1/2 p-6">
						<div class="flex-1 rounded-t rounded-b-none overflow-hidden shadow-md pb-5 bg-yellow-50">
                            Content
            </div>
    </article>
</section>

We’ll see how this goes.

TLDR I rescind my original opinion on Tailwind. I’m so far learning a lot from using it.

Further reading and resources used #

  1. Goodbye Squarespace. Hello Eleventy, Tailwind CSS and Netlify!
  2. In Defense of Utility-First CSS
  3. Updating to Tailwind Typography to style markdown posts
  4. The complete guide to customizing a Tailwind CSS theme

Miscellaneous #

Writing Liquid Template in Markdown Code Blocks with Jekyll

Control Flow

Photo Credit #

Image by Sandra Selamaa