How To Override Theme Css In Wordpress To Change Text Transform

In the 15 or so years since I started making WordPress websites, nothing has had more of an bear upon on my productivity — and my ability to enjoy front-end evolution — than adding Tailwind CSS to my workflow (and it isn't close).

When I began working with Tailwind, there was an upwards-to-engagement, first-party repository on GitHub describing how to apply Tailwind with WordPress. That repository hasn't been updated since 2019. But that lack of updates isn't a statement on Tailwind's utility to WordPress developers. By assuasive Tailwind to do what Tailwind does all-time while letting WordPress still be WordPress, it's possible to have advantage of the best parts of both platforms and build modern websites in less time.

The minimal setup example in this article aims to provide an update to that original setup repository, revised to work with the latest versions of both Tailwind and WordPress. This arroyo can be extended to work with all kinds of WordPress themes, from a forked default theme to something totally custom.

Why WordPress developers should intendance almost Tailwind

Earlier we talk nigh setup, it'due south worth stepping dorsum and discussing how Tailwind works and what that means in a WordPress context.

Tailwind allows you to style HTML elements using pre-existing utility classes, removing the need for y'all to write almost or all of your site'southward CSS yourself. (Think classes like subconscious for brandish: hidden or uppercase for text-transform: uppercase.) If you've used frameworks like Bootstrap and Foundation in the past, the biggest difference you'll notice with Tailwind CSS is its blank-slate approach to design combined with the lightness of being CSS-but, with just a CSS reset included by default. These properties permit for highly optimized sites without pushing developers towards an artful congenital into the framework itself.

Also different many other CSS frameworks, it's infeasible to load a "standard" build of Tailwind CSS from an existing CDN. With all of its utility classes included, the generated CSS file would simply be also large. Tailwind offers a "Play CDN," but information technology'south not meant for product, as it significantly reduces Tailwind'due south performance benefits. (It does come in handy, though, if you desire to do some rapid prototyping or otherwise experiment with Tailwind without actually installing information technology or setting up a build process.)

This need to use Tailwind's build procedure to create a subset of the framework's utility classes specific to your projection makes it important to sympathize how Tailwind decides which utility classes to include, and how this procedure affects the use of utility classes in WordPress's editor.

And, finally, Tailwind's aggressive Preflight (its version of a CSS reset) means some parts of WordPress are non well-suited to the framework with its default settings.

Permit's begin past looking at where Tailwind works well with WordPress.

Where Tailwind and WordPress work well together

In gild for Tailwind to work well without significant customization, it needs to act as the master CSS for a given page; this eliminates a number of use cases inside WordPress.

If y'all're building a WordPress plugin and you lot demand to include front-end CSS, for instance, Tailwind's Preflight would exist in direct conflict with the active theme. Similarly, if you need to mode the WordPress assistants area — outside of the editor — the assistants area's own styles may exist overridden.

At that place are ways around both of these problems: You can disable Preflight and add a prefix to all of your utility classes, or yous could use PostCSS to add a namespace to all of your selectors. Either way, your configuration and workflow are going to become more complicated.

But if you're building a theme, Tailwind is an splendid fit correct out of the box. I've had success creating custom themes using both the classic editor and the block editor, and I'm optimistic that as full-site editing matures, at that place volition exist a number of full-site editing features that piece of work well aslope Tailwind.

In her blog post "Gutenberg Total Site Editing does not have to be full," Tammie Lister describes total-site editing equally a set up of split up features that tin exist adopted in part or in full. Information technology's unlikely total-site editing'southward Global Styles functionality volition ever work with Tailwind, but many other features probably volition.

So: You're building a theme, Tailwind is installed and configured, and you're adding utility classes with a grinning on your face. Just will those utility classes work in the WordPress editor?

With planning, yes! Utility classes will exist available to use in the editor and then long as you decide which ones you'd like to apply in advance. Yous're unable to open up the editor and use whatever and all Tailwind utility classes; baked into Tailwind's emphasis on performance is the limitation of only including the utility classes your theme uses, and so yous need to permit Tailwind know in advance which ones are required in the editor despite them being absent elsewhere in your code.

At that place are a number of ways to exercise this: You lot can create a safelist within your Tailwind configuration file; you tin can include comments containing lists of classes alongside the lawmaking for custom blocks you'll want to style in the block editor; you could fifty-fifty just create a file listing all of your editor-specific classes and tell Tailwind to include it as one of the source files it monitors for form names.

The need to commit to editor classes in advance has never held me back in my work, but this remains the aspect of the relationship between Tailwind and WordPress I get asked about the most.

A minimal WordPress theme with a minimal Tailwind CSS integration

Let'south showtime with the most basic WordPress theme possible. In that location are only two required files:

• style.css
• index.php

Nosotros'll generate mode.css using Tailwind. For index.php, allow's get-go with something simple:

          <!doctype html> <html lang="en">   <caput>     <?php wp_head(); ?>     <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" blazon="text/css" media="all" />   </head>   <body>     <?php     if ( have_posts() ) {       while ( have_posts() ) {         the_post();         the_title( '<h1 class="entry-championship">', '</h1>' );         ?>         <div form="entry-content">           <?php the_content(); ?>         </div>         <?php       }     }     ?>   </body> </html>        

At that place are a lot of things a WordPress theme should do that the in a higher place code doesn't — things like pagination, post thumbnails, enqueuing stylesheets instead of using link elements, and then on — but this will be enough to display a post and test that Tailwind is working as information technology should.

On the Tailwind side, we need 3 files:

• packet.json
• tailwind.config.js
• An input file for Tailwind

Before we go any further, you're going to need npm. If you're uncomfortable working with it, nosotros have a beginner's guide to npm that is a good place to start!

Since at that place is no packet.json file yet, we'll create an empty JSON file in the aforementioned folder with index.php by running this command in our terminal of selection:

          echo {} > ./package.json        

With this file in identify, we can install Tailwind:

          npm install tailwindcss --save-dev        

And generate our Tailwind configuration file:

          npx tailwindcss init        

In our tailwind.config.js file, all we need to do is tell Tailwind to search for utility classes in our PHP files:

          module.exports = {   content: ["./**/*.php"],   theme: {     extend: {},   },   plugins: [], }        

If our theme used Composer, nosotros'd want to ignore the vendor directory by calculation something like "!**/vendor/**" to the content array. Merely if all of your PHP files are office of your theme, the above volition work!

We can name our input file anything we desire. Let's create a file chosen tailwind.css and add together this to it:

          /*! Theme Proper name: WordPress + Tailwind */  @tailwind base; @tailwind components; @tailwind utilities;        

The pinnacle comment is required by WordPress to recognize the theme; the three @tailwind directives add each of Tailwind's layers.

And that's it! We tin can now run the following command:

          npx tailwindcss -i ./tailwind.css -o ./way.css --watch        

This tells the Tailwind CLI to generate our style.css file using tailwind.css as the input file. The --watch flag volition continuously rebuild the mode.css file as utility classes are added or removed from any PHP file in our projection repository.

That'southward as simple as a Tailwind-powered WordPress theme could conceivably be, just information technology's unlikely to be something you'd ever want to deploy to production. So, let's talk nigh some pathways to a product-fix theme.

Adding TailwindCSS to an existing theme

There are two reasons why you might want to add Tailwind CSS to an existing theme that already has its own vanilla CSS:

• To experiment with calculation Tailwind components to an already styled theme
• To transition a theme from vanilla CSS to Tailwind

We'll demonstrate this by installing Tailwind within Twenty Twenty-1, the WordPress default theme. (Why not Twenty Xx-Two? The virtually recent WordPress default theme is meant to showcase full-site editing and isn't a practiced fit for a Tailwind integration.)

