118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
// @ts-check
|
|
|
|
const path = require('node:path');
|
|
const plugin = require('tailwindcss/plugin');
|
|
const {
|
|
default: flattenColorPalette,
|
|
} = require('tailwindcss/lib/util/flattenColorPalette');
|
|
|
|
// Ignore these nx related dependencies since they are the installed versions not the ones in the workspace
|
|
// nx-ignore-next-line
|
|
const { workspaceRoot } = require('@nx/devkit');
|
|
// nx-ignore-next-line
|
|
const { createGlobPatternsForDependencies } = require('@nx/next/tailwind');
|
|
|
|
if (!createGlobPatternsForDependencies(__dirname).length)
|
|
throw Error('GRAPH ISSUE: No dependency found when many are expected.');
|
|
|
|
const FlipAnimation = plugin(function ({ addUtilities }) {
|
|
addUtilities({
|
|
'.my-rotate-y-180': {
|
|
transform: 'rotateY(180deg)',
|
|
},
|
|
'.preserve-3d': {
|
|
transformStyle: 'preserve-3d',
|
|
},
|
|
'.perspective': {
|
|
perspective: '1000px',
|
|
},
|
|
'.backface-hidden': {
|
|
backfaceVisibility: 'hidden',
|
|
},
|
|
});
|
|
});
|
|
|
|
// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
|
|
function addVariablesForColors({ addBase, theme }) {
|
|
let allColors = flattenColorPalette(theme('colors'));
|
|
let newVars = Object.fromEntries(
|
|
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
|
|
);
|
|
|
|
addBase({
|
|
':root': newVars,
|
|
});
|
|
}
|
|
|
|
module.exports = {
|
|
experimental: {
|
|
optimizeUniversalDefaults: true,
|
|
},
|
|
mode: 'jit',
|
|
darkMode: 'class',
|
|
content: [
|
|
path.join(__dirname, '{pages,app}/**/*.{js,ts,jsx,tsx}'),
|
|
...createGlobPatternsForDependencies(__dirname),
|
|
// Resolve the classes used in @nx/graph components
|
|
// TODO: make a decision on whether this is really the best approach, or if precompiling and deduplicating the classes would be better
|
|
path.join(
|
|
workspaceRoot,
|
|
'node_modules/@nx/graph/**/*.{js,ts,jsx,tsx,html}'
|
|
),
|
|
],
|
|
theme: {
|
|
extend: {
|
|
animation: {
|
|
progress: `progress linear forwards`,
|
|
marquee: 'marquee var(--duration) linear infinite',
|
|
'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',
|
|
},
|
|
keyframes: {
|
|
marquee: {
|
|
from: { transform: 'translateX(0)' },
|
|
to: { transform: 'translateX(calc(-100% - var(--gap)))' },
|
|
},
|
|
'marquee-vertical': {
|
|
from: { transform: 'translateY(0)' },
|
|
to: { transform: 'translateY(calc(-100% - var(--gap)))' },
|
|
},
|
|
progress: {
|
|
'0%': { width: '0%' },
|
|
'100%': { width: '100%' },
|
|
},
|
|
},
|
|
typography: {
|
|
DEFAULT: {
|
|
css: {
|
|
'code::before': {
|
|
content: '',
|
|
},
|
|
'code::after': {
|
|
content: '',
|
|
},
|
|
'blockquote p:first-of-type::before': {
|
|
content: '',
|
|
},
|
|
'blockquote p:last-of-type::after': {
|
|
content: '',
|
|
},
|
|
s: {
|
|
'@apply text-gray-500': {},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
screens: {
|
|
wide: '1800px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/aspect-ratio'),
|
|
require('@tailwindcss/typography'),
|
|
require('@tailwindcss/forms'),
|
|
FlipAnimation,
|
|
addVariablesForColors,
|
|
],
|
|
};
|