DEV Community: Ciaran

Tailwind is Bad (If you don't know how to use it)

Ciaran — Mon, 10 Jul 2023 21:19:52 +0000

About once a year, if not more frequently, drama seems to pop up in the developer community surrounding Tailwind CSS, and it's always about the same thing: "Look how many class names are in your markup file! So messy! How can you read any of it!?".

Now, let's be fair - seeing a list of Tailwind classes upon first viewing can seem messy and overwhelming. CSS already has a reputation for being less-than-easy to learn, hard to memorise, and inconsistent it can be with regard to best practices.

However, the recent Tailwind drama is (as usual) a great example of how a fundamental misunderstanding of tools you're using can make them seem better or worse at doing the job they're advertised to do.

On the left, HTML and Tailwind a dev authored with the idea it would be easier to read.

VS.

On the right, I rewrote the markup using vanilla CSS classes. #webDev #frontEnd #CSS pic.twitter.com/8PoeFpccFY
— xirclebox (@xirclebox) June 27, 2023

The wrong end of the stick isn't always labelled

A few days ago, @xirclebox tweeted a screenshot of a side-by-side comparison between a TailwindCSS HTML snippet, and the same snippet using vanilla CSS. Currently at 2.2m views and counting, the tweet has brought opinions from just about every developer I follow, and a couple thousand more, I'm sure.

There's no reason to beat around the bush here - the Tailwind snippet is much harder to read than the CSS one on two levels. First, the amount of Tailwind classes in some areas makes it really hard to get a mental model of what's going on in the snippet. Second, the amount of line breaks caused by all the classes makes it not significantly, but somewhat more challenging to read the actual HTML itself.

The indentation helps, but at first glance, I do get a much better idea of the makeup of this component when looking at the vanilla CSS snippet. However, it's important to note here that OP is using tw- prefix (which tells us they're likely adding Tailwind to an existing code base with clashing class names), which will add 3 characters to each Tailwind class name.

There's a catch though - this isn't at all how Tailwind is meant to be used.

Comparing Apples to Oranges

There are two kinds of missing the point with Tailwind, generally speaking. One seems a lot more like it's up to the maintainers to attend to - which is using Tailwind for the first time, in an existing project already making use of some CSS paradigm. This is normal when working with new tools, and in some ways can be helpful to the maintainers in understanding how better to educate first-time users.

On the other hand, however, we've got misrepresentation. It's impossible to say which is which, when we have no prior knowledge of the person making claims and have no idea of their exposure to Tailwind, let alone CSS itself.

I think this sort of misrepresentation could be captured by turning the tables and trying to make a similar claim about CSS being too verbose compared to Tailwind:

// Vanilla CSS - Messy, Unreadable, Unclear

<div style="background: #ffe7e8; border: 2px solid #e66465;">
  <p style="margin: 15px; line-height: 1.5; text-align: center;">
    Well, I am the slime from your video<br />
    Oozin' along on your livin' room floor.
  </p>
</div>

// TailwindCSS - Clean, Readable, Concise

<div class="bg-orange-100 border-2 border-red-300">
  <p class="m-4 text-center leading-6">
    Well, I am the slime from your video<br />
    Oozin' along on your livin' room floor.
  </p>
</div>

But this seems misrepresentative, right? Because as much as it's possible, allowed, and even makes sense sometimes to write CSS in style tags, it's usually very impractical and the option of using external style sheets is a sound solution to this problem.

One might also say, "Well, didn't you have to look up the correct Tailwind classes to use?" - No, I used intellisense in my IDE like a developer living in the modern day. Tailwind has a great plugin that allows you to hover over your classes and see the direct CSS behind it, variable patterns and all, right next to the utility class name.

I don't think that @xcirclebox was intentionally misrepresenting Tailwind in the slightest. I think they're trying their best to try out a new tool that comes widely recommended - and didn't like the results. Which is honestly nothing more than a fair and free opinion, expressed well enough to engage many, many others in responding to the opinion.

Let's take a look at where they may have misstepped, or where Tailwind itself isn't really clear enough to steer new users in the right direction.

Like Lodash, but for Styles

To get back to basics, let's try and understand what problem Tailwind exists to solve. Let's take the lodash JS library for example. It's a collection of useful utility functions which, while could probably easily be written by most developers with a quick google, are a useful weapon to have in your arsenal.

Sure, perhaps their sortedLastIndexOf isn't the proven fastest implementation of that function in Javascript. Or, perhaps it wasn't at first - but as the project grows to become the de-facto standard for JS utility functions, it seems likely that anyone else writing a faster sortedLastIndexOf will either consider contributing their solution to this massive and widely used open-source project, or let that new snippet spread and proliferate until someone notices it's a better alternative to the one lodash supplies, and likely creates a pull request correspondingly.