To showtime, you should download and install the theme in your evolution environment if information technology isn't installed there. We just need to follow a handful of steps subsequently that:

• Navigate to the theme binder in your terminal.
• Considering Twenty Xx-One already has its own package.json file, install Tailwind without creating a new one:

          npm install tailwindcss --save-dev        

• Add together your tailwind.config.json file:

          npx tailwindcss init        

• Update your tailwind.config.json file to look the same equally the ane in the previous section.
• Copy Twenty Twenty-Ane's existing style.css file to tailwind.css.

Now nosotros need to add our three @tailwind directives to the tailwind.css file. I suggest structuring your tailwind.css file as follows:

          /* The WordPress theme file header goes here. */  @tailwind base;  /* All of the existing CSS goes here. */  @tailwind components; @tailwind utilities;        

Putting the base layer immediately after the theme header ensures that WordPress continues to detect your theme while too ensuring the Tailwind CSS reset comes as early in the file equally possible.

All of the existing CSS follows the base layer, ensuring that these styles take precedence over the reset.

And finally, the components and utilities layers follow and so they tin can take precedence over whatever CSS declarations with the aforementioned specificity.

And now, as with our minimal theme, we'll run the following command:

          npx tailwindcss -i ./tailwind.css -o ./mode.css --sentinel        

