# Using Tailwind to increase your development speed

Tailwind - CSS - June 29th, 2019
Using Tailwind to increase your development speed

I work in for an online marketing agency. The work I do is mainly focused on the frontend of websites. Our projects are usually very fast paced with strict deadlines, so naturally, you want to use tools that allow quicker development while also keeping things nice and tidy.

CSS preprocessors like SCSS help a lot. Having variables in your CSS is a godsend. You never ever have to search for some stupid color's hex value in your 5000+ line CSS file ever again. You can easily split up your file in several smaller files and organize them in a neat way that makes sense for your project.

Frameworks like Bootstrap or Foundation are built on top of such preprocessors and allow you do manually configure variables or disable modules that you don't need at all. Most of the time I would only use the Grid module anyway and remove the rest.

# Why do we even need another framework then?

It might sound stupid, but we spend a lot of time thinking about what to name our classes, or where to put this specific piece of code. The most annoying thing for me personally was always different spacing in responsive layouts. My mobile page needs a margin-bottom of 1.5rem, for tablets we have 2rem and on desktop we need 3rem. I hated having to write all these media queries for the small stuff.

Tailwind removes this burden from us. It allows as to quickly whip up the configuration file, define a couple of colors, edit the default font stack and start working on the layout without even touching our CSS. No need to write media queries or hover styles. That is all included out of the box and heavily customizable. It sounds magical because it is.

Of course, Tailwind has great documentation. Nearly every CSS property you need has its own utility.

# Installing Tailwind

Tailwind, like any other framework, is available on a CDN, but please do me a favor and configure it yourself. It wasn't intended for people to use the base configuration.

Simply pull it in via your package manager:

yarn add tailwindcss

Next, we need to generate the tailwind.config.js file:

yarn run tailwind init

Here you can add colors, choose the screen sizes, edit the font-stack und much more.

After that, we need to add the following to our CSS file:

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

Tailwind is a plugin for PostCSS. It generates all these classes based on your configuration via JavaScript and injects it into your CSS via the @tailwind directive.

I use Laravel for most of my projects, so for compiling my assets I always use laravel-mix. Here's how you would se tup Tailwind with mix:

const mix = require('laravel-mix');
const tailwind = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .options({
    postCss: [
      tailwind('tailwind.config.js')
    ]
  });

Simply call the options method and add tailwind with the path to your config file to the postCss array.

# Composing reusable components

Consider the following markup:

<div class="p-8">
 <a href="#" class="border-2 border-blue-700 color-blue-700 px-3 py-2 rounded-full tracking-wide uppercase font-bold hover:text-white hover:bg-blue-700 mr-4">
  Buy now
 </a>
 <a href="#" class="border-2 border-blue-700 color-blue-700 px-3 py-2 rounded-full tracking-wide uppercase font-bold hover:text-white hover:bg-blue-700">
  Maybe later
 </a>
</div>

You might notice, that you can get only so far with utility classes before 2 Problems arise.

  • Class declarations get incredibly long.
  • You have a lot of duplicate code, which is hard to maintain.

Here's where the custom @apply directive comes into play. This allows you to take some utility classes and extract them to a custom CSS class, like so:

<div class="p-8">
 <a href="#" class="btn mr-4">
  Buy now
 </a>
 <a href="#" class="btn">
  Maybe later
 </a>
</div>

And then in your CSS:

.btn {
 @apply border-2 border-blue-700 color-blue-700 px-3 py-2 rounded-full tracking-wide uppercase font-bold;
}

.btn:hover {
 @apply text-white bg-blue-700
}

Much better!

But please note, that hover:*, focus:*, and responsive utilities cannot be extracted in the base class declaration.

# Page load times

I personally enjoy optimizing the websites I build on a microscopic level and Tailwind often generates 30k+ lines of CSS of which I only use maybe 1%. Luckily there are tools to remove unused CSS, for example, Purgecss. It scans your templates for any class names, takes your CSS and removes anything that it couldn't find. It is absolutely awesome. You'll have trouble generating a file that is over 10kb gzipped.

Of course setting it up with laravel-mix is as easy as 1-2-3, since there is a nice package already available: laravel-mix-purgecss. Simply add it with your package manager and edit your webpack.mix.js as follows:

const mix = require('laravel-mix');
const tailwind = require('tailwindcss');
const purgeCss = require('laravel-mix-purgecss');

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .options({
    postCss: [
      tailwind('tailwind.config.js')
    ]
  })
  .purgeCss();

That's it. Of course, purgecss can be configured if needed, but most of the time this is everything you need. This plugin will only purge your CSS in production builds so there is literally no reason not to use this tool for your app.

# In conclusion

Tailwind provides a great developer experience and with laravel-mix it is especially easy to set up. The documentation is great and its enormous file size can easily be controlled with Purgecss. If you haven't tried it you definitely should.