@metamask/design-system-tailwind-preset
Version:
Design System Tailwind CSS preset for MetaMask projects
34 lines • 1.19 kB
JavaScript
import { colors } from "./colors.mjs";
import { shadows, shadowPlugin } from "./shadows.mjs";
import { typography } from "./typography.mjs";
const tailwindConfig = {
content: [],
theme: {
extend: {
colors: {
...colors,
},
// Reduces redundancy by enabling shorter Tailwind class names
textColor: ({ theme }) => ({
...theme('colors'),
...colors.text, // e.g. text-default instead of text-text-default
}),
backgroundColor: ({ theme }) => ({
...theme('colors'),
...colors.background, // e.g. bg-default instead of bg-background-default
}),
borderColor: ({ theme }) => ({
...theme('colors'),
...colors.border, // e.g. border-default instead of border-border-default
}),
...typography,
boxShadow: shadows,
},
},
plugins: [
shadowPlugin, // Allows for combination of size and color shadow utilities
],
};
export default tailwindConfig;
module.exports = tailwindConfig;
//# sourceMappingURL=index.mjs.map