88 lines
2.8 KiB
JavaScript
88 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';
|
|
import themejson from '@_tw/themejson';
|
|
|
|
const themecolors = themejson().config.theme.extend.colors;
|
|
|
|
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: {},
|
|
},
|
|
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');
|
|
// const themecolors = themejson.config.theme.extend.colors;
|
|
for (const color in themecolors) {
|
|
colorUtilities[`.btn-${color}`] = {
|
|
'--btn-color': themecolors[color]
|
|
}
|
|
}
|
|
for (const color in colors) {
|
|
if (typeof colors[color] === 'object') {
|
|
if (colors[color]['500'] !== undefined) {
|
|
colorUtilities[`.btn-${color}`] = {
|
|
'--btn-color': colors[color]['500']
|
|
}
|
|
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: /btn-([a-zA-Z]+)$/ },
|
|
{ pattern: /bg-([a-zA-Z]+)$/, variants: ['has-\[\:checked\]'] },
|
|
{ pattern: /text-([a-zA-Z]+)$/, variants: ['hover', 'group-hover', 'has-\[\:checked\]'] },
|
|
{ pattern: /shadow-([a-zA-Z]+)$/ },
|
|
{ pattern: /border-([a-zA-Z]+)$/ },
|
|
{ pattern: /bg-([a-zA-Z]+)-500$/, variants: ['has-\[\:checked\]'] },
|
|
{ pattern: /text-([a-zA-Z]+)-500$/, variants: ['hover', 'group-hover', 'has-\[\:checked\]'] },
|
|
{ pattern: /border-([a-zA-Z]+)-500$/, variants: ['hover', 'group-hover', 'has-\[\:checked\]'] },
|
|
]
|
|
};
|