Why Tailwind.css is great for WordPress 5.0

Jason Houston

Jason is a Front-End Web Developer, Designer, SEO Consultant, and owner of Complete Web. He has 15 years experience working in website development. For new site work you can reach Jason here.

Tailwind Website Homepage Screenshot

What is Tailwind.css?

Tailwind.css is a utility CSS framework meaning that it is a stylesheet that comes with predetermined classes that can be used to style any element of a website. With Tailwind there is no need to actually write your own CSS classes and styles. This is good for the following reasons:

  • Fast Front-End Development
  • Lightweight CSS Files (Must use PurgeCSS)
  • Consistency throughout (Less CSS bugs, layout issues and surprise! CSS domino effects)
  • Pre-cached (No need to keep asking clients to clear their cache!)
  • Set Classes different browser widths without writing media queries
  • Extremely Customizable
  • Fun to work with
  • No need to “rediscover” old project CSS files

A big thank you to the Tailwind.css founders that have put in the long hours of hard work to make this amazing framework what it is today. Tailwind has cut my development time in half, allowing for more projects to be completed in less time.

Thank you to: @adamwathan @reinink @davidhemphill@steveschoger

Why is Tailwind.css great to use with Gutenburg (WP 5.0)?

To get to the point of this post, the great thing about using Tailwind with WordPress 5.0 is that you can apply the Tailwind classes to the WordPress blocks.

Here is an example of adding one of the Tailwind.css utility classes to a WordPress editor block.

Before WordPress upgraded to using block style editing, one of the biggest issues was trying to add space between text. With Tailwind, this becomes easy to control any element on the page. To add a 2.5 rem margin to the bottom of my page header, all that is needed is to click on the block and add the class to the “advanced” field for that block. Adding the “mb-10” (Margin bottom 2.5 rem) will easily solve this.

  1. First .GIF is adding the class to the block.
  2. Second .GIF is the result of the padding.
Adding Tailwind.css to WordPress blocks
Adding Tailwind.css to WordPress blocks


Tailwind.css is much more powerful than just adding a margin. We could change the background color (bg-grey), change the text color (text-blue), padding, and anything else listed in the Tailwind.css documentation here

How to add to your theme

To add Tailwind to any project or theme you could just add the CDN link to experiment with the framework.

The best way to add Tailwind.css is to start with a Skelton base WordPress theme and build the theme from scratch using the Tailwind classes. This is get a bit more involved for WordPress developers that are just used to installing prebuilt themes with page-builders. You need to be able to develop locally using Node.js and terminal. Once you get the initial set-up complete, development is a breeze!

We use Tailwind in all our website design and development. This is great for our clients that want to be able to add the Tailwind.css classes throughout the site and have better control over the content they create.

Here are some of recent sites we have built using Tailwind.css:

This website is using Tailwind.css Completewebcharleston.com

Alfano Furniture

Dr. Desiree Pearson Phd

GCAM

Pinnacle 1 Tax Services

Sanctuary Investment Group

Career Moves, LLC