Don't write CSS, configure it with Tailwind

August 08, 2018 0 Comments

Don't write CSS, configure it with Tailwind

 

 

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:

  • container - This provides the width across different responsive breakpoints.
  • mx-auto - This is your essential: margin: 0 auto; The m stands for margin. The x stands for the horizontal x-axis. This is a common pattern in Tailwind. The auto is the value.
  • px-4 - Provide 1em of padding to the left and right, the x-axis.
  • py-4 - Provide 1em of padding to the top and bottom, the y-axis.
  • text-blue-darkest - Set the text color to #12283a.

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.

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

nodemodules/.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:

  • sm: - @media (min-width: 576px) { }
  • md: - @media (min-width: 768px) { }
  • lg: - @media (min-width: 992px) { }
  • xl: - @media (min-width: 1200px) { }

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.


Tag cloud