Skip to content

Tailwind CSS plugin for WordPress specific utility classes.

Notifications You must be signed in to change notification settings

brettsmason/tailwindcss-wordpress

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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-color)
  • 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
  1. 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')(),
  ],
}

About

Tailwind CSS plugin for WordPress specific utility classes.

Resources

Stars

Watchers

Forks

Packages

No packages published