There's something very ergonomic and useful about a collection of grounded, sensible and sane utilities which can be relied upon to be consistent, while still retaining opt-outs and the option to break things down a level.

Bringing this metaphor back to Tailwind - we can assume that as a 6+ year old, 70k star utility CSS framework, Tailwind likely has a set of consistent and reliable utilities that shouldn't need break-outs for most projects. Their own home page refers to itself as a "utility-first CSS framework"

It's also worth mentioning that at this point, Tailwind serves as a great reference for how things should be done in CSS. Their paradigms around common use cases like background images, grid / flexbox layout, and typographic styling are often implemented in a best-practices manner, and I've learned so much about CSS from hovering over my Tailwind classes and studying the underlying CSS, discovering reliable methods I return to whenever I use vanilla CSS in a project.

How to use TailwindCSS Properly

There's a lot wrong with @xirclebox's Tailwind snippet, but there's some right with it too. Let's look at how it could be improved in a few ways, using the sort of best practices the Tailwind maintainers encourage.

Separation of Concerns in HTML and CSS

This term is thrown around a lot when it comes to CSS and HTML. However, I don't think it makes sense to talk about HTML and CSS as 'separate concerns'. When the order of your <div/>'s dictates the order in which they're visually displayed on the page, how can we really say that the code we're using to instruct the layout and visual display of these elements should be hidden away in another file?

Being able to glance at your component and move elements and styles around in the same actions is something we just can't do using an external CSS file. Additionally, by either omitting or including classes based on their need (rather than editing classes themselves to update appearances), we can be sure that changing the style of one element won't affect others.

Say I have the following simple class for a button style:

<style>
  .btn {
    color: "#fff";
  }
</style>

And this style is applied to two buttons

<button class="btn">Login</button> // Should be white
<button class="btn">Logout</button> // Should be red

I now either need to create a whole new class, or break out into some sort of SCSS pre-processor to nest my classes in a nice, clean, BEM format:

<style>
  .btn {
    &__white {
      color: "#fff";
    }
    &__red {
      color: "red";
    }
  }
</style>

<button class="btn__white">Login</button>
<button class="btn__red">Logout</button>

With Tailwind however, I just change the word white to red:

// Before
<button class="text-white">Login</button>
<button class="text-white">Logout</button>

// After
<button class="text-white">Login</button>
<button class="text-red">Logout</button>

// 🧠 Big Brain: Set default button colour in parent
<button>Login</button>
<button class="text-red">Logout</button>

The meaning of each class name won't be immediately obvious to a new Tailwind user, but by the time you're regularly using it across your project you'll come to appreciate reading your markup and styles in one place - leading to an almost "cleaner" result of separation of concerns. That being said, most classes are sensibly named and can be understood from name alone. Again, intellisense helps a lot here.

Using Components

The biggest culprit in making Tailwind look bad, is that snippets like @xirclebox's don't really represent the recommended (and common) way developers implement Tailwind.

An improved version of his Tailwind snippet may look as simple as something like this:

<Carousel id="animation-carousel">
    <CarouselIndicator />
    <CarouselItem item={currentItem} />
    <CarouselButton icon={<PrevIcon/>}>Previous<Button>
    <CarouselButton icon={<NextIcon/>}>Next<Button>
</Carousel>

Or even simpler, just:

<Carousel id="animation-carousel" />

Both, I'd argue, are far more readable than any of either of @xirclebox's examples.

Of course, not everyone is using a framework that allows for this sort of thing. But, like it or not, that's primarily what Tailwind is made for - it was created, specifically as I understand, as a CSS utility framework that makes sense to use with components, since in 2017 the options for component-friendly CSS were much more varied, and less agreed up.

We still have a lot going on in our components though, right? Would our <CarouselButton /> component now contain all the markup we saw in the original snippet?

Good news, it won't! We've got components to rescue us again:

import BaseButton from "components/BaseButton";
import IconWrapper from "components/IconWrapper";

type Props = {
  icon: React.ReactNode,
  children: React.ReactNode,
};

export default function CarouselButton({ icon, children }: Props) {
  return (
    <BaseButton
      styles="absolute top-0 left-0"
      icon={<IconWrapper>{icon}</IconWrapper>}
      text={children}
    />
  );
}

We did a few things here which might not be immediately obvious - let's review:

