Skip to content

Instantly share code, notes, and snippets.

@monkeymonk

monkeymonk/tailwind.config.js

Created March 9, 2022 17:34
Show Gist options
  • Save monkeymonk/794d555050820959373022ac51b13b6f to your computer and use it in GitHub Desktop.
Save monkeymonk/794d555050820959373022ac51b13b6f to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind config extended by WordPress theme.json
Raw
tailwind.config.js
const fs = require('fs');
const colors = require('tailwindcss/colors');
const themeJson = JSON.parse(fs.readFileSync('./theme.json'));
module.exports = {
theme: {
extend: {
colors: useThemeJSONWith({
// brand
primary: colors.purple,
secondary: colors.teal,
// state
info: colors.sky,
success: colors.emerald,
warning: colors.amber,
danger: colors.red,
// mode
light: colors.stone,
dark: colors.gray,
}),
},
},
};
/**
* Read theme.json to apply those colors to our Tailwind config.
* @param defaultColors
* @return {*}
*/
function useThemeJSONWith(defaultColors = {}) {
return {...defaultColors, ...themeJSON.settings.color.palette.reduce((acc, item) => {
const [name, number] = item.slug.split('-');
if (defaultColors[name]) {
if (number === undefined) {
acc[name] = item.color;
} else {
acc[name] = {...defaultColors[name], [number]: item.color};
}
} else {
acc[name] = {[number]: item.color};
}
return acc;
}, {})};
}
Raw
theme.json
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "primary-50",
"color": "#faf5ff",
"name": "Primary 50"
},
{
"slug": "primary-100",
"color": "#f3e8ff",
"name": "Primary 100"
},
{
"slug": "primary-200",
"color": "#e9d5ff",
"name": "Primary 200"
},
{
"slug": "primary-300",
"color": "#d8b4fe",
"name": "Primary 300"
},
{
"slug": "primary-400",
"color": "#c084fc",
"name": "Primary 400"
},
{
"slug": "primary-500",
"color": "#a855f7",
"name": "Primary 500"
},
{
"slug": "primary-600",
"color": "#9333ea",
"name": "Primary 600"
},
{
"slug": "primary-700",
"color": "#7e22ce",
"name": "Primary 700"
},
{
"slug": "primary-800",
"color": "#6b21a8",
"name": "Primary 800"
},
{
"slug": "primary-900",
"color": "#581c87",
"name": "Primary 900"
},
{
"slug": "secondary-50",
"color": "#f0fdfa",
"name": "Secondary 50"
},
{
"slug": "secondary-100",
"color": "#ccfbf1",
"name": "Secondary 100"
},
{
"slug": "secondary-200",
"color": "#99f6e4",
"name": "Secondary 200"
},
{
"slug": "secondary-300",
"color": "#5eead4",
"name": "Secondary 300"
},
{
"slug": "secondary-400",
"color": "#2dd4bf",
"name": "Secondary 400"
},
{
"slug": "secondary-500",
"color": "#14b8a6",
"name": "Secondary 500"
},
{
"slug": "secondary-600",
"color": "#0d9488",
"name": "Secondary 600"
},
{
"slug": "secondary-700",
"color": "#0f766e",
"name": "Secondary 700"
},
{
"slug": "secondary-800",
"color": "#115e59",
"name": "Secondary 800"
},
{
"slug": "secondary-900",
"color": "#134e4a",
"name": "Secondary 900"
},
{
"slug": "info-50",
"color": "#f0f9ff",
"name": "Info 50"
},
{
"slug": "info-100",
"color": "#e0f2fe",
"name": "Info 100"
},
{
"slug": "info-200",
"color": "#bae6fd",
"name": "Info 200"
},
{
"slug": "info-300",
"color": "#7dd3fc",
"name": "Info 300"
},
{
"slug": "info-400",
"color": "#38bdf8",
"name": "Info 400"
},
{
"slug": "info-500",
"color": "#0ea5e9",
"name": "Info 500"
},
{
"slug": "info-600",
"color": "#0284c7",
"name": "Info 600"
},
{
"slug": "info-700",
"color": "#0369a1",
"name": "Info 700"
},
{
"slug": "info-800",
"color": "#075985",
"name": "Info 800"
},
{
"slug": "info-900",
"color": "#0c4a6e",
"name": "Info 900"
},
{
"slug": "success-50",
"color": "#ecfdf5",
"name": "Success 50"
},
{
"slug": "success-100",
"color": "#d1fae5",
"name": "Success 100"
},
{
"slug": "success-200",
"color": "#a7f3d0",
"name": "Success 200"
},
{
"slug": "success-300",
"color": "#6ee7b7",
"name": "Success 300"
},
{
"slug": "success-400",
"color": "#34d399",
"name": "Success 400"
},
{
"slug": "success-500",
"color": "#10b981",
"name": "Success 500"
},
{
"slug": "success-600",
"color": "#059669",
"name": "Success 600"
},
{
"slug": "success-700",
"color": "#047857",
"name": "Success 700"
},
{
"slug": "success-800",
"color": "#065f46",
"name": "Success 800"
},
{
"slug": "success-900",
"color": "#064e3b",
"name": "Success 900"
},
{
"slug": "warning-50",
"color": "#fffbeb",
"name": "Warning 50"
},
{
"slug": "warning-100",
"color": "#fef3c7",
"name": "Warning 100"
},
{
"slug": "warning-200",
"color": "#fde68a",
"name": "Warning 200"
},
{
"slug": "warning-300",
"color": "#fcd34d",
"name": "Warning 300"
},
{
"slug": "warning-400",
"color": "#fbbf24",
"name": "Warning 400"
},
{
"slug": "warning-500",
"color": "#f59e0b",
"name": "Warning 500"
},
{
"slug": "warning-600",
"color": "#d97706",
"name": "Warning 600"
},
{
"slug": "warning-700",
"color": "#b45309",
"name": "Warning 700"
},
{
"slug": "warning-800",
"color": "#92400e",
"name": "Warning 800"
},
{
"slug": "warning-900",
"color": "#78350f",
"name": "Warning 900"
},
{
"slug": "danger-50",
"color": "#fef2f2",
"name": "Danger 50"
},
{
"slug": "danger-100",
"color": "#fee2e2",
"name": "Danger 100"
},
{
"slug": "danger-200",
"color": "#fecaca",
"name": "Danger 200"
},
{
"slug": "danger-300",
"color": "#fca5a5",
"name": "Danger 300"
},
{
"slug": "danger-400",
"color": "#f87171",
"name": "Danger 400"
},
{
"slug": "danger-500",
"color": "#ef4444",
"name": "Danger 500"
},
{
"slug": "danger-600",
"color": "#dc2626",
"name": "Danger 600"
},
{
"slug": "danger-700",
"color": "#b91c1c",
"name": "Danger 700"
},
{
"slug": "danger-800",
"color": "#991b1b",
"name": "Danger 800"
},
{
"slug": "danger-900",
"color": "#7f1d1d",
"name": "Danger 900"
},
{
"slug": "light-50",
"color": "#fafaf9",
"name": "Light 50"
},
{
"slug": "light-100",
"color": "#f5f5f4",
"name": "Light 100"
},
{
"slug": "light-200",
"color": "#e7e5e4",
"name": "Light 200"
},
{
"slug": "light-300",
"color": "#d6d3d1",
"name": "Light 300"
},
{
"slug": "light-400",
"color": "#a8a29e",
"name": "Light 400"
},
{
"slug": "light-500",
"color": "#78716c",
"name": "Light 500"
},
{
"slug": "light-600",
"color": "#57534e",
"name": "Light 600"
},
{
"slug": "light-700",
"color": "#44403c",
"name": "Light 700"
},
{
"slug": "light-800",
"color": "#292524",
"name": "Light 800"
},
{
"slug": "light-900",
"color": "#1c1917",
"name": "Light 900"
},
{
"slug": "dark-50",
"color": "#f9fafb",
"name": "Dark 50"
},
{
"slug": "dark-100",
"color": "#f3f4f6",
"name": "Dark 100"
},
{
"slug": "dark-200",
"color": "#e5e7eb",
"name": "Dark 200"
},
{
"slug": "dark-300",
"color": "#d1d5db",
"name": "Dark 300"
},
{
"slug": "dark-400",
"color": "#9ca3af",
"name": "Dark 400"
},
{
"slug": "dark-500",
"color": "#6b7280",
"name": "Dark 500"
},
{
"slug": "dark-600",
"color": "#4b5563",
"name": "Dark 600"
},
{
"slug": "dark-700",
"color": "#374151",
"name": "Dark 700"
},
{
"slug": "dark-800",
"color": "#1f2937",
"name": "Dark 800"
},
{
"slug": "dark-900",
"color": "#111827",
"name": "Dark 900"
},
{
"slug": "custom",
"color": "#fff",
"name": "Custom"
}
],
"custom": false,
"customGradient": false
},
"custom": {
"spacing": {},
"typography": {
"font-size": {},
"line-height": {}
}
},
"spacing": {
"padding": true,
"units": ["px", "%", "em", "rem", "vw", "vh"]
},
"typography": {
"customFontSize": false
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment