Within the 15 or so years since I began making WordPress web sites, nothing has had extra of an affect on my productiveness — and my skill to get pleasure from front-end growth — than including Tailwind CSS to my workflow (and it isn’t shut).
After I started working with Tailwind, there was an up-to-date, first-party repository on GitHub describing tips on how to use Tailwind with WordPress. That repository hasn’t been up to date since 2019. However that lack of updates isn’t a press release on Tailwind’s utility to WordPress builders. By permitting Tailwind to do what Tailwind does finest whereas letting WordPress nonetheless be WordPress, it’s attainable to make the most of one of the best elements of each platforms and construct trendy web sites in much less time.
The minimal setup instance on this article goals to supply an replace to that authentic setup repository, revised to work with the most recent variations of each Tailwind and WordPress. This strategy could be prolonged to work with all types of WordPress themes, from a forked default theme to one thing completely customized.
Why WordPress builders ought to care about Tailwind
Earlier than we speak about setup, it’s price stepping again and discussing how Tailwind works and what which means in a WordPress context.
Tailwind means that you can fashion HTML parts utilizing pre-existing utility lessons, eradicating the necessity so that you can write most or your whole web site’s CSS your self. (Assume lessons like hidden for show: hidden or uppercase for text-transform: uppercase.) When you’ve used frameworks like Bootstrap and Basis prior to now, the most important distinction you’ll discover with Tailwind CSS is its blank-slate strategy to design mixed with the lightness of being CSS-only, with only a CSS reset included by default. These properties permit for extremely optimized websites with out pushing builders in direction of an aesthetic constructed into the framework itself.
Additionally not like many different CSS frameworks, it’s infeasible to load a “normal” construct of Tailwind CSS from an present CDN. With all of its utility lessons included, the generated CSS file would merely be too giant. Tailwind affords a “Play CDN,” however it’s not meant for manufacturing, because it considerably reduces Tailwind’s efficiency advantages. (It does turn out to be useful, although, if you wish to do some speedy prototyping or in any other case experiment with Tailwind with out really putting in it or establishing a construct course of.)
This want to make use of Tailwind’s construct course of to create a subset of the framework’s utility lessons particular to your challenge makes it necessary to know how Tailwind decides which utility lessons to incorporate, and the way this course of impacts the usage of utility lessons in WordPress’s editor.
And, lastly, Tailwind’s aggressive Preflight (its model of a CSS reset) means some elements of WordPress will not be well-suited to the framework with its default settings.
Let’s start by the place Tailwind works properly with WordPress.
The place Tailwind and WordPress work properly collectively
To ensure that Tailwind to work properly with out important customization, it must act as the first CSS for a given web page; this eliminates quite a few use circumstances inside WordPress.
When you’re constructing a WordPress plugin and it’s good to embody front-end CSS, for instance, Tailwind’s Preflight can be in direct battle with the lively theme. Equally, if it’s good to fashion the WordPress administration space — exterior of the editor — the administration space’s personal types could also be overridden.
There are methods round each of those points: You may disable Preflight and add a prefix to your whole utility lessons, or you may use PostCSS so as to add a namespace to your whole selectors. Both manner, your configuration and workflow are going to get extra sophisticated.
However in the event you’re constructing a theme, Tailwind is a superb match proper out of the field. I’ve had success creating customized themes utilizing each the basic editor and the block editor, and I’m optimistic that as full-site modifying matures, there will probably be quite a few full-site modifying options that work properly alongside Tailwind.
In her weblog put up “Gutenberg Full Website Enhancing doesn’t should be full,” Tammie Lister describes full-site modifying as a set of separate options that may be adopted partially or in full. It’s unlikely full-site modifying’s International Kinds performance will ever work with Tailwind, however many different options most likely will.
So: You’re constructing a theme, Tailwind is put in and configured, and also you’re including utility lessons with a smile in your face. However will these utility lessons work within the WordPress editor?
With planning, sure! Utility lessons will probably be obtainable to make use of within the editor as long as you resolve which of them you’d like to make use of prematurely. You’re unable to open up the editor and use any and all Tailwind utility lessons; baked into Tailwind’s emphasis on efficiency is the limitation of solely together with the utility lessons your theme makes use of, so it’s good to let Tailwind know prematurely which of them are required within the editor regardless of them being absent elsewhere in your code.
There are a selection of the way to do that: You may create a safelist inside your Tailwind configuration file; you may embody feedback containing lists of lessons alongside the code for customized blocks you’ll need to fashion within the block editor; you may even simply create a file itemizing your whole editor-specific lessons and inform Tailwind to incorporate it as one of many supply recordsdata it screens for sophistication names.
The necessity to decide to editor lessons prematurely has by no means held me again in my work, however this stays the side of the connection between Tailwind and WordPress I get requested about essentially the most.
A minimal WordPress theme with a minimal Tailwind CSS integration
Let’s begin with essentially the most primary WordPress theme attainable. There are solely two required recordsdata:
fashion.cssindex.php
We’ll generate fashion.css utilizing Tailwind. For index.php, let’s begin with one thing easy:
<!doctype html>
<html lang=”en”>
<head>
<?php wp_head(); ?>
<hyperlink rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>” sort=”textual content/css” media=”all” />
</head>
<physique>
<?php
if ( have_posts() ) {
whereas ( have_posts() ) {
the_post();
the_title( ‘<h1 class=”entry-title”>’, ‘</h1>’ );
?>
<div class=”entry-content”>
<?php the_content(); ?>
</div>
<?php
}
}
?>
</physique>
</html>
There are quite a lot of issues a WordPress theme ought to do this the above code doesn’t — issues like pagination, put up thumbnails, enqueuing stylesheets as a substitute of utilizing hyperlink parts, and so forth — however this will probably be sufficient to show a put up and check that Tailwind is working because it ought to.
On the Tailwind facet, we want three recordsdata:
package deal.jsontailwind.config.jsAn enter file for Tailwind
Earlier than we go any additional, you’re going to want npm. When you’re uncomfortable working with it, we’ve got a newbie’s information to npm that could be a good place to start out!
Since there is no such thing as a package deal.json file but, we’ll create an empty JSON file in the identical folder with index.php by operating this command in our terminal of alternative:
echo {} > ./package deal.json
With this file in place, we are able to set up Tailwind:
npm set up tailwindcss –save-dev
And generate our Tailwind configuration file:
npx tailwindcss init
In our tailwind.config.js file, all we have to do is inform Tailwind to seek for utility lessons in our PHP recordsdata:
module.exports = {
content material: [“./**/*.php”],
theme: {
lengthen: {},
},
plugins: [],
}
If our theme used Composer, we’d need to ignore the seller listing by including one thing like “!**/vendor/**” to the content material array. But when your whole PHP recordsdata are a part of your theme, the above will work!
We will identify our enter file something we wish. Let’s create a file known as tailwind.css and add this to it:
/*!
Theme Title: WordPress + Tailwind
*/
@tailwind base;
@tailwind elements;
@tailwind utilities;
The highest remark is required by WordPress to acknowledge the theme; the three @tailwind directives add every of Tailwind’s layers.
And that’s it! We will now run the next command:
npx tailwindcss -i ./tailwind.css -o ./fashion.css –watch
This tells the Tailwind CLI to generate our fashion.css file utilizing tailwind.css because the enter file. The –watch flag will repeatedly rebuild the fashion.css file as utility lessons are added or faraway from any PHP file in our challenge repository.
That’s so simple as a Tailwind-powered WordPress theme may conceivably be, however it’s unlikely to be one thing you’d ever need to deploy to manufacturing. So, let’s speak about some pathways to a production-ready theme.
Including TailwindCSS to an present theme
There are two the reason why you may need to add Tailwind CSS to an present theme that already has its personal vanilla CSS:
To experiment with including Tailwind elements to an already styled themeTo transition a theme from vanilla CSS to Tailwind
We’ll exhibit this by putting in Tailwind inside Twenty Twenty-One, the WordPress default theme. (Why not Twenty Twenty-Two? The latest WordPress default theme is supposed to showcase full-site modifying and isn’t a great match for a Tailwind integration.)
To begin, it is best to obtain and set up the theme in your growth setting if it isn’t put in there. We solely have to observe a handful of steps after that:
Navigate to the theme folder in your terminal.As a result of Twenty Twenty-One already has its personal package deal.json file, set up Tailwind with out creating a brand new one:
npm set up tailwindcss –save-dev
Add your tailwind.config.json file:
npx tailwindcss init
Replace your tailwind.config.json file to look the identical because the one within the earlier part.Copy Twenty Twenty-One’s present fashion.css file to tailwind.css.
Now we have to add our three @tailwind directives to the tailwind.css file. I counsel structuring your tailwind.css file as follows:
/* The WordPress theme file header goes right here. */
@tailwind base;
/* The entire present CSS goes right here. */
@tailwind elements;
@tailwind utilities;
Placing the bottom layer instantly after the theme header ensures that WordPress continues to detect your theme whereas additionally guaranteeing the Tailwind CSS reset comes as early within the file as attainable.
The entire present CSS follows the bottom layer, guaranteeing that these types take priority over the reset.
And at last, the elements and utilities layers observe to allow them to take priority over any CSS declarations with the identical specificity.
And now, as with our minimal theme, we’ll run the next command:
npx tailwindcss -i ./tailwind.css -o ./fashion.css –watch
Along with your new fashion.css file now being generated every time you modify a PHP file, it is best to test your revised theme for minor rendering variations from the unique. These are brought on by Tailwind’s CSS reset, which resets issues a bit additional than some themes may anticipate. Within the case of Twenty Twenty-One, the one repair I made was so as to add text-decoration-line: underline to the a factor.
With that rendering problem resolved, let’s add the Header Banner Element from Tailwind UI, Tailwind’s first-party part library. Copy the code from the Tailwind UI web site and paste it instantly following the “Skip to content material” hyperlink in header.php:
Fairly good! As a result of we’re now going to need to use utility lessons to override a number of the present higher-specificity lessons constructed into the theme, we’re going so as to add a single line to the tailwind.config.js file:
module.exports = {
necessary: true,
content material: [“./**/*.php”],
theme: {
lengthen: {},
},
plugins: [],
}
This marks all Tailwind CSS utilities as !necessary to allow them to override present lessons with a better specificity. (I’ve by no means set necessary to true in manufacturing, however I nearly actually would if I have been within the strategy of changing a web site from vanilla CSS to Tailwind.)
With a fast no-underline class added to the “Be taught extra” hyperlink and bg-transparent and border-0 added to the dismiss button, we’re all set:
It appears to be like a bit jarring to see Tailwind UI’s elements merged right into a WordPress default theme, however it’s an awesome demonstration of Tailwind elements and their inherent portability.
Ranging from scratch
When you’re creating a brand new theme with Tailwind, your course of will look quite a bit just like the minimal instance above. As a substitute of operating the Tailwind CLI immediately from the command line, you’ll most likely need to create separate npm scripts for growth and manufacturing builds, and to look at for modifications. You might also need to create a separate construct particularly for the WordPress editor.
When you’re searching for a place to begin past the minimal instance above — however not thus far past that it comes with opinionated types of its personal — I’ve created a Tailwind-optimized WordPress theme generator impressed by Underscores (_s), as soon as the canonical WordPress starter theme. Referred to as _tw, that is the quick-start I want I had once I first mixed Tailwind with WordPress. It stays step one in all of my shopper tasks.
When you’re keen to go farther from the construction of a typical WordPress theme and add Laravel Blade templates to your toolkit, Sage is a superb alternative, they usually have a setup information particular to Tailwind to get you began.
Nonetheless you select to start, I encourage you to take a while to acclimate your self to Tailwind CSS and to styling HTML paperwork utilizing utility lessons: It could really feel uncommon at first, however you’ll quickly end up taking over extra shopper work than earlier than since you’re constructing websites sooner than you used to — and hopefully, like me, having extra enjoyable doing it.
Including Tailwind CSS to New and Present WordPress Themes initially revealed on CSS-Methods. It is best to get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!