Tailwindcss: [1.2.0] @apply cannot be used with .max-w-full

[sebsobseb]

I just upgraded from v1.1.4 to v1.2.0, and now I get the following error when running yarn dev:

(3610:5)@applycannot be used with.max-w-fullbecause.max-w-fulleither cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that.max-w-fullexists, make sure that any@importstatements are being properly processed *before* Tailwind CSS sees your CSS, as@applycan only be used for classes in the same CSS tree.

  3608 | @media only screen and (max-width: 768px) {
  3609 |   #foo {
> 3610 |     @apply max-w-full;
       |     ^
  3611 |   }

This was not the case on v1.1.4 - any idea what could cause this error?

[adamwathan]

Can you post the contents of your Tailwind config file? Or even a better a complete GitHub repo that reproduces the issue? I can't reproduced it here.

[sebsobseb]

Can you post the contents of your Tailwind config file? Or even a better a complete GitHub repo that reproduces the issue? I can't reproduced it here.

@adamwathan This is the content of our src/resources/tailwind.config.js:

const defaultConfig = require('tailwindcss/defaultConfig');

module.exports = {
    ...defaultConfig,
    theme: {
        ...defaultConfig.theme,
        colors: {
            ...defaultConfig.theme.colors,

            inherit: 'inherit',

            primary: {
                100: '#FFCC33', //lightest
                200: '#FCD9B6', //lighter
                300: '#FFE07B', //light
                400: '#FFEAA5', //light-alternative
                500: '#FFF9E8', //light-hover
                600: '#FFCC33', //primary
                700: '#FFB902', //dark
                800: '#613B1F', //darker
                900: '#462A16', //darkest
            },
            secondary: {
                100: '#EAF5FF', //lightest
                200: '#EAF5FF', //lighter
                300: '#6EBCFF', //light
                400: '#90cdf4', //light-hover
                500: '#90cdf4', //light-alternative
                600: '#55B1FF', //secondary
                700: '#55B1FF', //dark
                800: '#55B1FF', //darker
                900: '#55B1FF', //darkest
            },
            gray: {
                100: '#F7F7F7', //light && background
                200: '#EAEAEA', //mild && menu
                300: '#C4C4C4', //mild-dark
                400: '#A6A6A8', //alternative
                500: '#56565B', //dark
                600: '#718096',
                700: '#4a5568',
                800: '#2d3748',
                900: '#1a202c',
            }
        },
        spacing: {
            ...defaultConfig.theme.spacing,
            '1.5': '0.3rem',
            '2.5': '0.6rem',
            '5px': '5px',
            '40px': '40px',
        },
        borderWidth: {
            ...defaultConfig.theme.borderWidth,
            '3': '3px'
        },
        fontFamily: {
            ...defaultConfig.theme.fontFamily,
            primary: ['Cera Basic'],
            'primary-bold': ['Cera Basic Bold'],
            secondary: ['Roboto'],
            'secondary-bold': ['Roboto Bold'],
            awesome: ['FontAwesome'],
            base: ['Base'],
        },
        lineHeight: {
            ...defaultConfig.theme.lineHeight,
            '2.5': '2.5',
        },
        maxWidth: {
            ...defaultConfig.theme.maxWidth,
            '1/4': '25%',
            '1/2': '50%',
            '3/4': '75%',
            '350px': '350px',
        },
        minWidth: {
            ...defaultConfig.theme.minWidth,
            '165px': '165px',
            '200px': '200px',
            '350px': '350px',
        },
        zIndex: {
            ...defaultConfig.theme.zIndex,
            '100': 100,
            '999': 999,
            'top': 9999
        },
    },
    variants: {
        ...defaultConfig.variants,
        opacity: [...defaultConfig.variants.opacity, 'group-hover'],
        textColor: [...defaultConfig.variants.textColor, 'group-hover']
    },
};

In app.scss we have:

@tailwind base;
@tailwind utilities;
@tailwind components;

...
@import 'abstracts/mixins';
@import 'components/modules';
...

in abstracts/_mixins.scss:

@mixin mobile {
  @media only screen and (max-width: 768px) {
    @content;
  }
}
...

In components/_modules.scss:

...
@include mobile {
  #modules a {
    @apply max-w-full;
    flex: 1 0 100%;

    span {
      @apply hidden;
    }
  }
}
...

[tlgreg]

Spreading in everything from tailwindcss/defaultConfig won't work as some values are actually functions. This is the case with maxWidth too.

What is the reason that extend was not used?

Docs on extending the default theme:
https://tailwindcss.com/docs/theme#extending-the-default-theme

[SamNewism]

What is the reason that extend was not used?

extend was not originally part of the config (or at least not documented) so if you wanted to extend the existing config you had to do it like sebsobseb did. Even though extend was added a while ago this was the first version to break the old way of extending the config.

[adamwathan]

Ah yeah max-width is now a function (when it used to be a flat list):

https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L315-L329

Don't want to call this a breaking change really as you are supposed to use extend if you want to extend the defaults. Making that change should fix this for you 👍🏻