Drop-shadow custom theme overrides not working?

[ChristopherML]

Hello, I am using v 3.0.2. I have tried customising the theme drop-shadow by replacing the values in tailwind.config.js with the desired values, but they are not applied to the output CSS. I have also tried using extends in the config and similarly was unable to used the custom values.

[crswll]

You have to share your config. Otherwise, we can't tell what's wrong with it.

[ChristopherML]

My config:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0px',
      2: '2px',
      4: '4px',
      8: '8px',
      16: '1rem',
    },
    boxShadow: {
      DEFAULT: '0 4px 4px 0 rgb(0 0 0 / 0.04)',
      l: '0 4px 4px 0 rgb(0 0 0 / 0.25)',
      none: 'none',
    },
    colors: {
      black: 'var(--colour-black)',
      card: {
        200: 'var(--colour-card-200)',
        100: 'var(--colour-card-100)',
      },
      error: {
        600: 'var(--colour-error-600)',
        200: 'var(--colour-error-200)',
        50: 'var(--colour-error-50)',
      },
      grey: {
        900: 'var(--colour-grey-900)',
        700: 'var(--colour-grey-700)',
        500: 'var(--colour-grey-500)',
        100: 'var(--colour-grey-100)',
      },
      normal: {
        50: 'var(--colour-normal-50)',
      },
      primary: {
        900: 'var(--colour-primary-900)',
        800: 'var(--colour-primary-800)',
        700: 'var(--colour-primary-700)',
        600: 'var(--colour-primary-600)',
        500: 'var(--colour-primary-500)',
        400: 'var(--colour-primary-400)',
        300: 'var(--colour-primary-300)',
        200: 'var(--colour-primary-200)',
        100: 'var(--colour-primary-100)',
        50: 'var(--colour-primary-50)',
      },
      secondary: {
        900: 'var(--colour-secondary-900)',
        800: 'var(--colour-secondary-800)',
        700: 'var(--colour-secondary-700)',
        600: 'var(--colour-secondary-600)',
        500: 'var(--colour-secondary-500)',
        400: 'var(--colour-secondary-400)',
        300: 'var(--colour-secondary-300)',
        200: 'var(--colour-secondary-200)',
        100: 'var(--colour-secondary-100)',
        50: 'var(--colour-secondary-50)',
      },
      success: {
        600: 'var(--colour-success-600)',
      },
      warning: {
        100: 'var(--colour-warning-100)',
      },
      white: 'var(--colour-white)',
    },
    fontFamily: {
      sans: ['var(--font-family)', 'sans-serif'],
    },
    fontSize: {
      xxs: ['0.65rem', { lineHeight: '1rem' }],
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },
    fontWeight: {
      normal: '400',
      bold: '700',
    },
    gridTemplateColumns: {
      none: 'none',
      '1fmc1f': '1fr minmax(min-content, max-content) 1fr',
      mc2: 'repeat(2, minmax(min-content, max-content))',
      mcfr3: 'repeat(3, minmax(min-content, 1fr))',
      1: 'repeat(1, minmax(0, 1fr))',
      2: 'repeat(2, minmax(0, 1fr))',
      3: 'repeat(3, minmax(0, 1fr))',
      4: 'repeat(4, minmax(0, 1fr))',
      5: 'repeat(5, minmax(0, 1fr))',
      6: 'repeat(6, minmax(0, 1fr))',
      7: 'repeat(7, minmax(0, 1fr))',
      8: 'repeat(8, minmax(0, 1fr))',
      9: 'repeat(9, minmax(0, 1fr))',
      10: 'repeat(10, minmax(0, 1fr))',
      11: 'repeat(11, minmax(0, 1fr))',
      12: 'repeat(12, minmax(0, 1fr))',
    },
    gridTemplateRows: {
      none: 'none',
      mc2: 'repeat(2, min-content)',
      mc3: 'repeat(3, min-content)',
      1: 'repeat(1, minmax(0, 1fr))',
      2: 'repeat(2, minmax(0, 1fr))',
      3: 'repeat(3, minmax(0, 1fr))',
      4: 'repeat(4, minmax(0, 1fr))',
      5: 'repeat(5, minmax(0, 1fr))',
      6: 'repeat(6, minmax(0, 1fr))',
    },
    letterSpacing: {
      tighter: '-0.05em',
      tight: '-0.025em',
      normal: '0em',
      wide: '0.025em',
      wider: '0.05em',
      widest: '0.1em',
      extreme: '0.2em',
    },
    minHeight: ({ theme }) => ({
      0: '0px',
      16: theme('spacing.16'),
      20: theme('spacing.20'),
      full: '100%',
      screen: '100vh',
      min: 'min-content',
      max: 'max-content',
      fit: 'fit-content',
    }),
  },
  plugins: [],
};

[ChristopherML]

In the config above, I modified the theme.boxShadow keys to add a custom value theme.boxShadow.l, as well as to remove all other default keys, besides for none and default, and had the error then, but also, when using the default keys and changing the values, the new values did not replace the default values in the output.

For other values, such as for theme.colors, I was able to provide new keys, such as theme.colors.error.600, and they were produced and usable in the output.

[crswll]

What class are you trying to use. You're updating boxShadow which would provide shadow-l but you keep saying drop-shadowwhich is a different part of the config.

Note the difference between these two:

• https://tailwindcss.com/docs/drop-shadow
• https://tailwindcss.com/docs/box-shadow

Here is your code working with shadow-l: https://play.tailwindcss.com/Wzpn85ovWA

[ChristopherML]

Very straightforward! Apologies. Thank you for taking the time for the answer.