Tailwind CSS WordPress Utilities
This Package contains a number of utilities for working with TailwindCSS and WordPress.
Install
Install the plugin:
# Using npm
npm install @eighteen73/tailwindcss-wordpress --save-dev
# Using Yarn
yarn add @eighteen73/tailwindcss-wordpress -D
Available Utilities
themeJson()
This function can be required in your tailwind.config.js
file to pull in values from your themes theme.json file.
Firstly require themeJson
:
// tailwind.config.js
const { themeJson } = require('@eighteen73/tailwindcss-wordpress');
This function expects a dot notation string to mimic the structure of theme.json
.
For example, to pass Tailwind the color palette:
// theme.json
"settings": {
// ...
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#DD93B5"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "orange"
},
{
"name": "Tertiary",
"slug": "tertiary",
"color": "#0F5B66"
}
],
// ...
// tailwind.config.js
module.exports = {
// ...
theme: {
colors: themeJson('settings.color.palette'),
},
};
This returns an object set up to match Tailwinds required format.