With your new style.css file now existence generated each time you modify a PHP file, you should bank check your revised theme for minor rendering differences from the original. These are caused by Tailwind's CSS reset, which resets things a bit farther than some themes might expect. In the example of Xx Twenty-I, the only fix I made was to add text-decoration-line: underline to the a element.

With that rendering upshot resolved, allow's add the Header Banner Component from Tailwind UI, Tailwind'due south first-party component library. Copy the lawmaking from the Tailwind UI site and paste it immediately post-obit the "Skip to content" link in header.php:

Pretty good! Considering we're now going to desire to utilise utility classes to override some of the existing college-specificity classes built into the theme, nosotros're going to add a single line to the tailwind.config.js file:

          module.exports = {   important: true,   content: ["./**/*.php"],   theme: {     extend: {},   },   plugins: [], }        

This marks all Tailwind CSS utilities as !of import so they can override existing classes with a higher specificity. (I've never set important to true in production, but I almost certainly would if I were in the process of converting a site from vanilla CSS to Tailwind.)

With a quick no-underline form added to the "Learn more" link and bg-transparent and border-0 added to the dismiss button, nosotros're all set up:

It looks a bit jarring to see Tailwind UI's components merged into a WordPress default theme, but it's a great demonstration of Tailwind components and their inherent portability.

Starting from scratch

If yous're creating a new theme with Tailwind, your process will look a lot similar the minimal example above. Instead of running the Tailwind CLI directly from the command line, you'll probably want to create separate npm scripts for development and production builds, and to watch for changes. You lot may also want to create a separate build specifically for the WordPress editor.

If you're looking for a starting point beyond the minimal example to a higher place — only non and then far beyond that it comes with opinionated styles of its ain — I've created a Tailwind-optimized WordPress theme generator inspired by Underscores (_s), once the canonical WordPress starter theme. Called _tw, this is the quick-kickoff I wish I had when I first combined Tailwind with WordPress. It remains the showtime step in all of my client projects.

If you're willing to go further from the structure of a typical WordPress theme and add Laravel Blade templates to your toolkit, Sage is a smashing choice, and they have a setup guide specific to Tailwind to get you started.

---

Notwithstanding y'all choose to begin, I encourage you lot to have some fourth dimension to acclimatize yourself to Tailwind CSS and to styling HTML documents using utility classes: It may feel unusual at first, but y'all'll soon detect yourself taking on more client work than earlier because you're edifice sites faster than you used to — and hopefully, similar me, having more fun doing information technology.

Source: https://css-tricks.com/adding-tailwind-css-to-wordpress-themes/

Posted by: diassplight.blogspot.com

Share this post