@brettsmason/tailwindcss-wordpress v0.1.0

Tailwind CSS WordPress Utility Classes

Tailwind CSS plugin for generating WordPress utility classes.

This plugin currently includes:

• Editor Color Palette classes (.has-[color]-text-color and .has-[color]-background-class)
• Editor Font Size classes (.has-[size]-font-size)
• .screen-reader-text - WordPress specific accessibility class

Install

1. Install the plugin:

   # Using npm
   npm install @brettsmason/tailwindcss-wordpress --save-dev
   
   # Using Yarn
   yarn add @brettsmason/tailwindcss-wordpress -D

2. Add it to your tailwind.config.js file:

   // tailwind.config.js
   module.exports = {
     // ...
     plugins: [
       require('@brettsmason/tailwindcss-wordpress')
     ]
   }

Usage

This plugin uses 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': '16px',
      'medium': '22px',
    },
  },
  plugins: [
    require('@brettsmason/tailwindcss-wordpress')(),
  ],
}