Custom Config with working responsive breakpoints is NOT working #8453
Answered
by
christopherGdynia
christopherGdynia
asked this question in
Help
-
|
Hello there, after upgrading my environment: Note: this is a turborepo, the config below will get loaded as a plugin in each app. The content flag is working as expected. my config: module.exports = {
// content is added in each app in monorepos
mode: 'jit',
safelist: [
'flex',
'flex-col',
'flex-auto',
'grid-cols-1',
'grid-cols-2',
'grid-cols-3',
'grid-cols-4',
'grid-cols-5',
'grid-cols-6',
'grid-rows-1',
'grid-rows-2',
'grid-rows-3',
'grid-rows-4',
'grid-rows-5',
'grid-rows-6',
],
theme: {
colors: {
textIcon: {
standard: 'var(--telekom-color-text-and-icon-standard)',
additional: 'var(--telekom-color-text-and-icon-additional)',
disabled: 'var(--telekom-color-text-and-icon-disabled)',
link: {
standard: 'var(--telekom-color-text-and-icon-link-standard)',
hovered: 'var(--telekom-color-text-and-icon-link-hovered)',
visited: 'var(--telekom-color-text-and-icon-link-visited)',
active: 'var(--telekom-color-text-and-icon-link-active)',
},
primary: {
standard: 'var(--telekom-color-text-and-icon-primary-standard)',
hovered: 'var(--telekom-color-text-and-icon-primary-hovered)',
pressed: 'var(--telekom-color-text-and-icon-primary-pressed)',
},
inverted: {
standard: 'var(--telekom-color-text-and-icon-inverted-standard)',
additional: 'var(--telekom-color-text-and-icon-inverted-additional)',
},
white: {
standard: 'var(--telekom-color-text-and-icon-white-standard)',
additional: 'var(--telekom-color-text-and-icon-white-additional)',
},
black: {
standard: 'var(--telekom-color-text-and-icon-black-standard)',
additional: 'var(--telekom-color-text-and-icon-black-additional)',
},
functional: {
informational: 'var(--telekom-color-text-and-icon-functional-informational)',
success: 'var(--telekom-color-text-and-icon-functional-success)',
danger: 'var(--telekom-color-text-and-icon-functional-danger)',
warning: 'var(--telekom-color-text-and-icon-functional-warning)',
},
},
grey: {
0: 'var( --scl-color-grey-0)',
10: 'var( --scl-color-grey-10)',
20: 'var( --scl-color-grey-20)',
30: 'var( --scl-color-grey-30)',
40: 'var( --scl-color-grey-40)',
50: 'var( --scl-color-grey-50)',
60: 'var( --scl-color-grey-60)',
70: 'var( --scl-color-grey-70)',
80: 'var( --scl-color-grey-80)',
90: 'var( --scl-color-grey-90)',
100: 'var( --scl-color-grey-100)',
},
background: {
canvas: 'var(--telekom-color-background-canvas)',
canvasSubtle: 'var(--telekom-color-background-canvas-subtle)',
backdrop: 'var(--telekom-color-background-backdrop)',
surface: 'var(--telekom-color-background-surface)',
surfaceSubtle: 'var(--telekom-color-background-surface-subtle)',
surfaceHighlight: 'var(--telekom-color-background-surface-highlight)',
},
primary: {
standard: 'var(--telekom-color-primary-standard)',
hovered: 'var(--telekom-color-primary-hovered)',
pressed: 'var(--telekom-color-primary-pressed)',
},
ui: {
outlined: {
border: {
standard: 'var(--telekom-color-ui-outlined-border-standard)',
hovered: 'var(--telekom-color-ui-outlined-border-hovered)',
pressed: 'var(--telekom-color-ui-outlined-border-pressed)',
active: 'var(--telekom-color-ui-outlined-border-active)',
disabled: 'var(--telekom-color-ui-outlined-border-disabled)',
},
fill: {
standard: 'var(--telekom-color-ui-outlined-fill-standard)',
hovered: 'var(--telekom-color-ui-outlined-fill-hovered)',
pressed: 'var(--telekom-color-ui-outlined-fill-pressed)',
active: 'var(--telekom-color-ui-outlined-fill-active)',
disabled: 'var(--telekom-color-ui-outlined-fill-disabled)',
},
},
ghost: {
hovered: 'var(--telekom-color-ui-ghost-hovered)',
hoveredInverted: 'var(--telekom-color-ui-ghost-hovered-inverted)',
pressed: 'var(--telekom-color-ui-ghost-pressed)',
pressedInverted: 'var(--telekom-color-ui-ghost-pressed-inverted)',
active: 'var(--telekom-color-ui-ghost-active)',
},
solid: {
standard: 'var(--telekom-color-ui-solid-standard)',
hovered: 'var(--telekom-color-ui-solid-hovered)',
pressed: 'var(--telekom-color-ui-solid-pressed)',
disabled: 'var(--telekom-color-ui-solid-disabled)',
},
additional: {
base: 'var(--telekom-color-ui-additional-base)',
subtle: 'var(--telekom-color-ui-additional-subtle)',
light: 'var(--telekom-color-ui-additional-light)',
regular: 'var(--telekom-color-ui-additional-regular)',
strong: 'var(--telekom-color-ui-additional-strong)',
extraStrong: 'var(--telekom-color-ui-additional-extra-strong)',
},
},
functional: {
focus: 'var(--telekom-color-functional-focus)',
success: {
standard: 'var(--telekom-color-functional-success-standard)',
hovered: 'var(--telekom-color-functional-success-hovered)',
pressed: 'var(--telekom-color-functional-success-pressed)',
subtle: 'var(--telekom-color-functional-success-subtle)',
},
interaction: {
standard: 'var(--telekom-color-functional-interaction-standard)',
hovered: 'var(--telekom-color-functional-interaction-hovered)',
pressed: 'var(--telekom-color-functional-interaction-pressed)',
subtle: 'var(--telekom-color-functional-interaction-subtle)',
},
informational: {
standard: 'var(--telekom-color-functional-informational-standard)',
hovered: 'var(--telekom-color-functional-informational-hovered)',
pressed: 'var(--telekom-color-functional-informational-pressed)',
subtle: 'var(--telekom-color-functional-informational-subtle)',
},
warning: {
standard: 'var(--telekom-color-functional-warning-standard)',
hovered: 'var(--telekom-color-functional-warning-hovered)',
pressed: 'var(--telekom-color-functional-warning-pressed)',
subtle: 'var(--telekom-color-functional-warning-subtle)',
},
danger: {
standard: 'var(--telekom-color-functional-danger-standard)',
hovered: 'var(--telekom-color-functional-danger-hovered)',
pressed: 'var(--telekom-color-functional-danger-pressed)',
subtle: 'var(--telekom-color-functional-danger-subtle)',
},
},
additional: {
brown: {
0: 'var(--telekom-color-additional-brown-0)',
100: 'var(--telekom-color-additional-brown-100)',
200: 'var(--telekom-color-additional-brown-200)',
300: 'var(--telekom-color-additional-brown-300)',
400: 'var(--telekom-color-additional-brown-400)',
500: 'var(--telekom-color-additional-brown-500)',
600: 'var(--telekom-color-additional-brown-600)',
700: 'var(--telekom-color-additional-brown-700)',
800: 'var(--telekom-color-additional-brown-800)',
900: 'var(--telekom-color-additional-brown-900)',
tint: 'var(--telekom-color-additional-brown-tint)',
shade: 'var(--telekom-color-additional-brown-shade)',
},
pink: {
0: 'var(--telekom-color-additional-pink-0)',
100: 'var(--telekom-color-additional-pink-100)',
200: 'var(--telekom-color-additional-pink-200)',
300: 'var(--telekom-color-additional-pink-300)',
400: 'var(--telekom-color-additional-pink-400)',
500: 'var(--telekom-color-additional-pink-500)',
600: 'var(--telekom-color-additional-pink-600)',
700: 'var(--telekom-color-additional-pink-700)',
800: 'var(--telekom-color-additional-pink-800)',
900: 'var(--telekom-color-additional-pink-900)',
tint: 'var(--telekom-color-additional-pink-tint)',
shade: 'var(--telekom-color-additional-pink-shade)',
},
purple: {
0: 'var(--telekom-color-additional-purple-0)',
100: 'var(--telekom-color-additional-purple-100)',
200: 'var(--telekom-color-additional-purple-200)',
300: 'var(--telekom-color-additional-purple-300)',
400: 'var(--telekom-color-additional-purple-400)',
500: 'var(--telekom-color-additional-purple-500)',
600: 'var(--telekom-color-additional-purple-600)',
700: 'var(--telekom-color-additional-purple-700)',
800: 'var(--telekom-color-additional-purple-800)',
900: 'var(--telekom-color-additional-purple-900)',
tint: 'var(--telekom-color-additional-purple-tint)',
shade: 'var(--telekom-color-additional-purple-shade)',
},
violet: {
0: 'var(--telekom-color-additional-violet-0)',
100: 'var(--telekom-color-additional-violet-100)',
200: 'var(--telekom-color-additional-violet-200)',
300: 'var(--telekom-color-additional-violet-300)',
400: 'var(--telekom-color-additional-violet-400)',
500: 'var(--telekom-color-additional-violet-500)',
600: 'var(--telekom-color-additional-violet-600)',
700: 'var(--telekom-color-additional-violet-700)',
800: 'var(--telekom-color-additional-violet-800)',
900: 'var(--telekom-color-additional-violet-900)',
tint: 'var(--telekom-color-additional-violet-tint)',
shade: 'var(--telekom-color-additional-violet-shade)',
},
teal: {
0: 'var(--telekom-color-additional-teal-0)',
100: 'var(--telekom-color-additional-teal-100)',
200: 'var(--telekom-color-additional-teal-200)',
300: 'var(--telekom-color-additional-teal-300)',
400: 'var(--telekom-color-additional-teal-400)',
500: 'var(--telekom-color-additional-teal-500)',
600: 'var(--telekom-color-additional-teal-600)',
700: 'var(--telekom-color-additional-teal-700)',
800: 'var(--telekom-color-additional-teal-800)',
900: 'var(--telekom-color-additional-teal-900)',
tint: 'var(--telekom-color-additional-teal-tint)',
shade: 'var(--telekom-color-additional-teal-shade)',
},
olive: {
0: 'var(--telekom-color-additional-olive-0)',
100: 'var(--telekom-color-additional-olive-100)',
200: 'var(--telekom-color-additional-olive-200)',
300: 'var(--telekom-color-additional-olive-300)',
400: 'var(--telekom-color-additional-olive-400)',
500: 'var(--telekom-color-additional-olive-500)',
600: 'var(--telekom-color-additional-olive-600)',
700: 'var(--telekom-color-additional-olive-700)',
800: 'var(--telekom-color-additional-olive-800)',
900: 'var(--telekom-color-additional-olive-900)',
tint: 'var(--telekom-color-additional-olive-tint)',
shade: 'var(--telekom-color-additional-olive-shade)',
},
},
},
borderWidth: {
standard: 'var(--telekom-line-weight-standard)',
highlight: 'var(--telekom-line-weight-highlight)',
bold: 'var(--telekom-line-weight-bold)',
},
transitionDuration: {
instant: 'var(--telekom-motion-duration-instant)',
immediate: 'var(--telekom-motion-duration-immediate)',
transition: 'var(--telekom-motion-duration-transition)',
animation: 'var(--telekom-motion-duration-animation)',
animationDeliberate: 'var(--telekom-motion-duration-animation-deliberate)',
},
transitionTimingFunction: {
standard: 'var(--telekom-motion-easing-standard)',
enter: 'var(--telekom-motion-easing-enter)',
leave: 'var(--telekom-motion-easing-leave)',
},
opacity: {
invisible: 'var(--telekom-opacity-invisible)',
transparent: 'var(--telekom-opacity-transparent)',
semiTransparent: 'var(--telekom-opacity-semi-transparent)',
translucent: 'var(--telekom-opacity-translucent)',
semiTranslucent: 'var(--telekom-opacity-semi-translucent)',
solid: 'var(--telekom-opacity-solid)',
},
borderRadius: {
small: 'var(--telekom-radius-small)',
standard: 'var(--telekom-radius-standard)',
large: 'var(--telekom-radius-large)',
pill: 'var(--telekom-radius-pill)',
circle: 'var(--telekom-radius-circle)',
},
boxShadow: {
flat: {
standard: 'var(--telekom-shadow-flat-standard)',
hover: 'var(--telekom-shadow-flat-hover)',
pressed: 'var(--telekom-shadow-flat-pressed)',
},
resting: {
standard: 'var(--telekom-shadow-resting-standard)',
hover: 'var(--telekom-shadow-resting-hover)',
pressed: 'var(--telekom-shadow-resting-pressed)',
},
raised: {
standard: 'var(--telekom-shadow-raised-standard)',
hover: 'var(--telekom-shadow-raised-hover)',
pressed: 'var(--telekom-shadow-raised-pressed)',
},
floating: {
standard: 'var(--telekom-shadow-floating-standard)',
hover: 'var(--telekom-shadow-floating-hover)',
pressed: 'var(--telekom-shadow-floating-pressed)',
},
top: 'var(--telekom-shadow-top)',
overlay: 'var(--telekom-shadow-overlay)',
appBar: {
top: {
raised: 'var(--telekom-shadow-app-bar-top-raised)',
flat: 'var(--telekom-shadow-app-bar-top-flat)',
},
bottom: {
flat: 'var(--telekom-shadow-app-bar-bottom-flat)',
},
},
},
spacing: {
0: '0',
1: 'var(--scl-spacing-1)',
2: 'var(--scl-spacing-2)',
4: 'var(--scl-spacing-4)',
8: 'var(--scl-spacing-8)',
12: 'var(--scl-spacing-12)',
16: 'var(--scl-spacing-16)',
24: 'var(--scl-spacing-24)',
32: 'var(--scl-spacing-32)',
40: 'var(--scl-spacing-40)',
48: 'var(--scl-spacing-48)',
68: 'var(--scl-spacing-68)',
80: 'var(--scl-spacing-80)',
x0: 'var(--telekom-spacing-unit-x0)',
x025: 'var(--telekom-spacing-unit-x025)',
x05: 'var(--telekom-spacing-unit-x05)',
x1: 'var(--telekom-spacing-unit-x1)',
x2: 'var(--telekom-spacing-unit-x2)',
x3: 'var(--telekom-spacing-unit-x3)',
x4: 'var(--telekom-spacing-unit-x4)',
x5: 'var(--telekom-spacing-unit-x5)',
x6: 'var(--telekom-spacing-unit-x6)',
x7: 'var(--telekom-spacing-unit-x7)',
x8: 'var(--telekom-spacing-unit-x8)',
x9: 'var(--telekom-spacing-unit-x9)',
x10: 'var(--telekom-spacing-unit-x10)',
x11: 'var(--telekom-spacing-unit-x11)',
x12: 'var(--telekom-spacing-unit-x12)',
x13: 'var(--telekom-spacing-unit-x13)',
x14: 'var(--telekom-spacing-unit-x14)',
x15: 'var(--telekom-spacing-unit-x15)',
x16: 'var(--telekom-spacing-unit-x16)',
x17: 'var(--telekom-spacing-unit-x17)',
x18: 'var(--telekom-spacing-unit-x18)',
x19: 'var(--telekom-spacing-unit-x19)',
x20: 'var(--telekom-spacing-unit-x20)',
},
fontSize: {
10: 'var(--scl-font-size-10)',
12: 'var(--scl-font-size-12)',
14: 'var(--scl-font-size-14)',
16: 'var(--scl-font-size-16)',
20: 'var(--scl-font-size-20)',
24: 'var(--scl-font-size-24)',
32: 'var(--scl-font-size-32)',
40: 'var(--scl-font-size-40)',
56: 'var(--scl-font-size-56)',
footnote: 'var(--telekom-typography-font-size-footnote)',
small: 'var(--telekom-typography-font-size-small)',
caption: 'var(--telekom-typography-font-size-caption)',
body: 'var(--telekom-typography-font-size-body)',
callout: 'var(--telekom-typography-font-size-callout)',
headline3: 'var(--telekom-typography-font-size-headline-3)',
headline2: 'var(--telekom-typography-font-size-headline-2)',
headline1: 'var(--telekom-typography-font-size-headline-1)',
title3: 'var(--telekom-typography-font-size-title-3)',
title2: 'var(--telekom-typography-font-size-title-2)',
title1: 'var(--telekom-typography-font-size-title-1)',
},
fontFamily: {
sans: 'var(--telekom-typography-font-family-sans)',
mono: 'var(--telekom-typography-font-family-mono)',
},
fontWeight: {
thin: 'var(--telekom-typography-font-weight-thin)',
regular: 'var(--telekom-typography-font-weight-regular)',
medium: 'var(--telekom-typography-font-weight-medium)',
bold: 'var(--telekom-typography-font-weight-bold)',
extraBold: 'var(--telekom-typography-font-weight-extra-bold)',
},
lineHeight: {
none: 'var(--telekom-typography-line-spacing-none)',
extraTight: 'var(--telekom-typography-line-spacing-extra-tight)',
tight: 'var(--telekom-typography-line-spacing-tight)',
standard: 'var(--telekom-typography-line-spacing-standard)',
loose: 'var(--telekom-typography-line-spacing-loose)',
},
letterSpacing: {
standard: 'var(--telekom-typography-letter-spacing-standard)',
},
borderRadius: {
0: '0',
1: 'var(--scl-radius-1)',
2: 'var(--scl-radius-2)',
4: 'var(--scl-radius-4)',
8: 'var(--scl-radius-8)',
},
zIndex: {
0: 0,
5: 5,
10: 10,
11: 11,
12: 12,
13: 13,
14: 14,
15: 15,
16: 16,
17: 17,
18: 18,
19: 19,
20: 20,
25: 25,
auto: 'auto',
},
screens: {
sm: 'var(--scl-screensize-sm: 640px)',
md: 'var(--scl-screensize-md: 768px)',
lg: 'var(--scl-screensize-lg: 1024px)',
xl: 'var(--scl-screensize-xl: 1280px)',
ul: 'var(--scl-screensize-ul: 1536px)',
},
},
}; |
Beta Was this translation helpful? Give feedback.
Answered by
christopherGdynia
Jun 2, 2022
Replies: 1 comment
-
|
Hey @adamwathan, maybe can you help me, I am pretty confused and frustrated. I really like tailwind and I don't want to remove it, but after changing the config it's just not working as I need it to. EDIT: variants: {
extend: {},
},
plugins: [], |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
christopherGdynia
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey @adamwathan, maybe can you help me, I am pretty confused and frustrated. I really like tailwind and I don't want to remove it, but after changing the config it's just not working as I need it to.
EDIT:
these lines where missing,
now its working