Skip to content

Documentation

WordPress and Tailwind: An introduction

Learn how Tailwind and WordPress work best together and when they should be kept apart

CSS in WordPress

A typical WordPress site loads CSS from three sources:

  • WordPress itself
  • Active plugins
  • The active theme

That CSS can target either the site’s front end or the administration area.

Tailwind is excellent at creating the CSS provided by the active theme targeting the site’s front end.

Why can’t plugins use Tailwind?

In order to work properly, Tailwind requires an aggressive CSS reset. For a WordPress plugin to adopt Tailwind successfully for its front-end CSS, all other CSS loaded by a page would need to be compatible with this reset. This demands a level of primacy in dictating the CSS environment that hasn’t traditionally been given to plugins.

Why can’t themes use Tailwind in the administration area (outside the block editor)?

To the extent that a theme provides custom CSS for WordPress’s administration area, Tailwind is unlikely to work as expected. Themes will be better served by embracing the administration area’s included CSS and by mirroring the HTML structure of existing administration pages. (And if you find yourself needing administration area styles outside the block editor, you could be in plugin territory: It may be worth transitioning that functionality into a dedicated plugin.)

What about the block editor?

WordPress themes can opt in to provide block editor styles using add_theme_support( 'editor-styles' ) and can then point to an appropriate CSS file using the add_editor_style function.

_tw takes care of this, and automatically creates a separate CSS file compatible with the block editor.

If you want to use Tailwind and WordPress together without using _tw, please be aware that the block editor’s requirements for this file may not be compatible with the front-end CSS you’ve written for your site, and will vary significantly if you’re using Tailwind in conjunction with Tailwind Typography. However, with an appropriate build process, it’s possible to create front-end and editor styles from the same source files supporting both use cases. By using _tw, you’ll be able to avoid the work of setting up this build process yourself.

What about full-site editing?

WordPress’s full-site editing functionality remains very much in flux, but right now the way styles are translated from theme.json into front-end CSS does not work well when paired with Tailwind.

My current expectation is that hybrid themes using a theme.json file to integrate with the block editor, but that do not support full-site-editing, will continue to be the best path forward for Tailwind-based WordPress themes. This is the approach that _tw uses and will continue to use.


Next Up

Generate your custom theme
The first step on your path to adding Tailwind to your WordPress development toolkit


All Documentation