Frontend Weeky logo

Frontend News

DONT WRITE CSS
CONFIGURE IT WITH TAILWIND

Frontend News #3

David East - Author David East — August 8th, 2018

Styling with CSS should be fast and iterative

The first styling technique I learned on the web was not using CSS directly, it was the style attribute. It was empowering. A few keystrokes could change the background color, font size, line-height, or whatever was needed. The best part was with one glance you could understand the style of the element.

<!-- HEADER -->
<div style="color: blue; font-family: 'Comic Sans'; font-size: 32px;">
  Welcome to my site!
</div>

It didn't take long to understand why the style attribute was a bad idea. It lead to brittle and inconsistent styling. One update meant updating each element with that style. CSS classes were the obvious cure, but they lost the directness of style attribute. It took more than one glance to understand the style of the element. To understand the styles you had learn to associate the classes with their actual properties. The styles didn't live on the element anymore, just some poorly named set of classes.

Creating resuable classes with consistent measurements was a struggle. This process is frustrating and slow. Styling with CSS should be fast and iterative. Building a page from scratch is fuzzy. You should be able to create a design with a loose set of rules and tighten as the picture becomes clear.

This is what Tailwind CSS provides.

Tailwind is not like Bootstrap

When you first hear "CSS Framework" you immediately think of Twitter Bootstrap. But that's not Tailwind. Bootstrap is a set of pre-styled and themeable components. Tailwind is a configurable set of utility CSS classes. Bootstrap hands you pre-built components. Tailwind gives you the tools to quickly build your own.

To understand Tailwind, think in utilities

Tailwind provides a large set of utilties to create any kind of design you can think of. These classes are composable and within a few keystrokes you'll have a component.

<!-- HEADER -->
<div class="text-blue font-sans text-xl bg-white">
  Welcome to my site!
</div>

Set the text color to blue, the font is the sans typeface, the text is large, and the background is white. Tailwind has plenty more utilities like this. It takes time to learn the system but once you do, you move fast.

Side note: If seeing a long list of classes makes you clinch your teeth, just hold on. It gets better. Because rapid development isn't even the best part of Tailwind. It's the consistency it provides with it's values.

Frontend News is built with Tailwind

I built Frontend News with Tailwind in just a few days. I'm not afraid to make adjustments or create new pages. Tailwind empowers me to iterate quickly.

SIGN UP!

One web topic. Every week. Sorry if you already have 😬

Tailwind gives you consistent spacing

Inconsistent spacing is a problem that plagues developers. I worked with a UX Designer who had a rule on spacing. All margins, heights, and paddings should be divisble by four. This was a loose rule. If you picked the wrong number you wouldn't too far off. It would be easy to clean up later. This rule was helpful, but Tailwind eliminates this problem.

Here's an example of creating a container with padding:

<!-- HEADER -->
<div class="container mx-auto px-4 py-4 text-blue-darkest">
  This is my blog. Here are some useful words.
</div>

Let's breakdown each class:

These classes are configured to consistent sizes: 1 is 0.25em, 3 is 0.75em, 4 is 1em, 5 is 1.25em, and so on on so forth. This allows you to pick the size that works for you and stick to it across all spacing.

But what if you don't like the padding sizes? What if you want a different value for text-blue-darkest? Tailwind was designed for configuration.

Configure your own values in tailwind.js

Getting started with your custom Tailwind build takes only a few commands. First install Tailwind with npm or yarn.

yarn add tailwindcss

Then dig into your node_modules folder to run the Tailwind init command.

node_modules/.bin/tailwind init

This creates a sizeable configuration file named tailwind.js. It may look complicated, but it's not. It's just one large object with sensible defaults. With this large object you can configure the following categories: colors (text and bg), screens, font, textSizes, fontWeights, leading (line-height), tracking (line-spacing), backgroundSize, borderWidths, borderColors, borderRadius, width, height, minHeight, maxHeight, maxWidth, padding, margin, negativeMargin, shadows, zIndex, opacity, svgFill, svgStroke, state variants (hover, active), and responsive states.

Once you're happy with your configuration, generate your CSS. First create a basic style sheet with the needed Tailwind directives.

styles.css
@tailwind preflight;
@tailwind components;
@tailwind utilities;

Tailwind looks for these directives to understand what to generate. These @ directives will likely cause fits with your editor. However, this is totally fine for Tailwind. Run the command below to generate your CSS file.

./node_modules/.bin/tailwind build ./src/styles.css -c ./tailwind.js -o ./dist/styles.css

