An Introduction to
Tailwind CSS

Ryan Durham

Senior Engineer @ Phylos
Owner @ Stage Right Labs

ryan at stagerightlabs dot com

stagerightlabs

Warning

This may sound crazy.

What is a "utility" framework?

Typical CSS Class


.profile {
display:flex;
flex-direction: column;
justify-content: space-between;
padding: 0.5rem;
margin: 1rem;
}




This is my bio!

Utility Classes


.flex {
display:flex;
}

.flex-column {
flex-direction: column;
}

.justify-between {
justify-content: space-between;
}

.p-2 {
padding: 0.5rem;
}

.m-4 {
margin: 1rem;
}

Example Usage




This is my bio!

You may be thinking:

"Why not just use style attributes?"

Style Attributes




This is my bio!

1. Design Systems

Using a palette of pre-defined classes forces you to stick within the parameters of your design system.

2. Responsive Design

Style attributes are not compatible with media queries.

Media Queries

3. Pseudo Selectors

Style attributes are not compatible with
pseudo selectors.

Pseudo Selectors

There are some
additional benefits

1.
No time spent thinking of class names.

2.
Stylesheet file size does not increase when you
add more site structure.

3.
No need to worry about breaking things when
making changes down the road.

A set of pre-defined utility classes that are
100% customizable.

Default Color Palette

https://tailwindcss.com/docs/customizing-colors/#default-color-palette

Default sizing scale for width, padding, margin, etc.

https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale

Lots of other things...

CSS Reset
Box Shadows
Flexbox
Grids & Containers
Media Queries
Pseudo Selectors
So much more...

Tailwind is available through a CDN, however this will limit you to just the default styles.

This is not recommended as a best practice.

Instead, you should install it via NPM and
add it to your asset pipeline.

This will allow you complete control over
the CSS generated by Tailwind.

PostCSS

"A tool for transforming CSS with JavaScript"

(Similar to Compass for Ruby,
though not exactly the same...)

How does it work?

PostCSS takes a CSS file and provides an API to analyze and modify its rules (by transforming them into an Abstract Syntax Tree). This API can then be used by plugins to do a lot of useful things, e.g. to find errors or automatically insert vendor prefixes.

https://github.com/postcss/postcss

Autoprefixer

https://github.com/postcss/autoprefixer

Add Tailwind to your asset pipeline:

PostCSS Plugin
Webpack
Gulp
Laravel Mix

https://tailwindcss.com/docs/installation#4-process-your-css-with-tailwind

Tailwind Config File


// tailwind.config.js
module.exports = {
theme: {},
variants: {},
plugins: [],
}

Everything is Configurable

Tailwind is not susceptible to the "Bootstrap" effect.

Is there a catch?

What are the downsides?

1. Duplication and Cognitive Load



#photography
#travel
#winter

Solution: Components


.tag {
@apply inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700;
}



#photography
#travel
#winter

https://tailwindcss.com/docs/extracting-components

2. Large CSS Files

Using only the default configuration, Tailwind CSS is 477kb un-minified and uncompressed.

Solution #1

Remove unused features via the config file.

Solution #2

Use PurgeCSS to remove unused styles at build time.

https://www.purgecss.com/

PurgeCSS is another PostCSS plugin that can be installed via NPM.

It scans your HTML and removes
unused classes from your CSS file.

Usage:

Add PurgeCSS to your asset pipeline
(Webpack, Gulp, etc.)
Tell PurgeCSS where your HTML templates live.
Provide rules for allowable class names.

Example: https://tailwindcss.com/docs/controlling-file-size/#setting-up-purgecss

Solution #3

Use compression.

https://tailwindcss.com/docs/controlling-file-size

You will probably end up using a combination of tactics to manage your production builds.

Live Demo

Further Resources

Try it. You will like it.

Thank you!