Tailwind CSS WordPress Utility Classes
Tailwind CSS plugin for generating WordPress utility classes - for block editor, accessibility, alignment and image captions.
I am working through Block editor compatability, so YMMV. Please open a PR on Github if you find a problem or have an improvement to share.
This plugin currently includes:
- Block editor colour palette classes:
.has-[color]-text-color
and.has-[color]-background-color
- Block editor font size classes:
.has-[size]-font-size
- Accessibility class:
.screen-reader-text
- Alignment classes:
.alignnone
- Block editor button alignments are now accounted for, i.e.
.wp-block-button.alignleft
- Block editor button alignments are now accounted for, i.e.
- Image caption classes:
.wp-caption
Props to @knowler and @brettsmason. I've basically combined their work.
Install
- Install the plugin:
# Using npm
npm install @mattrad/tailwindcss-wordpress --save-dev
# Using Yarn
yarn add @mattrad/tailwindcss-wordpress -D
- Add it to your
tailwind.config.js
file:
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@mattrad/tailwindcss-wordpress')
]
}
Usage
Block editor classes use the keys editorColorPalette
and editorFontSizes
in your Tailwind config’s theme
object to generate the utilities. Here is an example:
// tailwind.config.js
{
theme: {
editorColorPalette: {
'primary': '#f2f2f2',
'secondary': '#ccc',
},
editorFontSizes: {
'small': '0.875rem',
'medium': '1.125rem',
},
},
plugins: [
require('@mattrad/tailwindcss-wordpress')(),
],
}