We extracted shared button styles to a shared base button component.
We added in only the styles required for this button alone.
We prepared a wrapper component to apply styles to whichever icon we pass in.
At every step, we tried to think about where we may / may not re-use styles or component fragments.

It seems obvious, but due to the current discussion maybe it's not - Tailwind covers this as a basic principle in their TailwindCSS Core Concepts documentation. It's worth a read if you find yourself repeating styles, even as an experienced Tailwind user.

The Downsides, and Back-and-Forth of TailwindCSS

As much as the examples above seem like a great improvement on the original snippets, there's still the issue of having separate styles in separate files - although this time, with their related markup and at times, content. Speaking from experience, however, this is a very reasonable alternative to having to view entire groups of markup and styling separately.

When I want to change something about a <CarouselButton/>, I'm entering that file prepared to edit the markup, styles, and possibly JS that affects either of those, aware that my power is now limited to the button. Consequently, I'm then editing the <Carousel/> itself, which isn't much more than a layout wrapper, to make sure that my new button styles don't mess up my existing layout.

This practice, when done with intention and specificity, grows into a larger skill of defining re-usable components by default. Small notions like "padding should be applied from a parent, not from within a child", and asking yourself "do I want to pass just the text, or the text tag too?" make a big difference in designing components that just work when re-used across a code base - a principle which Tailwind prioritises over first being easy-on-the-eyes.

Again, there's always the opportunity for extra rules, abstraction componentized and one-offs in your globals.css or tailwind.config.js files - but again to speak from experience, if either of these files is hitting more than 100 lines, it's incredibly likely you're missing a key instruction from the docs, and making your own life more difficult needlessly.

At the end of the day, this is largely down to personal preference - but I strongly it's a personal preference between two ideal options - rather than a good implementation of one option, and a weak implementation of another. To go back to the lodash example, no one wants to use my one-liner sortedLastIndexOf that's slower and always requires a review of usage due to lack of documentation.

In Conclusion

In general, I don't think it's a great example of how usable Tailwind is to post large HTML snippets with a multiple components in a row. It's almost never used this way, and the way in which it is used is a lot more malleable and customizable than it first appears without altering any of the library's defaults.

A good process to follow when Tailwind starts to become unreadable is to ask how the styles can be broken down and, more specifically, componentised - intrinsically tied to the components they're responsible for displaying.

Hopefully this discussion, as they always seem to, brings some wider awareness of how folks are using Tailwind in ways that aren't ideal. At the least, previous such drama has done so for me - especially around the usage of @apply...

nothing i am trying my best
— Apply (@Apply) June 28, 2023

ERC-20, ERC-721, and other Smart Contract Standards Explained

Ciaran — Fri, 17 Sep 2021 11:31:27 +0000

I recently wrote on article on my website covering the basics of Ethereum-based DeFi Applications for web Developers.

This is a snippet on tokens which was the one of the key things I was attempting ti summarize well. If you enjoy this piece, please check out the full article on my website!

The Most Popular Ethereum Smart Contract Standards (ERC-20, ERC-721, ERC-777, ERC-1155)

ERC (Ethereum Request for Comment) Token interface standards make smart contracts composeable. This means they will stay compatible despite changes to decentralized exchanges. Each standard defines a specific combination of 'rules' that a token must adhere to. There is a really great article covering ERC-20 makeup interaction basics - ERC-20 is the most common (and possibly simple) standard, and is best explored first.

Each smart contract has a set of mandatory functions - for example, an ERC-20 token has: totalSupply, balanceOfWallet, transferFrom, and more. We also use the smart contract to store functions for handling transactions and balances.

I want to cover a few of the basics of the tokens you will most commonly encounter. By no means are these comprehensive descriptions - they're simply a catch-up, to help you get comfortable with the terminology (and application), just enough so that you can start exploring interesting smart contracts that other people have written.

The Ethereum Improvements Proposals Website is the central location for platform, api and contract standard proposals. It's a cool place to look around once you've got some basic understanding of the more popular ERC standards.

ERC-20

The Standard Fungible Token Interface

This is the most common, and what is considered the 'base standard'. Most ETH based tokens you'll encounter are ERC-20 Tokens. These can be used for purposes such as managing voting or currency systems - where fungiblity is important. An ERC-20 Token can also be used to create, as mentioned, a cryptocurrency on the Ethereum blockchain.

A great place to start if you want to write ERC-20 contracts is this tutorial which covers creating an ERC-20 token on Ropsten Test Net. I used this tutorial to create $lemToken.

While the other tokens in this aticle have documentation pages linked in this article, if you're going to read just one of the standards I would recommend ERC-20. It's what most other smart contract standards are modelled after in one way or another - The ERC-20 Standard

