99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
|
// Set the Preflight flag based on the build target.
|
||
|
|
const includePreflight = 'editor' === process.env._TW_TARGET ? false : true;
|
||
|
|
import plugin from 'tailwindcss/plugin';
|
||
|
|
|
||
|
|
module.exports = {
|
||
|
|
presets: [
|
||
|
|
// Manage Tailwind Typography's configuration in a separate file.
|
||
|
|
require('./tailwind-typography.config.js'),
|
||
|
|
],
|
||
|
|
content: [
|
||
|
|
// Ensure changes to PHP files and `theme.json` trigger a rebuild.
|
||
|
|
'./theme/**/*.php',
|
||
|
|
],
|
||
|
|
darkMode: 'class',
|
||
|
|
theme: {
|
||
|
|
// Extend the default Tailwind theme.
|
||
|
|
extend: {
|
||
|
|
},
|
||
|
|
},
|
||
|
|
daisyui: {
|
||
|
|
themes: [
|
||
|
|
{
|
||
|
|
wowpress: {
|
||
|
|
"primary": "#a991f7",
|
||
|
|
"secondary": "#f6d860",
|
||
|
|
"accent": "#37cdbe",
|
||
|
|
"neutral": "#fff",
|
||
|
|
"base-100": "#ffffff",
|
||
|
|
"primary-content": "#fff",
|
||
|
|
"--rounded-box": "0rem", // border radius rounded-box utility class, used in card and other large boxes
|
||
|
|
"--rounded-btn": "0rem", // border radius rounded-btn utility class, used in buttons and similar element
|
||
|
|
"--rounded-badge": "0rem",
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
corePlugins: {
|
||
|
|
// Disable Preflight base styles in builds targeting the editor.
|
||
|
|
preflight: includePreflight,
|
||
|
|
},
|
||
|
|
plugins: [
|
||
|
|
// require('daisyui'),
|
||
|
|
// Add Tailwind Typography (via _tw fork).
|
||
|
|
require('@_tw/typography'),
|
||
|
|
|
||
|
|
// Extract colors and widths from `theme.json`.
|
||
|
|
require('@_tw/themejson'),
|
||
|
|
|
||
|
|
// Uncomment below to add additional first-party Tailwind plugins.
|
||
|
|
require('@tailwindcss/forms'),
|
||
|
|
require('@tailwindcss/aspect-ratio'),
|
||
|
|
require('@tailwindcss/container-queries'),
|
||
|
|
plugin(function({theme, addUtilities}) {
|
||
|
|
const colorUtilities={};
|
||
|
|
const colors = theme('colors');
|
||
|
|
for (const color in colors){
|
||
|
|
if(typeof colors[color] === 'object'){
|
||
|
|
colorUtilities[`.button-${color}`] = {
|
||
|
|
'background': colors[color]['400'],
|
||
|
|
'color': colors[color]['800'],
|
||
|
|
'border': '1px solid '+colors[color]['800'],
|
||
|
|
'outline': colors[color]['800'],
|
||
|
|
'&:hover': {
|
||
|
|
'background': colors[color]['300'],
|
||
|
|
'border': '1px solid'+ colors[color]['900']
|
||
|
|
}
|
||
|
|
}
|
||
|
|
colorUtilities[`.badge-${color}`] = {
|
||
|
|
'background': colors[color]['200'],
|
||
|
|
'color': colors[color]['800'],
|
||
|
|
'border-color': colors[color]['800'],
|
||
|
|
}
|
||
|
|
colorUtilities[`.alert-${color}`] = {
|
||
|
|
'background': colors[color]['200'],
|
||
|
|
'color': colors[color]['800'],
|
||
|
|
'border-color': colors[color]['800'],
|
||
|
|
}
|
||
|
|
colorUtilities[`.disabled-${color}`] = {
|
||
|
|
'--disabled-color' : colors[color]['500'],
|
||
|
|
}
|
||
|
|
colorUtilities[`.enabled-${color}`] = {
|
||
|
|
'--enabled-color' : colors[color]['500'],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
addUtilities(colorUtilities);
|
||
|
|
})
|
||
|
|
],
|
||
|
|
safelist: [
|
||
|
|
{pattern: /button-+/},
|
||
|
|
{pattern: /badge-+/},
|
||
|
|
{pattern: /alert-+/},
|
||
|
|
{pattern: /bg-[^/]+-200$/},
|
||
|
|
{pattern: /text-+/},
|
||
|
|
{pattern: /border-[^/]+-700$/},
|
||
|
|
]
|
||
|
|
};
|