Voila. You have a built stylesheet courtesy of Tailwind.

Colors are the common configuration

You might be thinking, "Do I really need to customize each and every one of these fields?". No. You don't. I would wager that 99.9% of the time Tailwind users configure colors and move on. You might want to adjust the screen sizes to generate different responsive breakpoints, but that's up to you. Tailwind provides so many options that you'll find something that suites you.

Purge the CSS you don't need

One common complaint of Tailwind is about its size. The stock version of Tailwind is 24.6kb minified and gzipped. This isn't that bad, but it's really rare to need all the generated CSS. Remove unused CSS with tools like uncss, PurgeCSS, and critters.

Frontend News' Tailwind generated style sheet comes in at 2.5kb. Not too shabby at all.

Tailwind is granular

Tailwind is designed to use the most granular rules to avoid style conflicts. Take a look at setting a border.

<!-- BOX -->
<div class="border-black border-solid border-b-4 h-12">
  Here's a box with granular border control
</div>

Using border-black sets only the border-color CSS rule. Applying border-solid sets a single border-style rule. Adding border-b-4 sets a border-bottom-width rule. This granularity provides flexibility while avoiding style conflicts.

Tailwind is amazing for flexbox

Utility classes win you over when you start laying out elements. Tailwind's flexbox utilties are first class.

<!-- LAYOUT -->
<div class="container mx-auto flex justify-center items-center">
  EVERYTHING IS CENTERED!
</div>

Tailwind provides classes to set the display to flex, flex-direction to column if needed, and modify the justify-center and align-items properties. Want to create a header that aligns a logo to the left and the links to the right? No problem.

<!-- HEADER -->
<div class="w-screen text-blue font-sans text-xl bg-white flex justify-between items-center px-4">
  <h3>My Site</h3>
  <ul class="flex list-reset">
    <li class="px-4"><a href="/">Home</a></li>
    <li class="px-4"><a href="/about">About</a></li>
  </ul>
</div>

Responsive styles with classes

Tailwind builds in a set of responsive utilities. This is a little confusing at first, but it becomes powerful when you learn the ropes. Without any custom configuration Tailwind comes with the following screen sizes:

Prefix these helpers to common Tailwind utilties to see the responsive magic.

<!-- BOX -->
<div class="flex lg:font-bold lg:justify-center">
  Responsiveness!
</div>

Start small and override for larger sizes

The tricky part is that any classes you apply at smaller screen sizes are also used at larger screen sizes. Let's see what this means.

<!-- MESSAGE -->
<div class="font-normal lg:font-bold">
  The lg: utility makes this text bold on large screens
</div>

This works as you would expect. The text is bold once the screen width grows larger than 992 pixels. However, let's set a class to make the text red on small screens.

<!-- MESSAGE -->
<div class="font-normal lg:font-bold text-red">
  The text is red on the large screens too? 🤔
</div>

You'll notice that the text is red on larger screens, not just smaller screens. Also, if the screen width shrinks past 576 pixels the text color returns to black. This is the wrong way to apply responsive classes. Let's flip the script.

<!-- MESSAGE -->
<div class="text-red font-normal md:text-black lg:text-black lg:font-bold">
  Red text only on screen widths smaller than 768 pixels! 
</div>

Tailwind's responsive utilties work from small to large. Set the base styles for small screens and override them for larger screens. You're encounter far less problems once you start thinking this way.

Set state variants with classes

Tailwind also provides utilties to style hover, focus, and active states. This are known as state variants.

<!-- BUTTON -->
<button class="bg-blue hover:bg-blue-dark text-white px-4 py-4 text-lg uppercase rounded-lg">
  Sign Up!
</button>

This list of classes creates a blue button that is a darker blue when in a hover state. You'll need to manually configure active states if you want them included in your generated CSS. The Tailwind docs cover how to do this.

Tighten up long class lists with @apply

Some of you are thinking, "Enough with the classes! How is this maintainable!?". I hear you. The class list can get pretty long. Don't worry though, the Tailwind creators are smart. They gave us the @apply rule.

Move multiple utilities into your own custom selector using @apply. Let's say I want to create a class for the header above. All I need to do is open my styles.css file with the Tailwind directives and use an @apply rule.

styles.css
.my-header {
  @apply .text-blue .font-sans .text-xl .bg-white .flex .justify-between .items-center .px-4
}
.btn-blue {
  @apply .bg-blue .hover:bg-blue-dark .text-white .px-4 .py-4 .text-lg .uppercase .rounded-lg
}
@tailwind preflight;
@tailwind components;
@tailwind utilities;

Run the tailwind build command covered above and you'll have these classes for use.

<!-- HEADER -->
<div class="header">
  <h3>My Site</h3>
  <ul class="flex list-reset">
    <li class="px-4"><a href="/">Home</a></li>
    <li class="px-4"><a href="/about">About</a></li>
  </ul>
</div>

<button class="btn-blue">
  Sign Up!
</button>

Iterate styles quickly with Tailwind

Styling starts with a fuzzy picture of what classes are needed. Tailwind gives you the freedom to quickly iterate and form a cohesive style and tighen up to classes when the picture becomes clear.

Give Tailwind a spin

I create a quick and dirty Stackblitz example that uses the Tailwind CDN build. You can't customize it, but you can see what the fuss is all about.

Missed the last issue?

#2 The Clipboard API crashcourse

THE HEAP

Links to articles I actually read

Web performance

Reporting Observer

developers.google.com/web
When do errors happen in your app? Usually when you're not looking. Chrome has shipped a new API for observing when errors occur in your app. A great writeup by Eric Bidelman on a new web primitive.

Web Browser Eng Topic Deck

webbrowsereng.topicdeck.com
Paul Kinlan put together a feed of updates for major browsers like Chrome, Firefox, and Safari.

The Cost of JavaScript in 2018

medium.com/@addyosmani/
Addy Osmani does it again. This write up on JavaScript's impact on page load performance is gold. It's full of actionable tips and real life examples. A must read.

Demos

Pure CSS Stack

codepen.io/finnhvman
Love the game Stack? Well, Bence Szabó created a pure CSS version. It's just bonkers.

Connect the dot illustrations

timobecker.com
Connect the dots get an illustration. One of the most creative websites I've seen in a long time.

Pure CSS Mustached Nanny

codepen.io/miocene
Any time someone tells your CSS is a toy, point them to Julia Muzafarova's 8k line masterpiece.

PWA

NOTE! This section is curated my Maxim Salnikov! He's one of the most knowledgeable and passionate PWA developers out there. Give him a follow on Twitter.

A one year PWA retrospective

medium.com/@Pinterest_Engineering
"New signups increased by 843%" and other incredible numbers + some tech details in Zack Argyle's post about Pinterest PWA.

The Web Push Checklist

blog.usejournal.com
Senthil Padmanabhan is writing about eBay's learnings and research to provide the best user experience when dealing with notifications.

PWA: Progressive Web All-the-things

paul.kinlan.me
Based on the feedback gathered during 3 years of #PWA, Paul Kinlan is introducing PWA narrative in a way that every business and developer knows what they should focus on.

Angular

Inside Ivy: Exploring the New Angular Compiler

blog.angularindepth.com
Ivy may be the most exciting project in the Angular ecosystem. It's a new rendering engine that will drastically drop the size of Angular applications with few to no changes. Uri Shaked covers how Ivy works in depth with plenty of Stackblitz examples.

Angular Elements without zone.js

softwarearchitekt.at
I'm not the biggest fan of zone.js. When it works, it's fine. But it causes a lot of problems with external libs like Firebase / AngularFire. I'm the lead on the AngularFire project and we do A LOT of work to maintain Zones. Angular Elements is really exciting because it works without Zones. Manfred Steyer has a great write up it all works.

(P)React

FramerX

framer.com/x
FramerX isn't released just yet. But it has the potential to change how we design and build React apps. I received a beta invite recently, so expect an upcoming edition dedicated to FramerX.

Preact 8.3.0 is out!

twitter.com/_developit
Preact 8.3.0 just released with a whole bunch of improvements. Somehow in this teeny-tiny library someone found some dead code.

Fonts

Work Sans

fonts.google.com
Are you far too reliant on Open Sans, Lato, or Roboto? Give Work Sans a look. I'm considering switching the mono-spaced longform text to Worker Sans. Let me know what you think in the feedback form below 👇.

Modern Era

omsetype.co
The only thing that looks cooler than Modern Era is its landing page.

Machine Learning

Tensoflow.js Quick Start

youtube.com
AngularFirebase is one of the best channels out there on YouTube for dev content. Despite the name the channel covers far more than just Angular and Firebase.

FEEDBACK

I need to hear from you. It's super important

Every week I ask you what was good and what might have sucked. I read each piece of feedback and work to incorporate it into the future editions of the newsletter. It's just a brief Google Form.

Survey link is here!

Contact / Privacy Policy