ERC-721

The Standard Non-Fungible Token Interface

A 721 is non-fungible (ie. it has a no 1:1 value). I saw it referred to as a "deed" which made the most sense to me personally. While the standard has many feautures it shares with ERC-20, it's got a unique tokenId field - which adds its infamous functionality of being a uniquely identifiably token.

There's some further discussion around how the "art itself" that you might mint as an NFT appears in the NFT itself as, essentially, a link to an off-chain copy of the resource - but this has some pretty practical reasons for it.

Once you have a decent understanding of how ERC-20 works (and have perhaps tried to create your own), I'd highly recommend doing the tutorial on minting a 10,000 piece unique art collection. It glosses over the finer details of smart contracts, but is one of the best catch up articles on the NFT space that I've found.

For a little extra research, it's important looking into ipfs, which is a distributed web concept most often employed for storing the actual "asset" part of digial art on the blockchain. This is one of the core components of working with dApps - it's unavoidable at this point.

ERC-777

Non-Standard Fungible Token

Triple-seven is a fungible token standard, which attempts to add functionality to what would otherwise be similar to an ERC-20. Essentially, it's for building tokens with complex functionality. I would recommend this Jordi Baylina talk on ERC-777 from DappCon as an introduction (once you've read the docs, of course).

The key feature of ERC-777 is receive hooks, which is a type of function that can be called when tokens are sent to it. As a web developer, the general goal of React Hooks is a good comparison here - hooks attempt to make it easier to control the flow of a complex set of actions.

By this point, you've probably realised that most popular smart contract technology is made up of not one, but rather a network of contracts. This is an important concept to grasp, in order to understand the boundaries of immuatability and malleability of the network.

ERC-1155

An Attempt at a Fungibility-Agnostic Token

ERC-1155 is a standard combining efforts of all the contracts we've explored so far, creating a way to write contracts that manage multiple token types. Within a single contract, we can work with fungible, non-fungible, and almost any other sort of token in between. It does all of this while attempting to be even more efficient and cheap to work with than other smart contract standards.

It has a massive difference in gas fees (which we'll get to next) compared to other token standards, and you'll most often see it used in applications like dApp Games. These sorts of applications have the most cause to use a cheap and malleable method of managing a complex internal token system.

ERC-1155 is sometimes referred to as the lazy minting standard - it's the cheapest, most functional and most approachable for newcomers. Whether or not the implications of the "lazy" label fit remains to be seen, however no such label should never discourage you from exploring.

10 CSS Tips & Tricks for Beginners

Ciaran — Mon, 23 Nov 2020 14:03:35 +0000

CSS tips and tricks are invaluable as a web designer, as it is the single most important tool used in designing websites. It's used to add styles to HTML web pages and is often used alongside Javascript. If you've spent any amount of time learning web design, you've undoubtedly encountered it.

As with any of the core components of web development (HTML, CSS, and JS), there are many practices, shortcuts, and 'secrets' that aren't often so easy to learn. It's important to grasp these concepts well early on so that you don't spend hours trying to center a <div> every time you try and create something new.

Let's take a look at some of these CSS tips and tricks, and try to help you nail down the bare essentials to help build a solid knowledge of the tool.

Ten CSS Questions and Answers for Newbies

Here are ten questions (and their answers) which I think would have boosted my learning when first starting with CSS. Some of them are simple, and others are a little more complex to get your head around, but there's something in this guide for everyone. Let's dig in.

What does CSS Stand For?

CSS stands for Cascading Style Sheets. It's named as such as it is a language used to style web pages written in HTML and XML. CSS can be written either directly within the HTML markup or saved as an external .css file.

In modern web development, skills in CSS are often expected to extend into stylesheet-based frameworks such as SCSS and Sass, Bootstrap, and TailwindCSS.

How to add CSS to HTML

There are three ways to add CSS to HTML: Inline, Internal and External styles. Let's add some CSS to give a web page a blue background, seeing how it's done using each method.

Internal CSS refers to styles written within the head tags of a web page. You can use internal CSS as you see in the example below:

<head>
...
<style>
    body {
        background-color: blue;
    }
</style>
...
</head>

Next, is external CSS - the most common way to use it in modern web development. With external CSS, we store our CSS in an external .css file, adding a link to it in the head of the HTML document. In this case, our style.css might look something like this:

body {
        background-color: blue;
}

And in the head of our HTML document we would point to the style sheet with a link tag as follows:

<link rel="stylesheet" href="style.css">

Finally, with inline CSS, we use the style property of HTML tags to apply styles to each element individually. The same example in inline CSS would appear like this:

<body style="background-color: blue;">
...
</body>

Now, while in this case, it might seem inline styles are quickest, they become near useless when repeating elements. Besides, it's best practice to keep as many of our resources separate as possible when designing websites, in the case they should grow large and difficult to maintain.

As such, external CSS is the de facto standard - it allows you to keep your style sheets external and organised (and keeps your HTML clean and easy to read). What's more, with frameworks like SCSS / Sass, you can split your style sheets into files organised for different sections of your site, or different design components.

How to Center Text in CSS

The simplest way to center-align text CSS is to use:

text-align: center;

However, this only centers relative to the parent element - so if your text is in a div which takes up 50% of the page, then it will be centered at 25% of the total page width. This is one of those cases where over time, you'll understand better how this works by applying it again and again, in different circumstances.

How to Center an Image in CSS

Centering an image in CSS is pretty simple. If we add an image with the center-image class applied, we can add the following CSS to center the element within its parent element:

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

We can also reduce the image width if the image is larger than the web page itself. The same margin principle can be used with most other elements to center them on a webpage. To understand more about this, you should read up on flexbox.

How to Change Text Colour in CSS

This is a quick and simple one. While you might be looking for a text-color value or something similar, it's far more simple:

p {
        color: red;
}

I find it's best to think of colour in CSS as split into foreground and background - with the former as the above, and the latter as background-color. In CSS, the text takes on the foreground colour you've for itself, otherwise its parent element.

How to Comment in CSS

To add a comment in CSS, simply add two forward slashes with two stars in between them, and your comments in the middle:

/* this is a comment */

Commenting is a very important consideration when writing clean code. When you refer back to your code for tweaking or maintenance, you might not always remember what you were thinking when you wrote it. As such, comments make this a more seamless process - especially in the case where other developers have to refer to code you've written or vice versa.

How to Change Font in CSS

Changing from the default fonts in CSS is probably in the three first things designers do in creating a new web page. In addition, many will specify different body, and heading fonts (if not a few more for other distinct copy elements).

To specify, for example, a body and heading font, you can use the following:

h1, h2, h3 {
    font-family: Arial;
}

p {
    font-family: Karla;
}

However, if we wanted to use a font like Karla (used on this site), which is hosted on Google fonts, we need to ensure that website visitors can access this font. We can easily do this by adding the link provided by Google Fonts.

<link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">

Most font services like Google Fonts also allow you to select only the weights and styles (italic, bold, etc) that you use on your site, to minimize the size of the files a user downloads when visiting the site.

How to Remove Underline from Link CSS

By default, HTML links or anchor elements look really, really bad. Blue, underlined, and straight off your grandparents' computer from the 90s. To reset styling on link elements, we need to start with the following snippet of code:

a {
    text-decoration: none;
}

This will remove the underline from links. We can then simply change the colour of the link to something we prefer - something different from your paragraph font colour is best, as differentiating links in text helps with accessibility.

a {
    text-decoration: none;
    color: palegreen;
}

Also, we can add styles to links that change depending on whether the link has been visited or not. Similarly, this applies to hovered links (this principle works for all elements), and active (clicked) links:

a {
    text-decoration: none;
    color: palegreen;
}

a:hover {
    text-decoration: underline;
    color: blue;
}

a:visited {
    color: red;
}

a:active {
    color: green;
}

How to Add a Background Image in CSS

Adding background images in CSS is a great way to manage responsive images, as individual img elements can become finicky when used within other elements on responsive web pages. To add a background image to a div with the class of bg, you can use the following code:

.bg {
    width: 100vw;
    height: 100vh;
    background-image: url(https://images.unsplash.com/photo-1571319791337-3d18ca429a6c);
    background-position: center;
}

Without background-position set to center the image will, by default, attach itself using the top right corner. In addition, you might have noticed I set the width and height of the div using strange values. More on that in the next point.

What is VH and VW in CSS

VW and VH stand for viewport width and viewport height. These refer to sizes of the actual device the user is viewing the website on, and not simply pixel measurements. It breaks up the viewport height and width into a percentage factor, with 100vw representing 100% of the viewport width.

A common usage of this might be using:

section {
    height: 100vh;
}

On the hero section of a web page, so that it covers the entire user screen on both mobile and desktop.

Remember, however, that it's the entire height and width of the user's device - so on web browsers, this includes the space used by the toolbars et cetera at the top of your screen.

Some Notes for CSS Beginners: Where to Go Next

Once you're feeling established in CSS, I would highly recommend swiftly moving onto SCSS / Sass. These are Javascript-aided CSS tools, which allow you to do more complex things in CSS, while also allowing most of your plain-written CSS to still be valid. For example, targeting paragraphs only within a certain element is simple, without assigning that element a class:

.hero {
    color: red;
    p {
        color: blue;
    }
}

While you're at it, check out frameworks like Bootstrap and TailwindCSS - while they offer a different skill set and have their learning curve, you can often learn a lot about CSS in how these frameworks are used and structured. It's a two-way deal.

How to Create a Tailwind CSS + WordPress Theme Boilerplate

Ciaran — Mon, 28 Sep 2020 14:56:40 +0000

A few months ago, when I was first getting started with Adam Wathan’s TailwindCSS, I was really put off by how hard I was finding it to install as a part of various frameworks. As such, I decided to put this guide together to demonstrate how to scaffold an efficient TailwindCSS + WordPress development setup.

In this guide we’ll go through the pros and cons of using TailwindCSS with WordPress, how to quickly set up a template that I created (so you don’t have to install anything yourself), and how to create a blank theme from scratch which uses Tailwind.

If you have any questions or recommendations, don’t hesitate to tweet me @parabyl! I’m always keen to get second opinions on what I’m doing, and feedback on the projects I’m working on.

Jump to: Quick Setup

Why Use TailwindCSS with WordPress

Depending on what you regard as best practices, you might think using a utility-based CSS framework with WordPress a bit confusing – aren’t we meant to be keeping our HTML clean and readable?

Well, it turns out that Tailwind offers some gains where my previous setup of WordPress + Elementor + A Solid Theme was giving me issues. Let’s explore a few of these areas in more detail.

The 4 Benefits of TailwindCSS for Theme Development

There are four standout benefits that I see using TailwindCSS, specifically for theme development, compared to other frameworks. These are all pros that any self-respecting designer should at least understand, if not agree with.

Theming Capabilities

Theming is important to you, if you’re reading this. It’s a practice that allows us to define common styles across an entire project, allowing for brand identity and visual hierarchy to shine through as it should. Tailwind’s tailwind.config.js file allows us to set up parameters such as fonts, colours, and utilities, as well as allowing us to overwrite the default Tailwind styles.

This way, if we wanted to expand our project into a new realm (say, launching a product under the same company name), we could simply copy over the tailwind.config.js file to the new project, using the exact same base CSS setup.

Performance Optimization

TailwindCSS (as of version 1.8) is just under 200kb Gzipped. This is small, however if we take the stylesheet for this website, it’s just under 15kb (TINY!).

This is thanks to Tailwind using PurgeCSS – a module which mixes CSS classes you actually used into your output files. Didn’t use max-w-lg? It won’t exist in your output style.css.

Readability

One of my favourite parts of TailwindCSS is how readable it is, once you get to grips with the lexicon of the framework. To be able to dip into a WordPress theme and see styling, logic, and markup all neatly positioned together is a major pro.

Further, when you combine the addition of Tailwind CSS classes with conditional logic in your .php files, you’re on your way to building some really cool state or logic-responsive components in your theme.

The TailwindCSS Community

Being a large and popular growing framework, there are so many resources out there for Tailwind – from live websites, to examples and tutorials, and even free component libraries for you to use. This is one of the biggest advantages of using a framework which is rapidly growing in popularity, as it means when you run into an issue, someone else has likely found a solution.

Quick Start: HTML5Blank + TailwindCSS Template

So, all that intro aside, let’s begin with the template I created. I’ll teach you to set a theme up from scratch with Tailwind further down in this tutorial, however for now let’s just explore the simple setup option.

You can download the template here.

Theme Installation & Setup

First, clone the repo I published as a starter. It’s based on HTML5Blank as this is one of the best blank themes you can use for learning theme development.

git clone https://github.com/knightspore/wordpress-tailwind.git

Next, you’ll need to install dependencies using your preferred package manager

npm install --save-dev
or
yarn

Now you’re ready to start using the theme! Run npm run dev or yarn dev to compile your assets unminified, watch to re-compile theme every time you save, or prod to run your production build.

You can edit assets/style.css to edit your CSS (for @apply and non-inline styles), and assets/main.js to edit your Javascript.

Creating a WordPress Theme using TailwindCSS

Now that you’ve got the option of quick setup, let’s run over an installation on a blank WordPress theme in case you don’t want to use HTML5Blank.

Setting Up your Theme

To begin, let’s navigate to wp-content/themes and run mkdir example (where ‘example’ is your theme name). In order for WordPress to recognize this folder as a theme, we need to add a few items.

Let’s open the folder and run touch style.css index.php. You should now see these two files appear, and be able to use the blank theme in Appearance > Themes in your WordPress Admin dashboard. Let’s also run touch header.php footer.php as we’ll need these later.

Installing Laravel Mix

Next, we need to install Laravel mix. This is the cleanest wrapper for webpack that I’ve found, and it works really nicely for wordpress theme development as a lot of the confusing syntax has been removed.

First, run

npm install laravel-mix cross-env --save-dev 
or 
yarn add laravel-mix cross-env

Next, run

cp node_modules/laravel-mix/setup/webpack.mix.js ./

You should now see a node_modules/ directory, as well as package.json and webpack.mix.js files in your root directory.

If we look inside our Laravel Mix Config file, we can see a simple setup has been scaffolded. It’s taking assets from a folder called src/ and compiling them into a folder called dist/. To complete our setup of mix, we need to create the source assets that mix is looking for.

Run

mkdir src; touch src/app.js src/app.css

(Note: we’re using CSS instead of SASS here as Tailwind does not require pre-processors)

Finally, copy and paste the recommended Laravel Mix Build Scripts into package.json

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Installing TailwindCSS

To install Tailwind, let’s begin by adding it with our package manager

yarn add tailwindcss
or
npm install tailwindcss --save-dev

Next, add the TailwindCSS directives to your src/app.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, we need to update webpack.mix.js to build assets correctly. As with most of these code snippets, the TailwindCSS installation page has got us covered once again: replace the file contents with the following.

let mix = require('laravel-mix');

mix.js('src/app.js', 'js/app.js')
    .postCss('src/app.css', 'style.css', [
        require('tailwindcss'),
        require('autoprefixer'),
      ]);

Generate a blank config file using npx tailwindcss init (you’ll want this file later) and we’re ready to go!

Building Your Assets with Laravel Mix

To test our build, run npm run dev or yarn dev. You should see some confirmation from your package manager upon running this command.

Let’s try adding some basic HTML to our index.php to see if Tailwind is working properly.

<h1 class=”text-xl text-red-500”>Hello World</H1>

You can run your watch script at this point if you’re working with your src/app.css file instead of inline styles.

If you’ve followed correctly, the styling on your H1 should not work immediately. We first need to add the wp_head() directive to our header. This will add references such as our stylesheet into the

of our theme.

To do this, let’s first generate a simple HTML setup in our header.php and add our header directive to it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <?php wp_head(); ?>
</head>
<body>

</body>
</html>

From here, we can cut the last two lines and paste them into our footer.php file. Next, let’s include our header and footer in our index.php file.

<?php get_header(); ?>
<h1 class="text-xl text-center text-red-500">Hello World</h1>
<?php get_footer(); ?>

And finally, we need to enqueue our stylesheet by creating functions.php and adding the following

<?php
wp_enqueue_style('style', get_stylesheet_uri());
?>

Now, when you refresh your site, you should see your inline styles showing.

Controlling TailwindCSS File Size

Now, you might have noticed that when we compiled our styles, our output CSS was a whopping 2.28mb. This is because, by default, Tailwind includes all its possible utilities in our output file.

Luckily, as I mentioned earlier, Tailwind uses PurgeCSS to easily remove unused classes from our output. We just need to update the purge section of our tailwind.config.js file.

purge: [
    './**/*.php',
]

Now, when we run yarn prod, our output is looking much smaller! This purging will only happen when you’re running a production build, so that your computer isn’t working overtime to purge assets each time you hit save during development.

Closing Notes

Congrats, you’ve now got a working, performance optimized WordPress Theme running TailwindCSS! Please get in touch if you’ve got any notes or suggestions to make this process easier, or if you want to share your sites that you’ve built with Tailwind and WordPress.

How to Automate SEO Checks Using Python & Bash – The Beginner’s Guide (Part 1)

Ciaran — Tue, 04 Aug 2020 18:51:51 +0000

MissingLink is a script I created to monitor a network of sites for missing links (internal or external), scripts, and images. I found it hard to monitor for broken links multiple sites centered around long-form content. One morning, I looked into automating the process with Python and discovered it would be a lot easier than I had expected.

It’s also just plain old fun to be able to automate these checks using open source tools like PyLinkValidator. For me, creating MissingLink was a great way to get a little deeper into using Shell Scripts, Python Packages, and my web server, so I decided to write a little breakdown of how it works, and how you can use it yourself.

Getting Started: Finding Broken Links with MissingLink

Before following any of my instructions, you’re going to want to make sure you have Python and Pip installed. In addition, if you’re on Windows you’ll want to use a terminal application like Git Bash so you can easily use the command line to interact with the script.

Installation and Target Domains

When you’re all set up and ready to go, you can begin by installing bartdag’s PyLinkValidator package for Python.

pip install pylinkvalidator

Once you have installed PyLinkValidator, clone the MissingLink GitHub repo.

git clone https://github.com/knightspore/missing-link.git

When the download finishes, take a look at the files and folders – purely for your own interest. You’ll want to start with an edit of the cfg/domains.txt file. Nano is a simple command-line text editor – I’ve provided alternatives below so that you can use your preferred editor to open the file.

# Edit in Terminal
nano cfg/domains.txt

# Edit with Visual Studio Code
code cfg/domains.txt

# Edit with Sublime Text
subl cfg/domains.txt

# Edit with Atom
atom cfg/domains.txt

Domains.txt is the file which stores the list of domains you want to crawl with MissingLink. Simply add the target domains in the format “website.com” as pictured below.

ciaran.co.za
parabyl.co.za

It’s also important to remember that you need to leave one blank line at the end of the file for it to work correctly – so after you’ve entered your last target domain, make sure to hit return (enter) before you save your changes.

Check your Domains for Broken Links

Now that you’re all set, execute run.sh in the main directory.

bash run.sh

Give the crawl a little while to finish (it takes longer on larger sites, naturally) and you’ll find two new folders in your directory: crawl and report.

If you don’t see these folders, or if the report is blank, there’s a chance that you’ve avoided having any broken links on your site! While this is a good thing, it does make for a particularly unspectacular demonstration of MissingLink.

Go ahead and add a link to one of your pages which leads to a 404, just so you can see some results. I usually like to use radicalturnip.com.

Note: if you’re crawling many domains and the computer you’re using isn’t very powerful, this might take a while. I like to use one of my Vultr servers to run these checks. I can spin up a new server in minutes, SSH in, and start working from there to avoid putting a strain on my mid-range laptop.

Timeout: Why SEO Health Checks are Important

SEO health checks should be part of any maintenance routine – and broken links aren’t the best thing for Googlebot to stumble across while crawling a page. While there are plenty of plugins that can notify you when a link breaks, many of us want to keep our sites running with as few plugins as possible to save on performance.

Learning to do these checks manually is important – even if, in this case, that means browsing to a page and clicking on each link to see what’s broken (and why).

Understanding how to find the errors that you’re looking for will help you better use third-party tools like MissingLink for SEO checks. You can get a better understanding of the kind of errors you’re looking for, and where to refine the parameters of your tools so you don’t end up with massive reports and crawl logs to sift through each week.

Understanding Your Crawl Report

By now your crawl should have finished. As I mentioned before, your report-ready list of broken links will be available in the /report folder – as well as a full crawl log available in /crawl. You will probably only deal with the former, but take a look at your full crawl logs if you want a better idea of what’s happening behind the scenes.

Luckily I only had one broken link on parabyl.co.za – it’s a link to the Instagram account of a 3D artist friend of mine, who did cover art for my last album.

Broken Links for parabyl | 2020-08-04

  not found (404): https://www.instagram.com/scumboy.pdf/?hl=en

Now, I can simply go and replace that link so that Scumboy can be correctly credited (and to make sure search engines don’t knock me down in the ranks for having broken links). But the question is, where does this broken link exist?

How to Fix Broken Links (404) on Your Website

This is where the crawl logs come in handy. If I navigate to crawl/parabyl/parabyl-links.txt I can see a neat breakdown of all the pages where this broken link was found.

  not found (404): https://www.instagram.com/scumboy.pdf/?hl=en
    from https://parabyl.co.za
    from https://parabyl.co.za/

Now, I’m ready to fix the link!

Out of interest – the reason my domain appears to be “listed twice” here is that the URL I entered had no trailing slash – and as such was redirected to one with a trailing slash. While trailing slashes themselves are not recommended for SEO purposes, the fact that it resolves to one specific option is a good thing – and an important feature you can implement using Yoast on WordPress.

Conclusion

We’ve reached the end of part one of this tutorial – in part two, we’ll look at bash scripting in more detail in order to understand how I set limits and instructions that can be reused to ‘standardize’ a crawl with PyLinkValidator.

This will cover some great basic terminal commands which can help you become a little faster with the command line, which in turn can help you become a bit more productive in your everyday work.

If I’ve piqued your interest, go ahead and check out some of my other projects – you might be able to learn something new, or even help me out with something I’m struggling with.